建立XMLHttpRequest对象html
1、先来建立XMLHttpRequest对象
在IE、Firefox、safari和Opera中建立该对象的JavaScript代码为：
var xhr = new XMLHttpRequest();
在IE5/6中代码为：
var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
注意，JavaScript区分大小写。node
设置异步对象参数并发送请求ajax
2、为XMLHttpRequest对象设置请求参数
1.GET方式
1.1设置参数
xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
1.2GET方式请求能够设置浏览器不使用缓存 xhr.setRequestHeader("If-Modified-Since", "0");
1.3发送: xhr.send(null);//GET方式
2.POST方式： 1.1设置参数：xhr.open("POST", "GetAreasByAjax.aspx", true); 1.2添加请求头：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
1.3发送：xhr.send("isAjax=1&na=123");//POST方式json
设置回调函数跨域
异步使用XMLHttpRequest对象
异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。
使用模式应该是：
建立该对象；-new
设置onreadystatechange事件触发一个回调函数; -onreadystatechagne
打开请求；-open
发送请求；-send
注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。
若是没有准备好，隔一段时间再次检查。由于数据没有下载完时，咱们没法使用它的属性和方法。
若是已经准备好，就继续往下执行；浏览器
编写回调函数缓存
1.在xhr.send以前添加设置回调函数代码：
xhr.onreadystatechange = watching;
2.回调函数安全
1 function watching() { 2 if (xhr.readyState == 4) {//请求状态 3 if (xhr.status == 200) {//服务器返回的状态码 4 var msg = xhr.responseText; //服务器返回的字符串 5 } else alert("服务器错误!" + ajaxH.status); 6 } 7 }
判断时注意，要：xhr.readyState == 4&&xhr.status == 200，不要xhr.status == 200&&xhr.readyState == 4服务器
异步对象readyState属性并发
readyState属性指出了XMLHttpRequest对象在发送/接收数据过程当中所处的几个状态。XMLHttpRequest对象会经历5种不一样的状态。
0：未初始化。new完后;
1：已打开。对象已经建立并初始化，但还未调用send方法
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，由于状态和响应头不完整；
4：已加载。全部数据接收完毕
XMLHttpRequest对象属性
1、onreadystatechange属性，设置回调函数。
2、readyState属性，获取当前XMLHttpRequest对象执行的状态：
1> 0表示以建立XMLHttpRequest对象，可是尚未初始化，即没有调用open()方法设置XMLHttpRequest对象。
2>1表示建立了XMLHttpRequest对象，而且调用了open()方法进行初始化，可是尚未调用send()方法。
3>3表示浏览器正在接受服务器的响应数据。
4>全部数据已经被接受完毕。
3、status属性，服务器返回的http状态码。（>=200 and <300、304未修改，读取缓存。都表示成功）
4、statusText属性，服务器返回的状态码对应的友好的文字说明，好比200对应的OK.
5、responseText属性，以字符串方式获取服务器对客户端的响应。
6、responseXml属性，当请求的是一个xml文件时，或者响应头中Content-Type为：text/xml或application/xml时，返回一个XmlDocument对象（Dom节点对象），支持标准的dom的成员，好比：childNodes、documentElement、firstChild、lastChild、nextSibling、nodeName、nodeType、nodeValue、parentNode、doctype等。
XMLHttpRequest对象经常使用方法
1、open("get","url",true)初始化，若是第三个参数为false,则js等待请求完毕后才会继续执行。
2、setRequestHeader("","")增长http请求头信息。在open()以后，send()以前调用。
3、send(null);发送请求。send()方法的参数表示为在请求报文体中发送的数据内容。为了最大化的浏览器兼容问题，若是没有请求报文体就传递null。get请求没有请求报文体，因此通常为null。使用post请求时才须要设置报文体。
4、getResponseHeader("Content-Type"),根据响应的报文头得到报文内容。
5、getAllResponseHeaders();获取全部的响应报文头内容。
6、abort();取消当前的http请求，取消以后若是要从新发起请求，建议从新建立一个XMLHttpRequest对象。
Ajax使用注意
xhr只能向同一个域中的相同端口号、相同协议的url发起请求，不能跨域,不然会引发错误。
为了浏览器兼容,get请求时最好为send()传递null参数。
在建立了xhr对象后马上设置onreadystatechange事件，这样就能监视到全部的状态。若是不须要监视其余状态只监视readyState==4的状态则能够在send()以后设置。
get请求时，请求中的QueryString的参数名称与参数值最好使用encodeURIComponent()进行编码。不然在某些浏览器下没法获取该值，好比IE.
post请求时，为了像表单那样提交数据须要设置请求的Content-Type为：application/x-www-form-urlencoded。send("键=值&键=值")
解析json格式时eval("("+json+")")。但有安全性问题。
-》使用post方式提交
须要设置头信息：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-》若是中文乱码的解决：
在客户端使用window.encodeURIComponent()进行编码
在服务器端使用Server.UrlDecode()进行解码
GetTime.html
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script> 7 window.onload = function () { 8 var btnGetTime = document.getElementById('btnGetTime'); 9 btnGetTime.onclick = function () { 10 var showTime = document.getElementById('showTime'); 11 showTime.innerHTML = '<img src="images/loading.gif"/>'; 12 //一、建立对象 13 var xhr = new XMLHttpRequest(); 14 //二、打开链接 15 //xhr.open('get', 'GetTime.ashx?title=xlb', true); 16 xhr.open('post', 'GetTime.ashx'); 17 //三、配置 18 xhr.onreadystatechange = function () { 19 //若是成功返回则展现 20 if (xhr.readyState == 4) {//通讯成功 21 if (xhr.status == 200) {//服务器成功返回信息 22 showTime.innerHTML = xhr.responseText; 23 } 24 } 25 }; 26 //四、发送 27 //xhr.send(null);//当使用get请求时，最好设置为null 28 29 //以post方式发送请求 30 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 31 xhr.send('title=yg'); 32 }; 33 }; 34 </script> 35 </head> 36 <body> 37 <input type="button" id="btnGetTime" value="获取当前时间" /> 38 <div id="showTime"></div> 39 </body> 40 </html>
GetTime.ashx
1 public class GetTime : IHttpHandler 2 { 3 4 public void ProcessRequest(HttpContext context) 5 { 6 //Thread.Sleep(5000); 7 string title = context.Request["title"]; 8 9 context.Response.ContentType = "text/plain"; 10 context.Response.Write(DateTime.Now.ToString() + "_" + title); 11 } 12 13 public bool IsReusable 14 { 15 get 16 { 17 return false; 18 } 19 } 20 }