<script type="text/javascript">
         var xmlhttprequest;
         function GetXmlHttpRequest() {
             if (window.ActiveXObject) {
                 try
                 {
                     //适用于IE5 IE6
                     xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 catch(e)
                 {
                     //适用于IE7 以上版本
                     xmlhttprequest=new ActiveXObject("Msxml2.XMLHTTP");
                 }
             }
             if(window.XMLHttpRequest)
             {
                    //适用于所有的浏览器
                    xmlhttprequest=new XMLHttpRequest();
             }
             else
             {
                 alert("对不起，您的浏览器不适用于AJAX");
             }
         }

         //执行操作
         function Operate() {
         {

             //先获取xmlhttprequest
             GetXmlHttpRequest();

             //POST传值

             //open方法（指定数据发送方式，处理页面，是否异步）创建一个新的http请求，并指定此请求的方法、URL以及验证等信息
             xmlhttprequest.open("POST", "DoOperate.ashx",true);

             //setRequestHeader(header, value)方法单独设定某个请求的HTTP头信息
             xmlhttprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

             //状态发生事件（onreadyStateChange事件是在readyState属性发生改变时触发）
             xmlhttprequest.onreadystatechange=WatchChange;

             //发送数据
             xmlhttprequest.send("id=1001&name=holyknihgt");

             //GET传值【如果是POST传值需要设定RequestHeader，而Get传值不需要】
             //xmlhttprequest.open("Get", "DoOperate.ashx",true);

             //xmlhttprequest.send(null);
         }

         //状态监听
         function WatchChange()
         {
             //readyState
             //0:send方法还没有被调用
             //1:已经调用了send方法，请求还在处理
             //2:send方法已完成 整个应答已接收
             //3:正在解析应答
             //4:应答解析完成

             //status
             //200:表示交互成功
             //404：NOT Found
             //500：服务器内部错误
              && xmlhttprequest.status==)
             {
                 //或许响应值
                 var result = xmlhttprequest.responseText;
                 //将响应值以‘，’分割
                 result = result.split(',');
                 //给id为resultMsg的控件赋值
                 document.getElementById(]+];
             }
         }
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <div id="resultMsg"></div>
         <input type="button" value="调用AJAX" onclick="Operate();" />
     </div>
     </form>
 </body>
 </html>

二：解析

步骤：

1：首先判断浏览器支不支持ajax

2，post 或者get传值，

假如是post的话则需要设置http头信息

//open方法（指定数据发送方式，处理页面，是否异步）创建一个新的http请求，并指定此请求的方法、URL以及验证等信息
xmlhttprequest.open("POST", "DoOperate.ashx",true);

//setRequestHeader(header, value)方法单独设定某个请求的HTTP头信息
xmlhttprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

假如是get请求的话不需要设置头信息

//GET传值【如果是POST传值需要设定RequestHeader，而Get传值不需要】
//xmlhttprequest.open("Get", "DoOperate.ashx",true);

3，监听器并发送数据

xmlhttprequest.onreadystatechange=WatchChange;

//发送数据
xmlhttprequest.send("id=1001&name=holyknihgt")

在这可以更好的理解回调函数，就是在这最开始的时候只是放了一个函数在这，其实只是一种形式在这，函数会接着往下走，甚至还会把下面的代码的参数回填到上面的WatchChange方法中来。

假如是get请求的话

发送的数据是null

//xmlhttprequest.send(null);

4，监听器的内容

function WatchChange()
{
//readyState
//0:send方法还没有被调用
//1:已经调用了send方法，请求还在处理
//2:send方法已完成整个应答已接收
//3:正在解析应答
//4:应答解析完成

//status
//200:表示交互成功
//404：NOT Found
//500：服务器内部错误
if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200)
{
//或许响应值
var result = xmlhttprequest.responseText;
//将响应值以‘，’分割
result = result.split(',');
//给id为resultMsg的控件赋值
document.getElementById("resultMsg").innerHTML = "ID:"+result[0]+" Name:"+result[1];
}
}

秒客网

原生态的ajax代码

二：解析

相关文章