// ajax 原理 以拨打电话为例
function ajaxFn(obj) {
var url = obj.url; // url 是必选参数
// 以下都是可选参数
var type = obj.type || “get”;
// 不区分大小写的
var type = type.tolowerCase();
var data = obj.data || {};
var success = obj.success || false;
var fail = obj.fail || false;
// 先实例出一个 ajax 对象
// 1.先有个手机
if(window.XMLHttpRequest){ // 现代浏览器, 智能手机
var ajax = new XMLHttpRequest;
} else {
var ajax = ActiveXObject(“Microsoft.XMLHTTP”);
}
// 2. 拨号
var datas = toData(data); // toData是下面封装的函数
if(type==“get”) {
ajax.open(“get”,”api.php”); // 指定请求类型 指定请求的地址
// get 发送
ajax.send(null);
} else { // post 提交
ajax.open(“post”,url);
ajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”); // post提交,需要设置头信息
ajax.send(datas); // post 发送
}
// 4.检测状态
ajax.onreadystatechange = function() {
// 4.1 发送的状态
if(ajax.readyState==4) { // 发送成功条件
if(ajax.status>=200 && ajax.status<=207 || ajax.status==304){ // 通话成功了
success(JSON.parse(ajax.responseText));
}
} else{
if(fail){
fail(ajax.status);
}
}
}
}
// 处理 url 的函数
function toData(data) { // data是对象, {"username":zhangsan,"passWord":123}
var arr = [];
for(var i in data)
arr.push(i+”=“+data[i]);
}
return arr.join(“&”) ; // userName=xiaowangzi&password=123
}
ajaxFn({
url:”api.php”,
type:”post”,
data:{
userName:”xiaowangzi”,
passWord: “123"
},
success: function(data) {
console.log(data);
}
})