/**Ajax 编写流程
* 1、创建 XHR (XMLHttpRequest)对象
1 var xmlHttpReq = false; // var xmlHttpReq = ""; 数据类型改变--弱类型
2 //Part1:创建 [一个函数，初始化] XHR 对象--->是 Ajax的基础
3 function createXmlHttpRequest() {
4 /**这里要完成两个步骤：
5 * 1.IE7+、FireFox、Chrome、Safari、Opera浏览器下的 XHR 是如何初始化的
6 * 2.IE5、IE6 浏览器下的 XHR 有是如何初始化的
7 **/
8 if(window.XMLHttpRequest){ //IE7+、FireFox、Chrome、Safari、Opera下创建的 XHR
9 xmlHttpReq = new XMLHttpRequest();
10 }else if(window.ActiveXObject){ //IE5、IE6下创建的 XMLHttpRequest
11 try{ // 所有现代浏览器均支持 XHR 对象（IE5 和 IE6 使用 ActiveXObject）。
12 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
13 }catch(e){
14 console.log("=====Fail======");
15 }
16 }
17 }
* 2、利用XHR发送Ajax请求
* 3、写一个回调函数来解析服务器端返回的数据
* 4、把数据渲染到HTML页面上
1 //Part2:利用XMLHttpRequest发送Ajax请求---->将请求发送到服务器 用 XHR 对象的 open() 和 send() 方法
2 function sendRequest(url, params){
3 // 1创建 XMLHttpReq对象（先调用，使xmlHttpReq初始化）
4 createXmlHttpRequest();
5 // 2向服务器发送请求---->设置发送请求相关属性
6 xmlHttpReq.open("POST",url,true);// 2.1 规定请求的类型、URL 以及是否异步处理请求。
7 xmlHttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 2.2 设置Http请求头
8 xmlHttpReq.send(params); // 2.3 将请求发送到服务器 发送数据
9 // Part3 回调函数 处理服务器返回的数据
10 xmlHttpReq.onreadystatechange = function() {
11 if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){
12 //Part4 数据解析---> 把数据渲染到HTML页面上
13 // nodeValue 返回元素值
14 var res = xmlHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue;
15 window.alert(res);
16 }
17 }
18 }
完整代码如下：
1.html文件
1 <!-- 01_ajax.html --> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Ajax案例</title> 7 <script src="js/01_ajax.js"></script> 8 9 </head> 10 <body> 11 <form action="" method="post"> 12 <p><label>账号:</label><input type="text" name="uname" id="uname"></p> 13 <p><label>密码:</label><input type="password" name="upass" id="upass"></p> 14 <p><input type="button" value="登录" onclick="login()"></p> 15 </form> 16 </body> 17 </html>
2.js文件
1 /**Ajax编写流程 2 * 1、创建 XHR (XMLHttpRequest)对象 3 * 2、利用XHR发送Ajax请求 4 * 3、学会写一个回调函数来解析服务器端返回的数据 5 * 4、把数据渲染到HTML页面上 6 */ 7 8 $ = function(obj){ 9 return document.getElementById(obj); 10 } 11 12 var xmlHttpReq = false; // var xmlHttpReq = ""; 数据类型改变--弱类型 13 //Part1:创建 [一个函数，初始化] XHR 对象--->是 Ajax的基础 14 function createXmlHttpRequest() { 15 /**这里要完成两个步骤： 16 * 1.IE7+、FireFox、Chrome、Safari、Opera浏览器下的 XHR 是如何初始化的 17 * 2.IE5、IE6 浏览器下的 XHR 有是如何初始化的 18 **/ 19 if(window.XMLHttpRequest){ //IE7+、FireFox、Chrome、Safari、Opera下创建的 XHR 20 xmlHttpReq = new XMLHttpRequest(); 21 }else if(window.ActiveXObject){ //IE5、IE6下创建的 XMLHttpRequest 22 try{ // 所有现代浏览器均支持 XHR 对象（IE5 和 IE6 使用 ActiveXObject）。 23 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 24 }catch(e){ 25 console.log("=====Fail======"); 26 } 27 } 28 } 29 30 31 //Part2:利用XMLHttpRequest发送Ajax请求---->将请求发送到服务器 用 XHR 对象的 open() 和 send() 方法 32 function sendRequest(url, params){ 33 // 1创建 XMLHttpReq对象（先调用，使xmlHttpReq初始化） 34 createXmlHttpRequest(); 35 // 2向服务器发送请求---->设置发送请求相关属性 36 xmlHttpReq.open("POST",url,true);// 2.1 规定请求的类型、URL 以及是否异步处理请求。 37 xmlHttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 2.2设置Http请求头 38 xmlHttpReq.send(params); // 2.3 将请求发送到服务器 发送数据 39 // Part3 使用回调函数 处理服务器返回的数据 40 xmlHttpReq.onreadystatechange = function() { 41 if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){ 42 // Part4 数据解析 ---> 把数据渲染到HTML页面上 43 var res = xmlHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue; // nodeValue 返回元素值 44 window.alert(res); 45 } 46 } 47 } 48 49 // 登录点击事件方法 50 function login(){ 51 var uname = $("uname").value; 52 var upass = $("upass").value; 53 var params = "uname=" + uname + "&upass=" + upass; 54 sendRequest("01_ajax.do",params); 55 }
3.java文件
1 package com.lsy.ajaxtest1; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.annotation.WebServlet; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 12 // 服务器端 ---> ervlet 13 14 @WebServlet("/01_ajax.do") 15 /*只要在Servlet上设置@WebServlet标注，容器就会自动读取当中的信息。上面的@WebServlet告诉容器， 16 如果请求的URL是“/01_ajax.do”，则由HelloServlet的实例提供服务。可以使用@WebServlet提供更多信息*/ 17 public class AjaxServelet_01 extends HttpServlet { 18 19 private static final long serialVersionUID = 4776153483702612333L; 20 21 /**服务器端要做怎样的操作 22 * 1、获得数据（请求） 23 * 2、返回数据（响应） 24 **/ 25 @Override 26 protected void doPost(HttpServletRequest request,HttpServletResponse response) 27 throws ServletException,IOException { 28 request.setCharacterEncoding("utf-8"); //请求的中文处理 29 response.setCharacterEncoding("utf-8"); //响应的中文处理 30 response.setContentType("text/xml;charset=utf-8"); //响应类型的设置 31 PrintWriter out = response.getWriter(); //输出流（字符流），输出xml格式数据 32 33 String uname = request.getParameter("uname"); 34 String upass = request.getParameter("upass"); 35 36 // System.out.println(uname + "---" + upass); 37 // String xml = "<response><res>欢迎光临...</res></response>"; 38 StringBuffer xml = new StringBuffer(); 39 xml.append("<response>"); 40 if("zs".equals(uname) && "123".equals(upass)) { 41 xml.append("<res>欢迎光临...</res>"); 42 }else { 43 xml.append("<res>输入信息有错！</res>"); 44 } 45 xml.append("</response>"); 46 out.println(xml.toString()); 47 out.flush(); 48 out.close(); //输出流关闭 49 } 50 }