关于Ajax的技术组成与核心原理
1、Ajax
特点：
局部刷新、提高用户的体验度，数据从服务器商加载
2、AJax的技术组成
不是新技术，而是之前技术的整合
Ajax: Asynchronous Javascript And Xml;
（异步的JavaScript和XML）
包括的技术：JavaScript、XML、CSS、XMLHttpRequest
异步：发送请求以后，不等结果，由回调函数处理。
JavaScript:向服务器发送请求，获得返回结果，更新页面
XML： 用来封装数据
3、Ajax核心原理
XMLHttpRequst对象：通过该对象向服务器发送请求。
它是异步请求的技术，所有现代浏览器都支持（Chrome、IE5+）
1)创建XMLHttpReuest对象
非IE浏览器（Mozilla/Safari）：
var xhr=new XMLHttpRequest();
IE:
xhr=new ActiveXObject("Msxml2.XMLHTTP");
低版本IE:
xhr=new ActiveXObject("Microsfot.XMLHTTP");
2)XMLHttpRequest对象的属性与方法
a)方法：
open("GET/POST",URL,true/false):用来向服务器建立连接
有三个参数:
参数1：提交方式，post或get
参数2：请求的URL
参数3：表示同步或异步请求，true:表示异步请求
false: 表示同步请求
send(data):发送请求
参数：提交的内容。
POST方式:data就是提交的参数，send(username=root&password=abc123);
GET方式:send(null)
b)属性：
onreadystatechange:设置状态改变时的回调函数，回调函数用来获取服务器数据。
onreadystatechange=function(){
｝
readyState:服务器状态响应
状态码：
0：未初始化
1：正在加载
2：加载完成
3：请求进行中
4：请求完成
responseText:服务器返回的数据(文本格式)
responseXML:服务器返回的数据（XML格式）
总结：
使用XMLHttpRequest的步骤：
1)创建XMLHttpRequest对象
2）设置请求的方法及URL
xhr.open("GET/POST","url",true/false),true表示异步请求，false表示同步请求
3)设置状态改变时的回调函数
xhr.onreadystatechange=function(){}
0:未初始化
1:正在加载
2:加载完成
3：请求进行中
4：请求完成
4）发送请求
xhr.send(data),
如果为post提交，则data为提交的数据，如果为get提交，则参数为null即可。
判断用户登录的HTML页面：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>登录</title> 8 </head> 9 <body> 10 用户名：<input type="text" name="username" id="username"><br> 11 密码:<input type="password" name="password" id="password"> 12 <a href="javascript:chkUser();">登录</a> 13 <div id="res"></div> 14 </body> 15 16 <script type="text/javascript"> 17 var xhr; 18 /** 19 * 创建XMLHttpRequest对象 20 */ 21 function createXMLHttpRequest(){ 22 //1、创建XMLHttpRequest对象 23 if(window.XMLHttpRequest){ 24 //非IE内核浏览器 25 xhr=new XMLHttpRequest(); 26 }else{ 27 //IE浏览器 28 try{ 29 xhr=new ActiveXObject("Msxml2.XMLHTTP"); 30 }catch(e){ 31 //IE低版本 32 xhr=new ActiveXObject("Microsoft.XMLHTTP"); 33 } 34 } 35 } 36 37 /** 38 * 发送请求，用来检查用户名、密码是否正确 39 */ 40 function chkUser(){ 41 42 //1、创建XMLHttpRequest 43 createXMLHttpRequest(); 44 45 //2、获得用户名、密码 46 var username=document.getElementById("username").value; 47 var password=document.getElementById("password").value; 48 49 //3、与服务器建立连接：open 50 var url="login?username="+username+"&password="+password; 51 //方式1：get提交 52 //xhr.open("GET",url,true); 53 54 //方式2：post提交 55 var url2="login"; 56 xhr.open("POST",url2,true); 57 58 59 //4、设置回调函数，获得服务器响应的数据 60 xhr.onreadystatechange=function(){ 61 /* 62 readyState状态码： 63 0：未初始化 64 1：正在加载 65 2：加载完成 66 3：请求进行中 67 4：请求完成 68 */ 69 if(xhr.readyState==4){ 70 //status,200表示响应正常 71 if(xhr.status==200){ 72 //alert("从服务器返回的值为："+xhr.responseText); 73 var res=xhr.responseText; 74 if(res=='0'){ 75 document.getElementById("res").innerHTML="登录成功"; 76 }else{ 77 document.getElementById("res").innerHTML="<font color='red'>登录失败</font>"; 78 } 79 80 }else{ 81 alert("出现在了异常:"+xhr.response.Text); 82 } 83 84 } 85 } 86 //5、发送请求 87 //方式1：get方式 88 //xhr.send(null); 89 90 //方式2:post方式： 91 //Post提交需要设置http请求头 92 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 93 xhr.send("username="+username+"&password="+password); 94 95 96 } 97 98 </script> 99 100 </html>
服务端代码：
1 package com.newer.login.web; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 11 import com.newer.login.bean.User; 12 import com.newer.login.service.UserService; 13 14 /** 15 * Servlet implementation class LoginServlet 16 */ 17 public class LoginServlet extends HttpServlet { 18 private static final long serialVersionUID = 1L; 19 20 UserService userService = new UserService(); 21 22 /** 23 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse 24 * response) 25 */ 26 protected void doGet(HttpServletRequest request, 27 HttpServletResponse response) throws ServletException, IOException { 28 doPost(request,response); 29 30 } 31 32 /** 33 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse 34 * response) 35 */ 36 protected void doPost(HttpServletRequest request, 37 HttpServletResponse response) throws ServletException, IOException { 38 // 1、获得页面参数 39 String username = request.getParameter("username"); 40 String password = request.getParameter("password"); 41 42 System.out.println("获得请求的参数username:"+username); 43 System.out.println("获得请求的参数password:"+password); 44 // 2、封装User对象 45 User user = new User(); 46 user.setUsername(username); 47 user.setPassword(password); 48 49 // 3、调用服务类，完成用户名、密码的校验 50 User u = userService.login(user); 51 52 /* 53 * 传统方式 if(u!=null){ //表示登录成功 request.setAttribute("user", user); 54 * //跳转至首页... }else{ //登录失败，跳转登录页面 55 * 56 * } 57 */
58 // ajax响应 59 60 PrintWriter out = response.getWriter(); 61 62 if (u != null) { 63 //0成功，1失败 64 out.print(0); 65 }else{ 66 out.print(1); 67 } 68 out.close(); 69 70 } 71 72 }
