ajax用法示例.docx

1、ajax用法示例ajax用法示例示例1：异步发送GET请求数据，以文本形式接收响应数据ajax1.jsp文件 var xhr;/核心对象 function check() var username = document.getElementById(username).value; /用encodeURIComponent函数进行编码，可传递中文 var url = CheckUsernameServlet?username= + encodeURIComponent(username); /根据浏览器创建对象 if(window.ActiveXObject) xhr = new Active

2、XObject(Microsoft.XMLHttp); else if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); xhr.onreadystatechange = process;/注册监听 xhr.open(GET,url,true);/设置请求方式和请求地址 xhr.setRequestHeader(If-Modified-Since,0);/禁止缓存 xhr.setRequestHeader(Cache-Control,no-cache);/禁止缓存 xhr.send(null);/发送请求 /处理请求 function pro

3、cess() if (xhr.readyState = 4) if (xhr.status = 200) alert(请求成功，数据= + xhr.responseText); else alert(请求失败，状态码= + xhr.status); CheckUsernameServlet.javaimport java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class CheckUsernameServlet extends HttpServlet public void doGet(HttpServle

4、tRequest request, HttpServletResponse response) throws ServletException, IOException request.setCharacterEncoding(utf-8); response.setContentType(text/xml;charset=utf-8);/是text/xml! response.setHeader(Cache-Control, no-cache,must-revalidate);/禁止缓存 PrintWriter out = response.getWriter(); String usern

5、ame = request.getParameter(username); username = new String(username.getBytes(iso-8859-1),utf-8); System.out.println(username); if (username.equals(admin) out.print(true); else out.print(false); out.close(); public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletE

6、xception, IOException this.doGet(request, response); 截屏：示例2：异步发送请求，以xml形式接收数据 var xhr;/核心对象 /发送请求 function check() var username = document.getElementById(username).value; var url = CheckUsernameServlet?username= + encodeURIComponent(username); /根据浏览器创建对象 if(window.ActiveXObject) xhr = new ActiveXObj

7、ect(Microsoft.XMLHttp); else if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); xhr.onreadystatechange = process;/注册监听 xhr.open(GET,url,true);/设置请求方式和请求地址 xhr.setRequestHeader(cache-control,no-cache); xhr.send(null);/发送请求 /事件处理 function process() if (xhr.readyState = 4) if (xhr.status = 200) /返回x

8、ml对象 var xml = xhr.responseXML; /childNodes0表示元素节点中的文本节点 alert(请求成功，数据= + xml.getElementsByTagName(msg)0.childNodes0.nodeValue); else alert(请求失败，状态码= + xhr.status); 截屏：示例3：异步发送POST请求数据 var xhr;/核心对象 function check() var username = document.getElementById(username).value; var url = CheckUsernameServl

9、et; /根据浏览器创建对象 if(window.ActiveXObject) xhr = new ActiveXObject(Microsoft.XMLHttp); else if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); xhr.onreadystatechange = process;/注册监听 xhr.open(POST,url,true);/设置请求方式和请求地址 xhr.setRequestHeader(If-Modified-Since,0);/禁止缓存 xhr.setRequestHeader(Cache-Contro

10、l,no-cache);/禁止缓存 xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded); xhr.send(username= + username);/发送请求 /处理请求 function process() if (xhr.readyState = 4) if (xhr.status = 200) alert(请求成功，数据= + xhr.responseText); else alert(请求失败，状态码= + xhr.status); 示例4：解析XML数据ajax6.xml文件 10 保安部 20

11、 康乐部 30 办公室 !- 窗口打开时，自动读取解析部门数据xml文件，并放到中 - 自动载入列表数据 /创建XHR对象 var xhr = null; /载入列表 function showDeptno() /根据浏览器情况创建xhr对象 if (window.ActiveXObject) xhr = new ActiveXObject(Microsoft.XMLHttp); else if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); xhr.onreadystatechange = showDeptnoProcess;/注册监听

12、var url = ajax6.xml;/URL xhr.open(GET,url,true);/设置URL xhr.send(null); /处理异步请求 function showDeptnoProcess() if (xhr.readyState = 4) if (xhr.status = 200) /获得xml数据 var xml = xhr.responseXML; /获得节点集合 var nodes = xml.getElementsByTagName(dept); /获得列表框对象 var dept = document.getElementById(deptno); /遍历节点

13、 for (var i = 0;i nodes.length;i +) /创建一个option的DOM对象 var op = document.createElement(option); op.setAttribute(value,nodesi.childNodes0.childNodes0.nodeValue); op.innerHTML = nodesi.childNodes1.childNodes0.nodeValue; /加入到列表框中 dept.appendChild(op); window.onload = showDeptno;/当窗口打开时执行 请选择部门 截屏：示例5：解析

14、xml，读取xml文件中节点的属性值ajax7.xml文件 !- 当选择部门时，自动读取xml文件中每个节点的属性值，并放到中 - 自动载入列表数据 /创建XHR对象 var xhr = null; function showDeptno() /根据浏览器情况创建xhr对象 if (window.ActiveXObject) xhr = new ActiveXObject(Microsoft.XMLHttp); else if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); xhr.onreadystatechange = showDept

15、noProcess;/注册监听 var url = ajax7.xml;/URL xhr.open(GET,url,true);/设置URL xhr.send(null); /处理异步请求 function showDeptnoProcess() if (xhr.readyState = 4) if (xhr.status = 200) /获得xml数据 var xml = xhr.responseXML; /获得节点集合 var nodes = xml.getElementsByTagName(dept); /获得列表框对象 var dept = document.getElementByI

16、d(deptno); /遍历节点 for (var i = 0;i nodes.length;i +) /采用DHTML增加option var op = new Option(nodesi.getAttribute(dname),nodesi.getAttribute(deptno); dept.optionsi + 1 = op; window.onload = showDeptno; 请选择部门 示例6：联动菜单，员工列表随着部门列表变化deptXmlList.jsp文件：返回部门xml数据 empXmlList.jsp文件：返回指定部门的员工xml数据 menu.jsp文件：联动菜单 自动载入列表数据 /载入部门列表 function showDeptno() x