原生ajax的完整执行过程

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

  1. 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);