ajax

作者: Issac357 | 来源:发表于2017-10-23 08:57 被阅读0次

    AJAX即“AsynchronousJavascript And XML”(异步JavaScript和XML),是指一种创建交互式[网页]
    应用的网页开发技术。
    AJAX = 异步 [JavaScript]和[XML]([标准通用标记语言])的子集)。
    AJAX 是一种用于创建快速动态网页的技术。
    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。[1]

    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

    
    // 函数封装的是代码,采用面向对象的形式封装
    
    (function () {
    
    var a = 100;
    
    
    // 暴露出ajax接口
    ajax = window.ajax = {}
    
    // 增加1个方法: get方法
    /*
     * 参数:
     *   obj 是1个对象,代表参数的集合,里面有很多参数,如下所示:
     *      url         请求的地址与参数
     *      data        发送的数据
     *      async       是否是同步,  true / false
     *      fail        失败的处理回调函数
     *      success     成功的处理回调函数
     */
    ajax.get = function(obj) {
        
        if (obj.async == undefined) {
            obj.async = true;
        }
        
        if (obj.data == undefined) {
            obj.data = "";
        }
        
        var xhr = new XMLHttpRequest();
        
        var url = obj.url;
        url += "?"
        url += translate(obj.data);
        function translate(obj){
                    var str = ""
                    for(var i in obj){
                        str += i
                        str += "="
                        str += encodeURIComponent(obj[i])
                        str += "&"
                    }
                    str = str.substring(0,str.length-1)
                    return str
                }
        
        xhr.open("GET", url, obj.async);
        
        xhr.send()
        
        if (obj.async == true) {
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    
                    if (xhr.status == 200) {
                        
                        var str = xhr.responseText;
                        obj.success && obj.success(str);
                    } else {
                        obj.fail && obj.fail();
                    }
                    
                }
                
            }
        } else {
            // 同步方式
            if (xhr.status == 200) {
                var str = xhr.responseText;
                obj.success && obj.success(str);
            } else {
                obj.fail && obj.fail();
            }
        }
        
    }
    
    
    
    // 增加1个方法: post方法
    /*
     * 参数:
     *   obj 是1个对象,代表参数的集合,里面有很多参数,如下所示:
     *      url         请求的地址与参数
     *      data        发送的数据
     *      async       是否是同步,  true / false
     *      fail        失败的处理回调函数
     *      success     成功的处理回调函数
     */
    ajax.post = function(obj) {
        
        if (obj.async == undefined) {
            obj.async = true;
        }
        
        if (obj.data == undefined) {
            obj.data = "";
        }
        
        var xhr = new XMLHttpRequest();
        
        var url = obj.url;
        
        xhr.open("POST", url, obj.async);
    
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(obj.data)
        
        if (obj.async == true) {
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    
                    if (xhr.status == 200) {
                        
                        var str = xhr.responseText;
                        obj.success && obj.success(str);
                    } else {
                        obj.fail && obj.fail();
                    }
                    
                }
                
            }
        } else {
            // 同步方式
            if (xhr.status == 200) {
                var str = xhr.responseText;
                obj.success && obj.success(str);
            } else {
                obj.fail && obj.fail();
            }
        }
        
    }
    
    })();
    
    

    相关文章

      网友评论

          本文标题:ajax

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