异步对象连接服务器AJAX原生态

在web中异步访问时通过XMLHttpRequest对象来实现的，要使用该对象，首先必须创建该对象吧！代码如下：

  1. var xmlHttp;  
  2. function createXMLHttpRequest() {  
  3.     if (window.ActiveXObject)  
  4.         xmlHttp = new ActiveXObject("Microsoft.XMLHttp");  
  5.     else 
  6.         xmlHttp = new XMLHttpRequest(); 

以上代码首先声明了一个全局变量xmlHttp,这主要考虑到异步对象在整个页面进程中都有可能是用的到，然后创建异步对象的函数createXMLHttpRequest(),为了考虑到浏览器的兼容性，在该函数中主要利用if语句进行浏览器的判断，如果是IE浏览器,则采用ActiveXObject的创建方法，如果不是则直接利用XMLHttpRequest()函数.在创建异步对象之后，自然利用该对象来连接服务器，该对象有一系列有用的属性和方法，如下图：

650) this.width=650;">

创建完XMLHttpRequest对象后首先是利用open()方法创建一个请求，并向服务器发送，该方法的完整表达式如下：

  1. open(method,url,asynchronous,user,passpword) 

其中method表示请求的类型，通常为get，post等，url即请求的地址，可以使绝对地址也可以使相对地址，asynchronous是一个布尔值，表示是否为异步请求，默认为异步请求true。user,passoword分别是可选的用户名，密码。创建了异步对象后，要建立一个到服务器的请求可以使用如下代码：

  1. xmlHttp.open(“get","Handler.ashx",true); 

以上代码是用get方法请求相对地址为Handler.ashx的页面，方式是异步的，在发出请求之后便需要使用请求状态readyState属性来判断目前请求的情况，如果该属性变化了就会触发onreadystatechange事件，因此通常的代码如下：

  1. xmlHttp.onreadystatechange=function(){  
  2.     f(xmlHttp.readyState==4)  
  3.         /do something  

也就是直接编写onreadystatechange的事件函数，如果状态为4（数据接收成功）则继续操作，但是通常情况下，不但需要判断请求的状态，还需要判断服务器返回的响应状态status，代码如下

  1. xmlHttp.onreadystatechange=function(){  
  2.     if(xmlHttp.readyState==4&&xmlHttp.status==200)  
  3.         //do something  
  4. }  

以上两段代码仅仅是建立了请求，并编写了请求状态变化时的处理函数，然而并没有将该请求发送给服务器，还需要用send()方法来发送请求，代码如下：

  1. send(body); 

改方法仅有一个参数body,她表示要向服务器发送的数据，其格式为查询字符串的形式，例如； var body="myName=Isaac&age=25"

如果在open中指定是get方式，则这些参数作为查询字符串提交，如果指定的是post方式，则作为Http的post方法提交。对于send()方法而言body参数是必须的，如果不发送任何数据，则可以使用send(null);
特别地，如果使用post方法进行提交请求，那么在发送之前必须使用如下语句来设置Http的头，语法如下：
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 

服务器在接收到客服端的请求后，根据请求的返回响应的结果，这个结果通常有两种形式，一种是文本形式，存储在responseText中，另一种是XML格式，存储在responseXML中，客服端程序可以对前者进行字符串的处理，对后者进行DOM相关的处理，例如可以对服务器返回的值做如下处理：

      Response.write(getElementById(“target”).innerHTML=xmlHttp

整个代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script type="text/javascript">  
  6.         var xmlHttp;  
  7.         //创建XMLHttpRequest对象函数  
  8.         function createXMLHttpRequest() {  
  9.             if (window.ActiveXobject)//for IE  
  10.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
  11.             else if (window.XMLHttpRequest)  
  12.                 xmlHttp = new XMLHttpRequest();  
  13.         }  
  14.         function startRequest() {  
  15.             createXMLHttpRequest();  
  16.             //利用XMLHttpRequest对象的open方法创建一个请求。第一个参数，表示请求的类型，  
  17.             //一般为get,post,第二个参数为ulr请求地址，可以是绝对地址也可以是相对地址，第三个参数是布尔值，ture表示是异步请求，  
  18.             var Url = "Handler1.ashx?" + new Date().getTime();  
  19.             xmlHttp.open("GET", Url, true);  
  20.             //在发出请求之后便需要使用请求状态readyState属性来判断目前请求的情况，如果该属性变化了，就会触发onreadystatechange事件，  
  21.             xmlHttp.onreadystatechange = function () {  
  22.                 if (xmlHttp.readyState == 4 && xmlHttp.status == 200)//如果readState的状态时4（数据接收成功）则继续操作，status=200请求成功表示  
  23.                  //服务器在接收到客服端请求后，根据请求返回相应的结果，有两种，一种是文本形式，存储在responseText中，另一种是XML格式，存储在responseXML中，客服端可以对前者进行字符串的处理，对后者进行DOM相关的处理，  
  24.                  //document.write("服务器还回：" + xmlHttp.responseText);  
  25.                     document.getElementById("target").innerHTML = xmlHttp.responseText;  
  26.  
  27.             }  
  28.             xmlHttp.send(null);//以上代码都是建立请求，send方法发出请求，对于HTTP的post请求send方法里的参数必须要有如果是post请求发送前，还需要xmlHttp.setRequest("Content-Type","application/x-www-from-urlencoded")来设置HTTP的头  
  29.         }  
  30.     </script>  
  31. </head>  
  32. <body>  
  33. <input type="button" value="测试" onclick="startRequest()" />  
  34. <br /><br />  
  35. <div id="target"></div>  
  36. </body>  
  37. </html>  
还有三句后台代码如下：
 
  1. context.Response.CacheControl = "no-cache";  
  2. context.Response.AddHeader("Pragma", "no-cache");  
  3. context.Response.Write("异步测试成功");  
  4.         } 
原生态的Ajax就是这个样，如果要用jQuery的话来就很容易了，我就不拉出来了，
 
好吧就到这里了
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ypfnet/p/2659361.html