ajax发送异步请求从入门到精通

ajax发送异步请求

一、什么是ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
也就是说ajax和我们在浏览器地址栏，或者通过form表单发送请求一样，ajax也可以发送请求，但是二者有很大的不同，ajax不用刷新界面，发送异步请求。

二、发送ajax get请求的步骤

① 创建异步对象

var  xhr =new XMLHttpRequest();

② 设置URL

xhr.open('get',"index.php",true);
// 参数1：发送请求方式
// 参数2：请求的url地址
// 参数3: 请求是同步还是异步。true为异步，默认为true

③ 发送请求

xhr.send();

④ ⑤ 监听事件-->处理响应

 xhr.onreadystatechange = function () {
   // onreadystatechange 可以监听如下状态：
   //0:请求未初始化    1：服务器连接已经建立   2：请求已接收  3：请求处理中   4：请求已完成，且响应已就绪
        //判断当前状态是否已经响应完毕,处理响应
        if(xhr.readyState ==4){
            // 排除访问可能出现的问题,通过服务器返回的状态码来排除，304代表访问缓存
            if (xhr.status >=200 && xhr.status <300 ||xhr.status==304){
                console.log("请求成功！");
            }
            else {
                console.log("请求失败！");
            }
        }
    }

三、处理ie 发送ajax的兼容问题

由于ie低版本浏览器中没有XMLHttpRequest对象，而是ActiveXObject对象
处理方式：

//处理兼容问题
        var xhr;
        if(window.XMLHttpRequest){
            xhr =new XMLHttpRequest();
        }
        else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

四、封装ajax的 get请求 (初级)

