zoukankan      html  css  js  c++  java
  • 使用原生js写ajax

    // 使用原生js 封装ajax
    // 兼容xhr对象
    function createXHR(){
        if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器
            return new XMLHttpRequest();
        }else if(typeof ActiveXObject != "undefined"){   // IE6浏览器
            var version = [
                        "MSXML2.XMLHttp.6.0",
                        "MSXML2.XMLHttp.3.0",
                        "MSXML2.XMLHttp",
            ];
            for(var i = 0; i < version.length; i++){
                try{
                    return new ActiveXObject(version[i]);
                }catch(e){
                    //跳过
                }
            }
        }else{
            throw new Error("您的系统或浏览器不支持XHR对象!");
        }
    }
    // 转义字符
    function params(data){
        var arr = [];
        for(var i in data){
            arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
        }
        return arr.join("&");
    }
    // 封装ajax
    function ga_ajax(obj){
        var xhr = createXHR();
        obj.url = obj.url + "?rand=" + Math.random(); // 清除缓存
        obj.data = params(obj.data);      // 转义字符串
        if(obj.method === "get"){      // 判断使用的是否是get方式发送
            obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
        }
        // 异步
        if(obj.async === true){
            // 异步的时候需要触发onreadystatechange事件
            xhr.onreadystatechange = function(){
                // 执行完成
                if(xhr.readyState == 4){
                    callBack();
                }
            }
        }
        xhr.open(obj.method,obj.url,obj.async);  // false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
        if(obj.method === "post"){
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(obj.data);
        }else{
            xhr.send(null);
        }
        // xhr.abort(); // 取消异步请求
        // 同步
        if(obj.async === false){
            callBack();
        }
        // 返回数据
        function callBack(){
            // 判断是否返回正确
            if(xhr.status == 200){
                obj.success(xhr.responseText);
            }else{
                obj.Error("获取数据失败,错误代号为:"+xhr.status+"错误信息为:"+xhr.statusText);
            }
        }
    }
    
    var html = document.getElementsByTagName("html")[0];
    html.onclick = function(){
        ga_ajax({
            "method" : "post",
            "url" : "demo.php",
            "data" : {
                "name" : "gao",
                "age" : 100,
                "num" : "12346&598"
            },
            "success" : function(data){
                alert(data);
            },
            "Error" : function(text){
                alert(text);
            },
            "async" : false
        });
    }
  • 相关阅读:
    OpenStack开发基础-oslo.config
    对象的封装
    Oracle动态显示日志
    Marching squares &amp; Marching cubes
    Keil5.15使用GCC编译器链接.a库文件
    数据结构习题之树
    HDU 5358(2015多校联合训练赛第六场1006) First One (区间合并+常数优化)
    使用URL在线语音合成
    企业怎样高速搭建大数据处理系统
    http://blog.sina.com.cn/s/blog_7caae74b0100zl17.html
  • 原文地址:https://www.cnblogs.com/gaobint/p/6921768.html
Copyright © 2011-2022 走看看