原生ajax如何执行,原生ajax的完整执行过程

为了让自己更熟悉原生 ajax 的写法和运动，写了一遍 ajax 源码贴在博客上.

readyState 的值列表如下：0 - 未初始化

1 - 正在加载

2 - 加载完毕

3 - 交互中

4 - 完成

function ajax(data){

var type = data.type;

var dataType = data.dataType;

var url = data.url;

var data = data.data;

var callback = data.success;

if(dataType == 'json'){

//1、创建XHR对象

var xhr = new XMLHttpRequest();

//2、发送前的准备工作

xhr.open(type,url,true);

//3、执行发送动作

var param = '';

for(var k in data){

param += k + '=' + data[k] + '&';

}

param = param.substring(0,param.length-1);

// name=zhangsan&age=12

xhr.send(param);

//4、指定回调函数

xhr.onreadystatechange = function(){

//4表示服务器端已经完全返回结果，但是数据是否正确还不确定

if(xhr.readyState === 4){

//200表示服务器返回的数据是正确的

//404表示没有找到请求的资源

//500服务器端错误

if(xhr.status === 200){

// var result = '空调坏了';

// var result = '服务器挂了';

var result = xhr.responseText;

callback(result);

}

}

}

}else if(jsonp){

//这里是jsonp的本质：动态创建script标签，通过src属性发送一个请求，请求的返回内容是一个函数调用

var cb = 'callback';

var method = "jQuery1231231231231231_2143213123";

//这里就是所谓的回调函数

window[method] = function(data){

console.log(data.name);

console.log(data.age);

}

var script = document.createElement('script');

script.src = url+"?"+cb+"="+method;

//http://localhost/abc.php?callback=jQuery1231231231231231_2143213123

document.getElementsByTagName('head')[0].appendChild(script);

// jQuery1231231231231231_2143213123({"name":"张三","age":"12"})

}

// abc.php的内容就是如下两行

// $abc = $_GET['callback'];//jQuery1231231231231231_2143213123

// echo $abc.'('.'{"name":"张三","age":"12"}'.')';// // jQuery1231231231231231_2143213123({"name":"张三","age":"12"})

}

ajax({

type : 'get',

dataType : 'json',

url : 'http://localhost/abc/php',

data : {name:'zhangsan',age:12},

success : function(){

}

});

// var obj = {

// type : 'get',

// dataType : 'json',

// url : 'http://localhost/abc/php',

// data : {name:'zhangsan',age:12,list:[123,456]},

// success : function(){

// }

// };

// foo(obj);