Ajax

Ajax技术

1. Ajax概念：

   a，无刷新或局部刷新的技术。
   b，Ajax和服务器通信的方式：异步方式
   同步方式：发送请求后，必须等到服务器的响应，才能继续发送请求。
   异步方式：发送请求后，不用等到服务器的响应（回调函数），直接发送下一次请求。
   c，可以让HTML（JavaScript）和服务器之间进行通信
   d，Ajax的核心JS对象：XMLHttpRequest
   e，Ajax的使用场合：Html和服务器交互

2. Ajax实现步骤：

   步骤1：创建对象XMLHttpRequest（xrequest = new ActiveXObject(“Msxml2.XMLHTTP”);），需要判断浏览器。
   步骤2：指定回调函数 xrquest.onreadystatechange=haoLeJiaoWo;
   回调函数中接收参数：var txt=xrequest.responseText;
   步骤3：建立与服务器连接 xrequest.open(“GET/POST”,“URL”,true);只有post方式才能传值
   步骤4：发送请求 xrequest.send(null);

3. 示例：Ajax实现登录界面

/*
	创建对象xrequest = new ActiveXObject("Msxml2.XMLHTTP");
	不同的浏览器创建不一样，使用try-catch兼容所有浏览器
*/
<script type="text/javascript">
    		var xrequest;
      		function createXrequest(){
      			try {
    				//新版本InternetExplorer浏览器
    				xrequest = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    				try {
    				//旧版本InternetExplorer浏览器（IE5和IE6）
    				xrequest = new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) {
    					try {
    						//非IE浏览器： IE7+、Mozillar Firefox、Chrome、Safari 以及 Opera等
    						xrequest = new XMLHttpRequest();
    			       		//针对某些特定版本的火狐浏览器的bug进行修正
    						if (xrequest.overrideMimeType) {
    							xrequest.overrideMimeType("text/xml");
    						}
    					} catch (e) {
    						alert("对象创建失败！");
    					}
    				}
      			}	
      		}
      		 /*
      		 	指定回调函数并与数据库连接
      		 */
	
      		function login(){
      			createXrequest();
      			xrequest.onreadystatechange=callback;//指定回调函数名
      			xrequest.open("POST", "LoginServlet", true);//与数据库连接
      			user=frm.user.value;
      			var pwd=frm.pwd.value;
      			xrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//传参前必须设置
      			xrequest.send("user="+user+"&pwd="+pwd);//向服务器传参
      		}
      		
      		//回调函数
      		function callback(){
      			if(xrequest.readyState==4&&xrequest.status==200){
      				var txt=xrequest.responseText;//接收参数，只能接收Servlet中out.print();中输出的字符串
      				if(txt=="true"){
      					document.getElementById("login").innerText="欢迎"+user+"登录";
      				}else{
      					document.getElementById("error").innerText="用户名或密码错误！！！";
      				}
      			}
      		}
    	</script>