jquery 源码分析5-ajax()ajax原理，可以加载的类型

jquery 源码分析5-ajax()ajax原理，可以加载的类型

很多框架都有自己的一套ajax，其实都是封装了浏览器器提供的对像XMLHttpRequest ，XMLHttpRequest从发起一个http请求到返回一个服务器传回的数据有以下一个步骤

创建 XMLHttpRequest对象

// Create the request object; Microsoft failed to properly
// window.ActiveXObject 是IE7 对应的发去ajax对象，其他浏览器是通过  new XMLHttpRequest(),
var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

open一个连接,(如果服务端设置了username，需要用户名，密码，默认都是不需要的)

if( username )
xhr.open(type, s.url, s.async, s.username, s.password);
else
xhr.open(type, s.url, s.async);

设置请求头

xhr.setRequestHeader("Content-Type", s.contentType);

执行send()方法

xhr.send();

执行绑定在xhr上的方法onreadystatechange(),处理返回的数据,onreadystatechange是浏览器定义的XMLHttpRequest对象http请求完成后的回调函数

可以加载资源类型

xml: "application/xml, text/xml",
html: "text/html",
script: "text/javascript, application/javascript",
json: "application/json, text/javascript",
text: "text/plain",

dataType 有xml,html,script,json,text和JSONP(用于跨域使用，本质和script一样)

封装了ajax的方法

get: function( url, data, callback, type ) {
return jQuery.ajax();
},

getScript: function( url, callback ) {
return jQuery.get(url, null, callback, "script");
},

getJSON: function( url, data, callback ) {
return jQuery.get(url, data, callback, "json");
},

post: function( url, data, callback, type ) {
return jQuery.ajax({
type: "POST",
url: url,
data: data,
success: callback,
dataType: type
});
},
ajax： function(s){
//这里进行了简化，实际是在这里做了很多判断，
var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
xhr.open(type, s.url, s.async, s.username, s.password);
xhr.setRequestHeader("Content-Type", s.contentType);
xhr.send();
onreadystatechange(callBackData);
}

默认就是上面这些方法，从上面看，我们主要关注ajax方法，ajax方法的参数是一个对象，这种用法在定义函数参数很有好，这样我们在函数内部可以根据键值对的模式拿到参数，如果用ajax（a，b，c,d）,假设a,b,c,d中某个参数没有传入，在函数内部做判断也是很麻烦的，而通过一个我定义好了的对象属性名来判断就比较方便，都是可读性也比较强