jquery中ajax原生代码的分析模仿
function ajax(obj){
var defaults = {
url: "#",
data: {},
type: "get",
async: true,
dataType :"text",
jsonp: "callback",
//jsonpCallback的值为success函数的名称，一般不用自己制定
success:function(data){console.log(data);}
};
for(var key in obj){
defaults[key] = obj[key];
}
if(defaults.dataType == 'jsonp'){
ajax4jsonp(defaults);
}else{
ajax4json(defaults);
}
}
function ajax4json(defaults){
//1、创建XMLHttpRequest对象
var xhr = new null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//2、准备发送请求
//把对象形式的参数转换成字符串形式的参数
var param = '';
for(var attr in defaults.data){
param += attr + '=' + defaults.data[attr] + '&';
}
if(param){
param = param.substring(0,param.length - 1);
}
//处理get请求并处理中文乱码问题
if(defaults.type == 'get'){
defaults.url += '?' + encodeURI(param);
}
xhr.open(defaults.type,defaults.url,defaults.async);
//3、执行发送请求
//处理post请求并设置请求头
var data = null;
if(defaults.type == 'post'){
data = param;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
xhr.send(data);
//处理同步请求，不会调用回调函数
if(!defaults.async){
if(defaults.dataType == 'json'){
return JSON.parse(xhr.responseText);
}else{
return xhr.responseText;
}
}
//4、指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//xhr.readyState：0 未发送
1 已发送但未发送完
2 发送完毕
3 开始接收数据但是没有接收完
4 接收完数据
if(xhr.status == 200){
var data = xhr.responseText;
if(defaults.dataType == 'json'){
data = JSON.parse(data);
}
defaults.success(data);
}
}
}
}
function ajax4jsonp(defaults){
//系统随机生成一个回调函数的名称,callback = cbName，cbName就是success函数
var cbName = 'jQuery' + ('1.11.1' + Math.random()).replace(/\D/g,"") + '_' + (new Date().getTime());
if(defaults.jsonpCallback){
cbName = defaults.jsonpCallback;
}
window[cbName] = function(data){
defaults.success(data);
}
var param = '';
for(var attr in defaults.data){
param += attr + '=' + defaults.data[attr] + '&';
}
if(param){
param = param.substring(0,param.length-1);
param = '&' + param;
}
//将callback = cbName，cbName函数添加到url地址中,传到服务器中，在服务器端执行success中的函数
var script = document.createElement('script');
script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}
