var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+,Firefox,Chrome,Opera,Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6,IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ // to do... } } xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
步骤:
1、创建。
创建 XMLHttpRequest
对象的语法:
var = new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
var = new ActiveXObject("Microsoft.XMLHTTP");
2、连接和发送。
- 2.1、
open()
函数的三个参数:请求方式、请求地址、是否异步请求 - 2.2、
GET
请求方式是通过URL参数将数据提交到服务器的,POST
则是通过将数据作为 send 的参数提交到服务器 - 2.3、
POST
请求中,在发送数据之前,要设置表单提交的内容类型 - 2.3、提交到服务器的参数必须经过
encodeURIComponent()
方法进行编码,实际上在参数列表key=value
的形式中,key
和value
都需要进行编码,因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个v=xx
的字符串,这样是为了拒绝缓存,每次都直接请求到服务器上。
3、接收。
responseText
:响应返回的主体内容,为字符串类型;responseXML
:如果响应的内容类型是 "text/xml"
或 "application/xml"
,这个属性中将保存着相应的xml
数据,是 XML
对应的 document
类型;status
:响应的HTTP状态码;statusText
:HTTP
状态的说明
只要 readyState
的值变化,就会调用 readystatechange
事件,(其实为了逻辑上通顺,可以把readystatechange
放到send
之后,因为send
时请求服务器,会进行网络通信,需要时间,在send
之后指定readystatechange
事件处理程序也是可以的,我一般都是这样用,但为了规范和跨浏览器兼容性,还是在open
之前进行指定吧)。
- 3.3、在
readystatechange
事件中,先判断响应是否接收完成,然后判断服务器是否成功处理请求,xhr.status
是状态码,状态码以2
开头的都是成功,304
表示从缓存中获取,上面的代码在每次请求的时候都加入了随机数,所以不会从缓存中取值,故该状态不需判断。
封装ajax方法:
ajax({ url: "./test.PHP",type: "POST",data: { name: "abc",age: 18 },dataType: "json",success: function (response,xml) { // 执行成功回调 },fail: function (status) { // 执行失败回调 } }); function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); // 创建对象 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //接收 - 第三步 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(xhr.responseText,xhr.responseXML); } else { options.fail && options.fail(status); } } } //连接 和 发送 - 第二步 if (options.type == "GET") { xhr.open("GET",options.url + "?" + params,true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST",options.url,true); //设置表单提交时的内容类型 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(params); } //格式化参数 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.random()).replace(".","")); return arr.join("&"); }