AJAX简单请求流程

AJAX页面无刷新。传输数据与接收数据都是通过JS代码来完成的。

要使用AJAX进行数据的传输，需要以下几个步骤：

第一步：获取数据传输的对象XMLHttpRequest，在获取的时候注意判断浏览器的类型

js 代码

1. /*  
2.     *最终目的只有一个,就是获得XMLHttpRequest对象(只有有了它以后,  
3.     *才能以ajax方式发送请求数据)  
4.     *函数内部的实现代码是为了兼容不同浏览器类型  
5.     */  
6.     function getAjaxObject(){   
7.       var xmlHttpRequest;   
8.       if(window.XMLHttpRequest){//Mozilla,IE7.0   
9.         xmlHttpRequest = new XMLHttpRequest();   
10.         if(xmlHttpRequest.overrideMimeType){   
11.             xmlHttpRequest.overrideMimeType("text/xml");   
12.         }   
13.       }else if(window.ActiveXObject){//IE   
14.         try{   
15.           xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");   
16.         }catch(e){   
17.           try{   
18.             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");   
19.             }catch(e){}   
20.         }   
21.       }   
22.       return xmlHttpRequest;   
23.     }  

第二步：调用XMLHttpRequest对象的open方法，open方法里面传递的参数分别为发送信息的方式、发送的目标、发送的布尔变量（我们打算提交的是一个异步的XMLHTTP请求，必须为 true）。

js 代码

1. xmlHttpRequest.open(method,url,true);  

注意：如果是用的 post 方法传输数据，那么还需要添上一句

java 代码

1. if("post"==method.toLowerCase()){   
2.             xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   
3.         }  

第三步：设置响应的处理方法，即为响应数据的处理方法

js 代码

1. /*具体负责处理服务器返回数据的函数*/  
2. xmlHttpRequest.onreadystatechange = function (){   
3.         //当服务器将数据返回给客户端时,readyState状态值为4     
4.         if(xmlHttpRequest.readyState==4){     
5.             //当服务器返回的数据是正常的数据时,status状态值为200   
6.             if(xmlHttpRequest.status==200){   
7.                 //通过XMLHttpRequest对象的responseText属性获取   
8.                 //服务器返回的文本信息   
9.                 var returnMsg = xmlHttpRequest.responseText;   
10.                 //这里为具体的处理方式代码
11.             }      
12.         }   
13.     }  

 上面3步完成以后，调用xmlHttpRequest对象的send () 方法就可以了。这里可以看出前面3个步骤是准备工作，把准备工作做好以后，xmlHttpRequest对象才发送请求。