关于ajax原理阐述

Posted 2020-11-02 dorseych

ajax是什么呢？说白了就是一个请求，一个读取服务器资源以及提交资源到服务器的中间处理机制，那它具体是怎样工作的，又有怎样的原理呢？

var ajax=function(url,fnSucceed,fnFail){
    //第一步：初始化http协议，即实例化一个XMLHttpRequest方法。
    //这里还需要做判断，因为微软的老版本IE（＜IE7）与众不同的是，它的ajax是通过一个ActiveXObject控件实现的，
    //并不是其他浏览器的XMLHttpRequest，这是一种兼容写法。现在其实可以就用XMLHttpRequest来，毕竟连阿里都宣布
    //不支持IE8以下的了。
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    }
    else{
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //第二步：设置发起请求的内容，方式，要访问哪里？哪个url？是要读还是写？（即get 还是 post）是同步还是异步？
    oAjax.open(‘GET‘,url,true);
    //true是异步，要同步就是false，
    //get一般用于读取服务器数据或资源文件。
    //post一般则是用于用户上传数据时回传至服务器，但这两个实际上都是可读可写，只不过是数据传送的方式不同，
    // 之所以人们一般会这样用主要体现在下面这些方面：
    // 1、get是通过地址栏传输（可以仔细看我们浏览器的上方地址栏，里面的信息会包括一些比较机密的信息，比如：
    // 当用户注册后的信息，如果此时用get进行提交会发生什么呢？你看最上方的地址栏，里面显示的恰恰好是你的账户跟
    // 密码，这就很恐怖了，也非常不安全），而post是通过报文传输，数据不会在地址栏显示，会帮你把提交的数据隐藏，
    // 相对来说比较安全，get中的url有长度限制，最大长度是2k，也就是2048个字符，而post则无限制，
    // 而说到这你可能就会说了，既然post方式这么多优点，那为啥不都用post就可以了？
    // 你又错了，是的，post本身也是有限制的，比如：
    // 你在浏览网页的时候点快了，要后退刷新什么的，用get呢因为他本质上是获取服务上的资源，而你后退实际上并没有
    //要获取服务器上资源的意思（浏览器读得懂），而用post呢？post本质是什么呢？是向服务器提交资源或数据，所以用
    //post的时候，你后退了，浏览器还以为你又要提交什么东西，那它就会把数据再重新提交给服务器，造成重复提交数据
    //说到本质上的东西，你现在知道为什么get有2k的限制了吧？get就是获取，由于对于一个服务器上的资源的获取实际上
    // 是获取资源的url或者再本质点就是一个标识符，资源标识（url不代表就是资源的实际物理地址），这个一般不会太长，
    //也没必要太长，你见过地址栏的东西有一大串一大串的吗？没有吧？而post呢？还是回归本质，英文的意思是什么呢？
    //帖子，投递，说白了就是上传或提交，我想当初ajax底层XMLHttpRequest他们的作者也肯定希望我们用post就是用来投递，
    //用来提交资源的，而get(得到)就是用来获取资源的，它们既然这样想，在设计程序的时候肯定也是这样设计的了，关于
    // 这两个不必要研究太深入，只需要牢记语义化，get 读取资源，post 提交资源，这样你就可以搞定9成9的ajax请求了，
    //而这，够了！我们不是科学家，钻牛角尖的东西，钻到一定程度就够了，当然如果你有时间推荐深入去研究，好事。

    //第三步：发送请求。
    oAjax.send();

    //第四步：处理请求
    /**这第4步有个大坑，什么坑呢？既然是响应终端客户操作的交互请求，那客户什么时候操作呢？我们不知道，服务器也
     * 不会知道。那怎么办呢？如果你学过java，有四个字你一定不陌生，说到这你可能想到了，没错，就是事件监听
     * 但我们这个ajax呢？它不是这样的，它采用的是js里一直被其他程序语言开发者诟病的回调机制，具体是怎样的呢？
     *
     * 我们刚刚开头实例化了一个XMLHttpRequest，它提供了三个属性：
     * 1、onreadystatechange：拆开看 on readystate change，当readystate这个属性变化的时候，调用这个函数
     *                        是的，你没翻译错，它就是一个函数，一个回调函数，一个存储了我们预先设置好当用户
     *                        发起请求后我们要做（或者说服务器要做）的响应操作，一句话，存函数的
     *
     * 2、readyState：刚刚你是不是在纳闷，我为啥要那样翻译呢？而不是on ready state change呢？看到这个你恍然大悟
     *                了吧？嘿嘿，其实正确的翻译还真是第2次翻译的这个，就是当预备的状态改变时，只不过预备的状态
     *                我就当成这个了，这样你印象会比较深，没错，语义化，readyState这个就是XMLHttpRequest的状态
     *    这个readyState的状态是预先约定俗成好的，类似于协议这样，可以当成一个switch开关，它有几个case，没错
     *    就是这么任性，这么认为没问题的，具体是哪几个case呢？
     *    0：请求未初始化
     *    1：服务器连接已建立
     *    2：请求已接收
     *    3：请求处理中
     *    4：请求已完成，且响应已就绪。（这个用得比较多，毕竟服务器内部的我们并不关心，我们只关心结果）
     *
     * 3、status：这个也是一个状态，它的可填属性呢，有一大堆：0**（未初始化），1**（请求收到，继续处理），2**，
     *            3**，4**，5**，太多了这里就不列举了，有个statusText状态表可自行去查，不过想说的是一般情况下，
     *            服务器对数据的处理，响应我们没必要去管它到底是执行到哪一步了？（数据接收不到调试的话除外）
     *            我们只需要判断它是否接收完请求，并是否能成功做出响应就可以了，所以呢，我们记住几个常用的就可
     *            以了，大脑容量有限，我们应该记一些最精华的部分，而不是越多越好，当然必须先明白原理才可以。
     * 这里呢，我列几个吧：
     *            200："OK"，最常用，成功的意思 （开发者可能比较多用这个）
     *            401：请求授权失败
     *            404：未找到页面
     *            500：服务器产生内部错误
     *            12029：网络不通
     *
     * 啰嗦了这么多，没实操怎么行呢？
     * */
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            if(oAjax.status==200){
                fnSucceed(oAjax.responseText);//响应成功回调的函数，这里只是简简单单的返回了一串数据，
                                               //可以在里面或外部的函数里继续写其他响应操作
            }
            else{
                if(fnFail){
                    fnFail(oAjax.status);
                }
            }
        }
    };//我们这里存了一个函数了
};
下面贴一个自己写的代码（其实上面都有了，只不过比较杂）

/**
 * Created by Administrator on 2018/5/1 0001.
 */
var dc_ajax_g=function(url,fnSucceed,fnFail) {
    //if (window.XMLHttpRequest) {
        var oAjax = new XMLHttpRequest();
    //}
    //else {
    //    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    //};
    oAjax.open(‘GET‘,url,true);
    oAjax.send();
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            if(oAjax.status==200){
                fnSucceed(oAjax.responseText);//响应成功回调的函数，这里只是简简单单的返回了一串数据，
                //可以在里面或外部的函数里继续写其他响应操作
            }
            else{
                if(fnFail){
                    fnFail(oAjax.status);
                }
            }
        }
    };
};