关于ajax原理阐述

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通常则是用于用户上传数据时回传至服务器，但这两个实际上都是可读可写，只不过是数据传送的方式不一样，
    // 之因此人们通常会这样用主要体如今下面这些方面：
    // 一、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，它提供了三个属性：
     * 一、onreadystatechange：拆开看 on readystate change，当readystate这个属性变化的时候，调用这个函数
     *                        是的，你没翻译错，它就是一个函数，一个回调函数，一个存储了咱们预先设置好当用户
     *                        发起请求后咱们要作（或者说服务器要作）的响应操做，一句话，存函数的
     *
     * 二、readyState：刚刚你是否是在纳闷，我为啥要那样翻译呢？而不是on ready state change呢？看到这个你恍然大悟
     *                了吧？嘿嘿，其实正确的翻译还真是第2次翻译的这个，就是当预备的状态改变时，只不过预备的状态
     *                我就当成这个了，这样你印象会比较深，没错，语义化，readyState这个就是XMLHttpRequest的状态
     *    这个readyState的状态是预先约定俗成好的，相似于协议这样，能够当成一个switch开关，它有几个case，没错
     *    就是这么任性，这么认为没问题的，具体是哪几个case呢？
     *    0：请求未初始化
     *    1：服务器链接已创建
     *    2：请求已接收
     *    3：请求处理中
     *    4：请求已完成，且响应已就绪。（这个用得比较多，毕竟服务器内部的咱们并不关心，咱们只关心结果）
     *
     * 三、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);
                }
            }
        }
    };
};