step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象；
step2. 创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息；
step3. 设置响应HTTP状态变化的函数；
step4. 发送HTTP请求；
step5. 获取异步调用返回的数据；
step6. 使用javascript和DOM实现局部刷新；

重要代码实现：

  1. <script>
  2.   var xmlhttp;
  3.   function createXMLHttpRequest(){
  4.     xmlhttp=null;
  5.     if (window.XMLHttpRequest){
  6.       xmlhttp=new xmlHttpRequest(); //Netscape浏览器中的创建方式
  7.     }else if(window.ActiveXObject){
  8.       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器的创建方式
  9.     }
  10.     //异步调用服务器段数据
  11.     if(xmlhttp!=null){
  12.       xmlhttp.open("GET/POST",url,true);  //创建HTTP请求
  13.       xmlhttp.onreadystatechange=httpStateChange;//设置HTTP请求状态变化的函数
  14.       xmlhttp.send(null);  //发送请求
  15.     }else{
  16.       alert("不支持XHR")
  17.     }
  18.   }
  19.    //响应HTTP请求状态变化的函数
  20.   function httpStateChange(){//判断异步调用是否完成
  21.     if(xmlhttp.readyState==4){//readyState==4表示后台处理完成了
  22.       if(xmlhttp.status==200||(xmlhttp.status==0){//状态码为0是本地响应成果，200表示处理的结果是ok的
  23.       //判断异步调用是否成功,如果成功开始局部更新数据
  24.         //code...
  25.       }else{
  26.         alert("出错状态码："+xmlhttp.status+"出错信息："+xmlhttp.statusText);
  27.       }
  28.     }
  29.   }
  30. </script>• 1
  31. • 2
  32. • 3
  33. • 4
  34. • 5
  35. • 6
  36. • 7
  37. • 8
  38. • 9
  39. • 10
  40. • 11
  41. • 12
  42. • 13
  43. • 14
  44. • 15
  45. • 16
  46. • 17
  47. • 18
  48. • 19
  49. • 20
  50. • 21
  51. • 22
  52. • 23
  53. • 24
  54. • 25
  55. • 26
  56. • 27
  57. • 28
  58. • 29
  59. • 30
  60. • 31
  61. • 32
  62. • 33
  63. • 34

ajax例子：

  1. <html>
  2.   <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4.     <title>AJAX实例</title>
  5.     <script language="javascript" type="text/javascript">    
  6.      var xmlHttpRequest;  //定义一个变量用于存放XMLHttpRequest对象
  7.       //定义一个用于创建XMLHttpRequest对象的函数
  8.       function createXMLHttpRequest(){
  9.         if(window.ActiveXObject){//IE浏览器的创建方式
  10.           xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  11.         }else if(window.XMLHttpRequest){ //Netscape浏览器中的创建方式
  12.           xmlHttpRequest = new XMLHttpRequest();
  13.         }
  14.       }
  15.       //响应HTTP请求状态变化的函数
  16.       function httpStateChange(){//判断异步调用是否完成
  17.         if(xmlHttpRequest.readyState == 4){
  18.           //判断异步调用是否成功,如果成功开始局部更新数据
  19.           if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0){//查找节点
  20.             var node = document.getElementById("myDIv");//更新数据
  21.             node.firstChild.nodeValue = xmlHttpRequest .responseText;
  22.           } else{
  23.           //如果异步调用未成功,弹出警告框,并显示出错信息
  24.             alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的HTTP状态信息为:" + xmlHttpRequest.statusText);
  25.           }
  26.         }
  27.       }
  28.       //异步调用服务器段数据
  29.       function getData(name,value){//创建XMLHttpRequest对象
  30.         createXMLHttpRequest();
  31.         if(xmlHttpRequest!=null){
  32.           //创建HTTP请求
  33.           xmlHttpRequest.open("get","ajax.text",true)
  34.           //设置HTTP请求状态变化的函数
  35.           xmlHttpRequest.onreadystatechange = httpStateChange;
  36.           //发送请求
  37.           xmlHttpRequest.send(null);
  38.         }
  39.       }
  40.     </script>
  41.   </head>
  42.   <body>
  43.   <div id="myDiv">原数据</div>
  44.   <input type = "button" value = "更新数据" onclick = "getData()">
  45.   </body>
  46. </html>