ajax用法示例.docx
- 文档编号:12632843
- 上传时间:2023-04-21
- 格式:DOCX
- 页数:20
- 大小:114.13KB
ajax用法示例.docx
《ajax用法示例.docx》由会员分享,可在线阅读,更多相关《ajax用法示例.docx(20页珍藏版)》请在冰豆网上搜索。
ajax用法示例
ajax用法示例
示例1:
异步发送GET请求数据,以文本形式接收响应数据
ajax1.jsp文件
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
varxhr;//核心对象
functioncheck(){
varusername=document.getElementById("username").value;
//用encodeURIComponent函数进行编码,可传递中文
varurl="CheckUsernameServlet?
username="+encodeURIComponent(username);
//根据浏览器创建对象
if(window.ActiveXObject){
xhr=newActiveXObject("Microsoft.XMLHttp");
}elseif(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}
xhr.onreadystatechange=process;//注册监听
xhr.open("GET",url,true);//设置请求方式和请求地址
xhr.setRequestHeader("If-Modified-Since","0");//禁止缓存
xhr.setRequestHeader("Cache-Control","no-cache");//禁止缓存
xhr.send(null);//发送请求
}
//处理请求
functionprocess(){
if(xhr.readyState==4){
if(xhr.status==200)
alert("请求成功,数据="+xhr.responseText);
else
alert("请求失败,状态码="+xhr.status);
}
}
CheckUsernameServlet.java
importjava.io.*;
importjavax.servlet.*;
importjavax.servlet.http.*;
publicclassCheckUsernameServletextendsHttpServlet{
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");//是text/xml!
!
response.setHeader("Cache-Control","no-cache,must-revalidate");//禁止缓存
PrintWriterout=response.getWriter();
Stringusername=request.getParameter("username");
username=newString(username.getBytes("iso-8859-1"),"utf-8");
System.out.println(username);
if(username.equals("admin"))
out.print("
else
out.print("
out.close();
}
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
this.doGet(request,response);
}
}
截屏:
示例2:
异步发送请求,以xml形式接收数据
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
--
异步发送请求,以xml形式接收数据
-->
varxhr;//核心对象
//发送请求
functioncheck(){
varusername=document.getElementById("username").value;
varurl="CheckUsernameServlet?
username="+encodeURIComponent(username);
//根据浏览器创建对象
if(window.ActiveXObject){
xhr=newActiveXObject("Microsoft.XMLHttp");
}elseif(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}
xhr.onreadystatechange=process;//注册监听
xhr.open("GET",url,true);//设置请求方式和请求地址
xhr.setRequestHeader("cache-control","no-cache");
xhr.send(null);//发送请求
}
//事件处理
functionprocess(){
if(xhr.readyState==4){
if(xhr.status==200){
//返回xml对象
varxml=xhr.responseXML;
//childNodes[0]表示元素节点中的文本节点
alert("请求成功,数据="+xml.getElementsByTagName("msg")[0].childNodes[0].nodeValue);
}else{
alert("请求失败,状态码="+xhr.status);
}
}
}
截屏:
示例3:
异步发送POST请求数据
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
varxhr;//核心对象
functioncheck(){
varusername=document.getElementById("username").value;
varurl="CheckUsernameServlet";
//根据浏览器创建对象
if(window.ActiveXObject){
xhr=newActiveXObject("Microsoft.XMLHttp");
}elseif(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}
xhr.onreadystatechange=process;//注册监听
xhr.open("POST",url,true);//设置请求方式和请求地址
xhr.setRequestHeader("If-Modified-Since","0");//禁止缓存
xhr.setRequestHeader("Cache-Control","no-cache");//禁止缓存xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+username);//发送请求
}
//处理请求
functionprocess(){
if(xhr.readyState==4){
if(xhr.status==200)
alert("请求成功,数据="+xhr.responseText);
else
alert("请求失败,状态码="+xhr.status);
}
}
示例4:
解析XML数据
ajax6.xml文件
xmlversion="1.0"encoding="utf-8"?
>
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
--窗口打开时,自动读取解析部门数据xml文件,并放到
//创建XHR对象
varxhr=null;
//载入列表
functionshowDeptno(){
//根据浏览器情况创建xhr对象
if(window.ActiveXObject){
xhr=newActiveXObject("Microsoft.XMLHttp");
}elseif(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}
xhr.onreadystatechange=showDeptnoProcess;//注册监听
varurl="ajax6.xml";//URL
xhr.open("GET",url,true);//设置URL
xhr.send(null);
}
//处理异步请求
functionshowDeptnoProcess(){
if(xhr.readyState==4){
if(xhr.status==200){
//获得xml数据
varxml=xhr.responseXML;
//获得节点集合
varnodes=xml.getElementsByTagName("dept");
//获得列表框对象
vardept=document.getElementById("deptno");
//遍历节点
for(vari=0;i //创建一个option的DOM对象 varop=document.createElement("option"); op.setAttribute("value",nodes[i].childNodes[0].childNodes[0].nodeValue); op.innerHTML=nodes[i].childNodes[1].childNodes[0].nodeValue; //加入到列表框中 dept.appendChild(op); } } } } window.onload=showDeptno;//当窗口打开时执行
截屏:
示例5:
解析xml,读取xml文件中节点的属性值
ajax7.xml文件
xmlversion="1.0"encoding="utf-8"?
>
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
--当选择部门时,自动读取xml文件中每个节点的属性值,并放到
//创建XHR对象
varxhr=null;
functionshowDeptno(){
//根据浏览器情况创建xhr对象
if(window.ActiveXObject){
xhr=newActiveXObject("Microsoft.XMLHttp");
}elseif(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}
xhr.onreadystatechange=showDeptnoProcess;//注册监听
varurl="ajax7.xml";//URL
xhr.open("GET",url,true);//设置URL
xhr.send(null);
}
//处理异步请求
functionshowDeptnoProcess(){
if(xhr.readyState==4){
if(xhr.status==200){
//获得xml数据
varxml=xhr.responseXML;
//获得节点集合
varnodes=xml.getElementsByTagName("dept");
//获得列表框对象
vardept=document.getElementById("deptno");
//遍历节点
for(vari=0;i //采用DHTML增加option varop=newOption(nodes[i].getAttribute("dname"), nodes[i].getAttribute("deptno")); dept.options[i+1]=op; } } } } window.onload=showDeptno;
示例6:
联动菜单,员工列表随着部门列表变化
deptXmlList.jsp文件:
返回部门xml数据
<%@pagelanguage="java"contentType="text/xml"pageEncoding="UTF-8"%>
<%@pageimport="java.sql.*"%>
<%
Class.forName("oracle.jdbc.driver.OracleDriver");
Stringurl="jdbc:
oracle:
thin:
@localhost:
1521:
orcl";
Stringuser="scott";
Stringpassword="tiger";
Connectionconn=DriverManager.getConnection(url,user,password);
Stringsql="select*fromdepartments";
PreparedStatementpstmt=conn.prepareStatement(sql);
ResultSetrs=pstmt.executeQuery();
%>
xmlversion="1.0"encoding="utf-8"?
>
<%while(rs.next()){%>
<%}%>
<%conn.close();%>
empXmlList.jsp文件:
返回指定部门的员工xml数据
<%@pagelanguage="java"contentType="text/xml"pageEncoding="UTF-8"%>
<%@pageimport="java.sql.*"%>
<%
Class.forName("oracle.jdbc.driver.OracleDriver");
Stringurl="jdbc:
oracle:
thin:
@localhost:
1521:
orcl";
Stringuser="scott";
Stringpassword="tiger";
Connectionconn=DriverManager.getConnection(url,user,password);
Stringsql="select*fromemployeeswheredepartment_id=?
";
PreparedStatementpstmt=conn.prepareStatement(sql);
pstmt.setInt(1,Integer.parseInt(request.getParameter("deptno")));//设置部门条件
ResultSetrs=pstmt.executeQuery();
%>
xmlversion="1.0"encoding="utf-8"?
>
<%while(rs.next()){%>
<%}%>
<%conn.close();%>
menu.jsp文件:
联动菜单
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
--当选择部门时,级联员工菜单-->
//载入部门列表
functionshowDeptno(){
x
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ajax 用法 示例