js脚本发起HTTP请求必须通过XMLHttpRequest对象，也是通过AJAX进行浏览器与服务器通信的接口，不局限于XML，可以发送任何格式的数据
XMLHttpRequest本身是JS引擎内置的构造函数，所有XMLHttpRequest都需要被实例化 new XMLHttpRequest();
IE5,6使用ActiveX对象: new ActiveXObject('MicrosoftXMLHTTP')
参数说明
var xhr = new window.HMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
// console.log(xhr.readyState) // 0:请求未初始化
// xhr.open('GET', 'http://...?name=tome&password=123', true);
// xhr.send();
xhr.open('POST', 'http://...', true);
xhr.setReqeustHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=tom&password=123');
// console.log(xhr.readyState) // 1:服务器连接已建立
xhr.onreadystatechange = function(){
// console.log(xhr.readyState) // 2 3 4
if(xhr.readyState === 4 && xhr.status === 200){
console.log(JSON.parse(xhr.responseText));
}
}
open方法(发送设置)
xhr.open(method: 请求方式, url: 请求发送的地址, true异步 / false同步 )
xhr.send（发送请求）发送post请求体数据用，GET不填写
xhr.onreadystatechange事件: 挂载到XMLHttpRequest对象上的事件
xhr.readyState属性: 通过XMLHttpRequest对象发送HTTP请求的各阶段状态码
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成，且响应已就绪
xhr.status属性: 服务器响应的状态码
200: 响应成功
401 请求未携带token/无效/超时
403 Forbidden 账号权限不够
404: Not found请求资源不存在
当readyState变化时，将触发onreadystatechange事件执行其回调函数
注意: readyState仅仅是针对请求与响应的状态码，获取资源是否成功取决于status状态
xhr.responseText: 获取到JSON类型的字符串数据
xhr.responseXML: 获取XML数据
POST请求下，send方法的参数格式: name=tom&password=123;
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded);
POST请求方式必须设置这个请求头信息，目的是将请求体中的数据(name=tom&password=123)转换成键值对，
这样后端接收到name=tom&password=123这样的数据才知道这是一个POST方式传过来的数据
封装思路: 实现似于jQuery的调用方式
function $(){
return {
a: 1,
b: 2
}
}
console.log( $().a ) // $()得到返回的对象，对象.a 获取到1
---------------------------------------------------------------------
var $ = (function(){
return {
a: 1,
b: 2
}
})();
console.log( $.a ); // 1
封装ajax
var $ = (function(){
// new ActiveXObject用于IE5,6
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
if(!xhr){
throw new Error('您的浏览器不支持异步发起HTTP请求');
}
function packAjax(options){
var opt = options || {},
type = (opt.type || 'GET' ).toUpperCase(),
async = opt.async || true,
url = opt.url,
data = opt.data || null,
error = opt.error || function(){}, // 失败执行的函数
success = opt.success || function(){}, // 成功执行的函数
complete = opt.complete || function(){}; // 不管成功or失败都会执行的函数
if(!url){
throw new Error('您没有填写URL');
}
xhr.open(type, url, async);
if(type==='POST'){
xhr.setReqeustHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.send(type === 'GET' ? null: formatDatas(data)); // get请求方式send()传空;
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
success(JSON.parse(xhr.responseText));
complete();
}
if(xhr.status === 404){
error();
complete();
}
}
}
function formatDatas(obj){
var str = '';
for(var key in obj){
str += 'key'+'='+obj[key]+'&';
}
str.replace(/&$/,''); // 最后多一个&, &结尾替换空字符
return str; // name=tom&password=123
}
return {
ajax: function(options){
packAjax(options);
},
post: function(url, data, callback){
packAjax({
type:'POST',
url,
data,
success:callback
})
},
get: function(url,callback){
packAjax({
type: 'GET',
url,
success: callback
})
}
}
})();
// $.ajax({
// type: 'POST',
// url:'http://....',
// data: {
// name: 'tom',
// password: 123
// },
// success:function(res){
// console.log(res);
// }
// })
// $.post({
// url:'http://....',
// data: {
// name: 'tom',
// password: 123
// },
// success:function(res){
// console.log(res);
// }
// })
$.get({
url:'http://....?name=tom?password=123',
success:function(res){
console.log(res);
}
})
