原生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);