通用封装ajax代码

Posted 2022-12-14 曹豆芽

通用封装ajax代码

封装代码

function Ajax(obj)
    var ajax = null;
    if(window.XMLHttpRequest)
        ajax = new XMLHttpRequest();
    else if(window.ActiveXobject)
        ajax = new ActiveXobject("Microsoft.XMLHTTP");
    else
        alert("请升级浏览器");
        return false;
    
    obj.method = obj.method || "get"; // 默认发送get请求
    if(!obj.url)
       throw new Error("请求地址不能为空");
    
    if(Object.prototype.toString.call(obj.method) != "[object String]")
       throw new Error("请求地址必须是字符串");
    else if(obj.method != "get" && obj.method != "post")
        throw new Error("请求地址必须是get或者是post");
    
    if(Object.prototype.toString.call(obj.url) != "[object String]")
       throw new Error("请求地址必须是字符串");
    
    if(obj.async == "undefined")
    	   obj.async = true;
    
    if(Object.prototype.toString.call(obj.async) != "[object Boolean]")
       throw new Error("是否异步的参数必须是布尔值");
    
     if(obj.data != "undefined")
         if(Object.prototype.toString.call(obj.data) == "[object String]")
             if(obj.data.indexOf("&")>=0)
                 if(obj.method == "get")
                    obj.url += "?"+obj.data;
                 else if(obj.method == "post")
                     var str = obj.data;
                 
             else
                 throw new Error("携带的参数格式不对，字符串必须是带'='符号的键值对");
             
         else if(Object.prototype.toString.call(obj.data) == "[object Object]")
         	 var str = '';
             for(var attr in obj.data)
                 str += attr + "=" + obj.data[attr];
             
         else
             throw new Error("携带的参数格式不对，需要字符串或者对象");
         
    
    if(obj.success == "undefined")
        obj.success = function(res)
    
    if(obj.error == "undefined")
        obj.error = function()
    
    if(Object.prototype.toString.call(obj.success) != "[object Function]" || Object.prototype.toString.call(obj.error) != "[object Function]")
        throw new Error("回调函数必须是函数");
    
    ajax.open(obj.method,obj.url,obj.async)
    ajax.onreadystatechange=function()
        if(ajax.readyState == 4)
            if(ajax.status>=200 && ajax.status<300)
                var res;
                switch(obj.dataType)
                    case undefined:
                    case "json":
                        res = JSON.parse(ajax.responseText);
                    break;
                    case "string":
                        res = ajax.responseText;
                    break;
                    case "xml":
                        res = ajax.responseXML;
                    break;
                    default:
                        throw new Error("期望的数据格式参数传入错误！");
                	
               obj.success(res);
            else
                obj.error();
            
        
    
    if(obj.method=='post')
        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
		if(obj.data != undefined)
			ajax.send(str);
			return;
		
    
    ajax.send();

调用

var pname = document.querySelector("[name='province']").value.trim();
    var response = Ajax(
        data:province:pname,
        url:"postAjax.php",
        method:"post",
        asyn:true,
        success:function(res)
            var arr = JSON.parse(res);
            var ul = document.querySelector("ul");
            ul.innerhtml = '';
            for(var i=0;i<arr.length;i++)
                var li = document.createElement("li");
                li.innerText = arr[i];
                ul.appendChild(li);
            
        
    );

get和post的区别：

1. get请求的数据展示在地址栏，post在http请求的请求主体中
2. get请求的数据长度有限制，post没有限制，除非在服务器设置限制
3. get请求的数据格式有限制，必须是url编码的，post的数据没有限制
4. get请求不如post安全
5. get请求容易有缓存，post没有缓存