• ajax封装----原生


    /*--------------  示例一  ----------------*/
    ajax({   url:
    "https://m.baidu.com/su", //请求地址   type: "POST", //请求方式   data: { wd:'te'}, //请求参数   dataType: "json",   success: function (response, xml) {     // 此处放成功后执行的代码     console.log(response,xml);   },   error: function (status) {     console.log(status);   } }); function ajax(options) {   options = options || {};   options.type = (options.type || "GET").toUpperCase();   options.dataType = options.dataType || "json";   var params = formatParams(options.data);   //创建 - 非IE6 - 第一步   if (window.XMLHttpRequest) {     var xhr = new XMLHttpRequest();   } else { //IE6及其以下版本浏览器     var xhr = new ActiveXObject('Microsoft.XMLHTTP');   }   //接收 - 第三步   xhr.onreadystatechange = function () {     if (xhr.readyState == 4) {       var status = xhr.status;       if (status >= 200 && status < 300) {         options.success && options.success(xhr.responseText, xhr.responseXML);       } else {         options.error && options.error(status);       }     }   }   //连接 和 发送 - 第二步   if (options.type == "GET") {     xhr.open("GET", options.url + "?" + params, true);     xhr.send(null);   } else if (options.type == "POST") {     xhr.open("POST", options.url, true);     //设置表单提交时的内容类型     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");     xhr.send(params);   } } //格式化参数 function formatParams(data) {   var arr = [];   for (var name in data) {     arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));   }   arr.push(("v=" + Math.random()).replace(".",""));   return arr.join("&"); }




    /*----------- 示例二 ---------------*/
    function Ajax(type, url, data, success, failed){
        // 创建ajax对象
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP')
        }
     
        var type = type.toUpperCase();
        // 清除缓存
        var random = Math.random();
     
        if(typeof data == 'object'){
            var str = '';
            for(var key in data){
                str += key+'='+data[key]+'&';
            }
            data = str.replace(/&$/, '');
        }
     
        if(type == 'GET'){
            if(data){
                xhr.open('GET', url + '?' + data, true);
            } else {
                xhr.open('GET', url + '?t=' + random, true);
            }
            xhr.send();
     
        } else if(type == 'POST'){
            xhr.open('POST', url, true);
            // 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }
     
        // 处理返回数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    success(xhr.responseText);
                } else {
                    if(failed){
                        failed(xhr.status);
                    }
                }
            }
        }
    }
     
    // 调用
    var data= {name:'asher',sex:'male'};
    Ajax('get', './data.json', data, function(data){
        console.log(data);
    }, function(error){
        console.log(error);
    });
     
  • 相关阅读:
    (转)AWK函数
    (转)Linux ldconfig 与 ldd指令
    Linux内存管理Swap和Buffer Cache机制
    聚集索引和非聚集索引的区别有哪些
    mod_fastcgi和mod_fcgid的区别
    PHP运行模式
    详解php的安装模式---CGI,FASTCGI,php-fpm,mod_php,mod_cgi,mod_fcgid
    概念了解:CGI,FastCGI,PHP-CGI与PHP-FPM 各公共网关接口介绍
    PHP 5.3以上版本推荐使用mysqlnd驱动
    apache 静态编译和动态编译参考
  • 原文地址:https://www.cnblogs.com/zhou195/p/8086245.html
Copyright © 2020-2023  润新知