标签：style blog http io color ar os 使用 sp
异步对象五部曲
这是post请求的、
//1.00创建异步对象 var xhr = new XMLHttpRequest(); //2.0 xhr.open("post", url,params, true); //3.0将参数使用Formdata属性传递 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //4.0设置回调函数 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } } //5.0传递参数 xhr.send(params);
结合get请求做一个异步对象的封装
get 请求中的
xhr.setRequestHeader("If-Modified-Since", "0"); 是为了清除缓存
而post请求的
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
是为了传输方式
在<from method=‘post‘ type="">
<from>中的type可以得到三种方式，其中包括application/x-www-form-urlencoded
var ajaxHelp = { CreatXHR: function () { //创建异步对象 var xhr = new XMLHttpRequest(); return xhr; }, //ajax的get请求 AjaxGet: function (url, callBack) { this.AJaxCommon("get", url, null, callBack); }, //ajax的post请求 AjaxPost: function (url, params, callBack) { this.AJaxCommon("post", url, params, callBack); }, AJaxCommon: function (method, url, params, callBack) { //1.0 var xhr = this.CreatXHR(); //2.0 xhr.open(method, url, true); //3.0 if (method == "get") { xhr.setRequestHeader("If-Modified-Since", "0"); } else { xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } //4.0 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var datas = JSON.parse(xhr.responseText); //执行回调函数 callBack(datas); } } //5.0 xhr.send(params); } };
ps:在JQuery里面是有$.ajax 和$.get / $.Post 等异步请求的方法的。以前的封装就不用了。额。好扯。其实他们底层也是这样的写的呢。JQuery就是为了解决各个浏览器的兼容性问题而已
标签：style blog http io color ar os 使用 sp
原文地址：http://www.cnblogs.com/aguan/p/4102744.html