/*传参的格式 封装 将传入的对象，转为url 拼接的方式*/
function json2Str(data) {
           //定义数组
           var arr = [];
           //遍历传入的对象
           for (var key in data){
               //将json转为数组
               arr.push(key+'='+data[key]);
               console.log(arr);
           }
           //将数组转为固定格式的字符串
         return  arr.join('&'); //取出数组中的每一项，然后用&符号连接
       }
   function ajaxGet(url,data,success,error) {
             //封装get请求
             var xhr;
             if (XMLHttpRequest){
                 xhr = new XMLHttpRequest();
             }
             else {
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             xhr.open("get",url+'?'+data,true);
             xhr.send();
             xhr.onreadystatechange = function () {
                 if (xhr.readyState ==4){
                     if (xhr.status >=200 && xhr.status <300 ||xhr.status ==304){
                         success(xhr.response);
                     }
                     else {
                         error(xhr.status);
                     }
                 }
             }
         }
   ajaxGet('01-get.php',json2Str(data),function (res) {
             console.log(res);
         },function (code) {
             console.log("请求失败" + code);
         })

五、封装ajax的 get请求 (进阶)

处理ie中缓存和编码问题，
① 在ie浏览器下，如果发送一个相同url请求，它会通过本地缓存获取数据，即只有一个结果，不能获取到最新的数据
② 在ie中只能出现英文、数字、字母、下划线、ASIIC码，不能出现中文，韩文....它不会自动的进行编码，所有需要手动的编码
处理方案，对传入的参数进一步的进行处理
① 给传入的url添加一个随机因子，也可以通过加入时间戳的方式，这样不会出现相同的url请求
② 对传入的参数可能出现中文的地方进行 encodeURL编码

function json2Str(data) {
           //添加一个随机因子， 处理方式也可以是添加时间戳
           data.r = Math.random();
           //定义数组
           var arr = [];
           //遍历传入的对象
           for (var key in data){
               //将json转为数组
               arr.push(key+'='+encodeURI(data[key]));
               console.log(arr);
           }
           //将数组转为固定格式的字符串
         return  arr.join('&'); //取出数组中的每一项，然后用&符号连接
       }

六、封装ajax的 post请求的步骤

 //1 创建异步请求对象
    var xhr;
    if(XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }
    else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2 设置url
    xhr.open('post','post.php',true);
    // 设置请求头,请求头的位置要放在open 和 send之间
    xhr.setRequestHeader("Content-type",'application/x-www-form-urlencoded');
    //3 发送请求
    xhr.send("name=zhang&age=12");
    //4 监听响应 -->处理响应数据
    xhr.onreadystatechange = function () {
        if (xhr.readyState ==4){
            if (xhr.status >=200 && xhr.status <300 || xhr.status==304){
                console.log(xhr.responseText);
            }
            else {
                console.log(xhr.status);
            }
        }
    }

post请求的注意点：

① 不是拼接到url中，参数必须通过send方法传给服务器
② 设置请求头，请求头在open 和 send之间，这个位置是固定的 xhr.setRequestHeader("Content-type",'application/x-www-form-urlencoded');

七、封装ajax的 ajax请求(包括post 和 get)

  //封装的ajax请求方法
    function ajax(type,url,data,timeout,success,error) {
        var xhr;
        if(XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }
        else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //处理参数
        var str =json2Str(data);
        //2 设置url
        if (type =='get'){
            xhr.open(type,url+'?'+str);
            xhr.send();
        }
        else {
            xhr.open('post',url,true);
            // 设置请求头,请求头的位置要放在open 和 send之间
            xhr.setRequestHeader("Content-type",'application/x-www-form-urlencoded');
            //3 发送请求
            xhr.send(str);
        }

        //4 监听响应 –>处理响应数据
        xhr.onreadystatechange = function () {
            if (xhr.readyState ==4){
                clearTimeout(timer);
                if (xhr.status >=200 && xhr.status <300 || xhr.status==304){
                    success(xhr.responseText);
                }
                else {
                    error(xhr.status);
                }
            }
        }
        //超时处理
        if(timeout){
            var timer = setTimeout(function () {
                alert("请求超时");
                xhr.abort();//中断请求
            },timeout)
        }
    }
    // 参入数据包装
    function json2Str(data) {
        //添加一个随机因子， 处理方式也可以是添加时间戳
        data.r = Math.random();
        //定义数组
        var arr = [];
        //遍历传入的对象
        for (var key in data){
            //将json转为数组
            arr.push(key+'='+encodeURI(data[key]));
            console.log(arr);
        }
        //将数组转为固定格式的字符串
        return  arr.join('&'); //取出数组中的每一项，然后用&符号连接
    }
    var data = {
        "name":'zhang',
        "age":21
    }
    //发送一个 ajax请求
   ajax('post','01-get.php',data,2000,function (res) {
       console.log(res);
   },function (e) {
       console.log(e);
   })

此处封装两大改动：

① 将 post 和 get请求封装在一起，通过type 参数来指定类型

② 设置了请求的延时，当网络不好的情况下，不然用户一直等下去，采用的是定时器来设置的

问题：

通过这种方式，已经可以实现基本的ajax请求，但是它仍然存在很多缺陷：

① 使用这个方法的时候，我需要看封装的方法，这样才能知道要传入几个参数，而且参入参数的位置是什么，这样十分的不利于提高效率

② 容错性差，有的参数是必须传的参数，而有的参数可有可无，都没有对他们进行容错处理。

下面我们再一次封装这个方法来解决存在的这两个问题

八、封装ajax的 ajax请求(终极)

 function json2str(json) {
        // 0.给json添加随机因子
        json.t = Math.random();
        // 1.将json转换为数组
        var arr = [];
        for(var key in json){
            arr.push(key+"="+encodeURIComponent(json[key]));
        }
        // 2.将数组转换为字符串返回
        return arr.join("&");
    }
    function ajax(options) {
        // 1.判断有没有传递option
        options = options || {};
        // 2.判断有没有url
        if(!options.url){  //没传入url
            return ;
        }
        // 3.设置默认值
        options.type = options.type || "get";
        options.timeout = options.timeout || 0;
        options.data = options.data || {};

        // 4.将参数转换为固定格式字符串
        var str = json2str(options.data);

        // 1.创建异步对象
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest()
        }else{
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        if(options.type == "get"){
            // 2.设置URL
            xhr.open(options.type, options.url+"?"+str, true);
            // 3.发送请求
            xhr.send();
        }else{
            // 2.设置URL
            xhr.open(options.type, options.url, true);

            // 设置请求头
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            // 3.发送请求
            xhr.send(str);
        }
        // 4.注册事件
        xhr.onreadystatechange = function () {
            // 5.处理返回数据
            // 判断请求状态
            if(xhr.readyState == 4){
                clearTimeout(timer);
                // 判断HTTP状态
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                    options.success(xhr.responseText);
                }else{
                    options.error(xhr.status);
                }
            }
        }
        // 6.超时处理
        if(options.timeout){
            var timer = setTimeout(function () {
                xhr.abort(); // 中断请求
            }, options.timeout);
        }

    }
    //调用 ajax发送请求
    ajax({
        "type":"post",
        "url":'01-get.php',
        "data":{
           "name":"zhangsan",
            "age":21
        },
        "timeout":0,
        "success":function (res) {
            console.log(res);
        },
        "error":function (e) {
            console.log(e);
        }
    });

哈哈，花了几个小时，希望对大家有帮助！

ajax发送异步请求从入门到精通