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对象才发送请求。