美文网首页Web 前端开发 让前端飞
关于Ajax需要知道的部分

关于Ajax需要知道的部分

作者: 我叫陈小宝T_T | 来源:发表于2017-05-25 16:30 被阅读0次

    Ajax技术核心是XMLHttpRequest对象(简称XHR)

    ajax的使用能够以异步的方式从服务器获取信息,意味着用户单击后,可以不必刷新页面也能取得新数据。

    为保证浏览器对XHR的支持,使用以下方法

    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    

    总的来说,我们只是使用了xhr方法来实现向服务端发请求,获取返回数据,在实现页面上的局部刷新,更改数据。

    这里我们主要研究下,如何用原生js封装一个类似jquery的ajax请求,具体的ajax细节方法,大家可以在网上查询,或者高程三上讲解的很详细

    //toData方法是将data传入的数据取到并且拼接,为拼到URL上做准备
    function toData(obj){
        if (obj == null){
            return obj;
        }
        var arr = [];
        for (var i in obj){
            var str = i+"="+obj[i];
            arr.push(str);
        }
        return arr.join("&");
    }
    
    function ajax(opts){
        //创建ajax对象,以及一系列需要的参数
        var xhr = null,
            abortTimeout = null,
            empty = function(){},
            ajax_url = "",
            opts = {
                type : ( opts.type && opts.type.toUpperCase() ) || "GET",
                url : opts.url || "",
                data : opts.data || "",
                dataType : opts.dataType || "json",
                success : opts.success || empty,
                err :opts.error || empty,
                timeout : opts.timeout || 30000   //默认超时时间: 30s
            };
        //判断浏览器是否有xhr
        if (window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }
        else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
            
          //处理传入的参数
        opts.data = toData(opts.data);
    
           //通过请求方式不同,来拼接URL
        if(opts.type == "GET"){
            if(opts.url.indexOf("?")>-1){
                if(opts.data == ""){
                    ajax_url = opts.url;
                }else{
                    ajax_url = opts.url + "&" +opts.data;
                }
            }else{
                ajax_url = opts.url + "?" + opts.data;
            }
            xhr.open('GET',ajax_url,true);
            xhr.send();
        }else(opts.type == "POST") {
            xhr.open('POST',opts.url,true);
            //如果需要像html表单那样post数据,需要设置http头
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(opts.data);
        }
    
        //处理返回的数据
        xhr.onreadystatechange = function(){
        /*
            ** 每当readyState改变时,就会触发onreadystatechange事件
            ** readyState属性存储有XMLHttpRequest的状态信息
            ** 0 :请求未初始化
            ** 1 :服务器连接已建立
            ** 2 :请求已接受
            ** 3 : 请求处理中
            ** 4 :请求已完成,且相应就绪
          */
          if(xhr.readyState == 4){
            var res, 
                error;
            xhr.onreadystatechange = empty;
            clearTimeout(abortTimeout);
    
            if((xhr.status >= 200 && xhr.status < 300) ||xhr.status ==304){
                res = xhr.responseText;
                try{
                    if(opts.type == "GET"){
                        if(opts.dataType == "json"){
                            res = JSON.parse(xhr.responseText);
                        }else if(opts.dataType == "script") {
                            eval(res);
                        }else if(opts.dataType == "xml"){
                            res = xhr.responseXML;
                        }
                    }
                }catch(e) {
                    error = e;
                }
                if(error){
                    opts.error(error,'parsererror',xhr);
                }else{
                    opts.success(res);
                }
            }else{
                opts.error(xhr.statusText || 'unknown' ,'status:' +xhr.status,xhr);
            }
          }
        };
    
        if(opts.timeout > 0){
            xhr.ontimeout = function(){
                          opts.error('Request.timeout','timeout',xhr);
                  }
        }
    
        return xhr;
    }
    module.exports = ajax;
    

    下面我们将调用这个封装的ajax请求

    ajax({
        url : url,
        dataType : 'json',
        data : {
            "param1" : "111",
            "param2" : "222"
        },
        success: function(result){
            console.log(result);
        },
        timeout: 30000,
        error : function(error,type,xhr){
            console.log("error" : error,"type:",type,"xhr:",xhr);
        }
    });
    

    相关文章

      网友评论

        本文标题:关于Ajax需要知道的部分

        本文链接:https://www.haomeiwen.com/subject/pwtzxxtx.html