//封装jq版ajax请求
//我们的目标:
// $.ajax({
// url: '',
// type: "post",
// data: {
// },
// dataType: 'josn',
// async: true,
// success:function(data){
// },
// error:function(err){
// }
// })
jqAjax (params) {
var $ = {}; //模仿jq对象
$.ajax = function (options) { //实现逻辑
//使用XMLHttpRequest
var xhr = new window.XMLHttpRequest();
//成功处理
var ajaxSuccess = function (data) {
options.success(data)
}
//失败处理
var ajaxError = function (data) {
options.error(data)
}
//对象转字符串
var params = function (obj) {
var data = '';
for (var key in obj) {
data += key + "=" + obj[key] + "&"
}
return data.substring(0, data.length - 1);
}
//是否为异步请求 默认是异步请求 特殊会使用同步
var async = options.async ? options.async : true;
xhr.open(options.type, options.url, async);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState != 4) return
if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
ajaxSuccess(xhr.responseText)
} else {
ajaxError(xhr.statusText)
}
}
console.log(options.data)
xhr.send(params(options.data));
}
1）open方法的第一个参数是请求类型：get、post、head等，第二个参数是请求的接口地址，第三个参数表示ajax请求是异步（true）还是同步（false），如果是异步，在ajax发送完请求后js会继续执行，不会等待服务器响应，我们一般选择异步，提高页面的渲染效率；
2）send方法只有一个参数，表示向服务器发送的参数，一般是对象；
3）onreadystatechange是一个事件，它可以监听从请求开始到结束整个过程的状态，状态保存在xhr的readyState属性中。
readyState状态：
0代表未初始化，open方法还未执行；
1代表正在加载，open已被执行但send还未被执行；
2代表已经加载完毕，send已被执行，请求已被发送；
3代表正在等待服务器响应；
4代表响应已经完成。
从上面readyState状态我们可以看出，ajax只需要4的情况，其他状态其实都是失败！
另外，xhr的status属性代表服务器返回的状态码，根据我们的经验，状态码在400以上都是有问题的，要么是服务端问题，要么就是客户端问题！300到400之间好像都和重定向有关系，但是有一个除外——304，如果你了解浏览器缓存，你肯定知道它和协商缓存有关系，其实它代表请求成功！另外200以下的状态都需要请求者继续操作，也不符合要求！总结一下，可用的状态码就是200到300之间，加一个304！
$.ajax(
{
url: 'http://121.0.0.202:9008/api/v1/common/home/login',
type: "post",
data: {
loginName: "44",
loginPwd: "544"
},
async: true,
success: function (data) {
console.log(data, "889")
},
error: function (err) {
console.log(err)
}
}
)
}
