转自我的个人博客旧址
假如看了的我上一篇博客《Ajax入门（一）从0最先到一次胜利的GET要求》的话，一定晓得我们已完成了一个简朴的get要求函数了。以下：
/**
* 一个简朴的get要求
* @param {String} url 要求地点,文件名
* @param {Function} fnSucc 要求胜利时实行的函数
* @param {Function} fnFaild 要求失利实行的函数
*/
function AJAX(url, fnSucc, fnFaild) {
//1.建立ajax对象
var oAjax = null;
/**
* 此处必需须要运用window.的体式格局,示意为window对象的一个属性.不存在时价为undefined.
* 进入else若直接运用XMLHttpRequest在不支持的情况下会报错
**/
if (window.XMLHttpRequest) {
//IE6以上
oAjax = new XMLHttpRequest();
} else {
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.衔接服务器
//open(要领,url,是不是异步)
oAjax.open("GET", url, true);
//3.发送要求
oAjax.send();
//4.吸收返回
//OnRedayStateChange事宜
oAjax.onreadystatechange = function () {
if (oAjax.readyState === 4) {
if (oAjax.status === 200) {
// alert("胜利" + oAjax.responseText);
fnSucc(oAjax.responseText);
} else {
// alert("服务器相应失利!");
if (fnFaild) {
fnFaild();
}
}
}
};
}为何要继续举行Ajax函数封装？
缘由以下：
如今要领只能运用get要求，而不能运用post要求，而在用户注册时必需运用POST，由于POST，如今不够完全。
如今要求参数只能直接写在url里，不利于动态猎取数据，应当运用参数剖析的体式格局，便于运用。
get要求体式格局要求缓存题目。
进修封装要领，
革新目的
function ajax(url, options) {
// your implement
}options是一个对象，内里能够包含的参数为：
type: post或许get，能够有一个默认值
data: 发送的数据，为一个键值对象或许为一个用&衔接的赋值字符串
onsuccess: 胜利时的挪用函数
onfail: 失利时的挪用函数
革新最先（三步）
（一）原函数的革新
形参中，删除fnSucc、fnFaild 增加options。使胜利与失利实行的函数变成options对象的 onsuccess、onfail两个要领对应的值。
主如果在4、吸收返回部份举行变动，以下
//4.吸收返回
oAjax.onreadystatechange = function () {
if (oAjax.readyState === 4) {
if (oAjax.status === 200) {
//要求胜利。形参为猎取到的字符串情势的相应数据
options.onsuccess(oAjax.responseText);
} else {
//先推断是不是存在要求失利函数
//存在时，形参为XMLHttpRequest对象，便于举行毛病举行处置惩罚
if (options.onfail) {
options.onfail(oAjax);
}
}
}
};（二）要求参数的处置惩罚
起首我们要晓得的是在运用要求参数存在时，GET体式格局的要求参数迥殊简朴。直接在url背面增加?参数名=参数值&参数名二=参数值二
完成思绪：
起首推断options.data是不是存在，不存在时运用
"?timestamp= + new Date().getTime();链接在url后，以消灭缓存。这里只是我运用的要领，这里的timestamp能够随便变动
new Date().getTime();也能够用Math.random();主如果坚持每次要求的url都不一样。另有许多别的要领参考Ajax缓存题目怎样处理？。有兴致的本身再多google一下吧。
存在options.data时，应当限定要求data花样便于处置惩罚，设定为JSON（固然没必要像JSON那末严厉，然则应当坚持键值对的花样）。
运用for in 遍历data，运用
=来衔接键与值，运用&来衔接多个要求参数只须要对原函数中的2.衔接服务器举行变动
完成以下：
原：
//2.衔接服务器
//open(要领,url,是不是异步)
oAjax.open("GET", url, true);现：
//open(要领,url,是不是异步)
var param = "";//要求参数。
//推断data存在时缓存它，不存在时，设为0
var data = options.data ? options.data : 0;
if(typeof(data)==="object"){//只要data为对象使才实行
for (var key in data){//要求参数拼接
if (data.hasOwnProperty(key)) {
param += key+"="+data[key]+"&";
}
}
param.replace(/&$/,"");//去除末端的&。
}else{
param= "timestamp=" + new Date().getTime();
}
//2.衔接服务器
oAjax.open("GET", url+"?"+param, true);（三）要求范例挑选
运用post发送数据，模仿form提交。在url看不到要求参数，越发平安。
完成思绪：
推断是不是type是不是存在，存在时转为大写，默以为GET要求。
推断要求的范例，GET 或 POST 。
在运用post要求提交数据时，要求参数不跟在url背面。
运用post要求数据必需增加在
open()与send()直接增加头信息。xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
运用post要求数据，对2.衔接服务器、3.发送要求部份举行处置惩罚
完成以下：
原：
//2.衔接服务器
oAjax.open("GET", url+"?"+param, true);现：
//3.发送要求
var type = options.type ? options.type.toUpperCase() : "GET" ;
if(type ==="GET"){
oAjax.open("GET", url+"?"+param, true);
oAjax.send();
}else{
oAjax.open("POST", url, true);
oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
oAjax.send(param);
}终究完成
连系之前写的，集合起来。
/**
* AJAX函数封装
* @param {string} url 要求地点（必需）
* @param {object} options 发送要求的选项参数
* @config {string} [options.type] 要求发送的范例。默以为GET。
* @config {Object} [options.data] 须要发送的数据。
* @config {Function} [options.onsuccess] 要求胜利时触发，function(oAjax.responseText, oAjax)。（必需）
* @config {Function} [options.onfail] 要求失利时触发，function(oAjax)。(oAJax为XMLHttpRequest对象)
*
*@returns {XMLHttpRequest} 发送要求的XMLHttpRequest对象
*/
function AJAX(url, options) {
//1.建立ajax对象
var oAjax = null;
/**
* 此处必需须要运用window.的体式格局,示意为window对象的一个属性.不存在时价为undefined,进入else
* 若直接运用XMLHttpRequest,在不支持的情况下会报错
**/
if (window.XMLHttpRequest) {
//IE6以上
oAjax = new XMLHttpRequest();
} else {
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.衔接服务器
//open(要领,url,是不是异步)
var param = ""; //要求参数。
//只要data存在，且为对象使才实行
var data = options.data ? options.data : -1; //缓存data
if (typeof (data) === "object") {
for (var key in data) { //要求参数拼接
if (data.hasOwnProperty(key)) {
param += key + "=" + data[key] + "&";
}
}
param.replace(/&$/, "");
} else {
param = "timestamp=" + new Date().getTime();
}
//3.发送要求
var type = options.type ? options.type.toUpperCase() : "GET";
if (type === "GET") {
oAjax.open("GET", url + "?" + param, true);
oAjax.send();
} else {
oAjax.open("POST", url, true);
oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
oAjax.send(param);
}
//4.吸收返回
//OnRedayStateChange事宜
oAjax.onreadystatechange = function () {
if (oAjax.readyState === 4) {
if (oAjax.status === 200) {
//要求胜利。形参为猎取到的字符串情势的相应数据
options.onsuccess(oAjax.responseText, oAjax);
} else {
//先推断是不是存在要求失利函数
//存在时，形参为XMLHttpRequest对象，便于举行毛病举行处置惩罚
if (options.onfail) {
options.onfail(oAjax);
}
}
}
};
return oAjax;//发送要求的XMLHttpRequest对象
}终究完成就是如许了。固然还远远算不上圆满，比方
try catch的运用 ，然则经由过程如许的封装，照样学到许多学问。
