原生js的AJAX封装及实例

代码优势

类数组作为参数的缺点

• 参数太多，不易使用，需要记住顺序
• 参数为空时，需要使用undefined 或者 null 占位，否则参数会错误

对象作为参数传参的优点：

• 直接使用对象，不用记参数顺序
• 参数干净

封装Ajax

    function myAjax(options) {
    	//创建实例
        var http = new XMLHttpRequest();
        // 发送请求的方式和url
        http.open(options.method, options.url);
        // 监听http对象状态发生更改
        http.onreadystatechange = function () {
            if (http.status === 200 && http.readyState === 4) {
                options.callback(http.responseText)
            }
        }
        //POST方式 表单形式的请求头
        if (options.method === 'POST') {
            http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
            http.send(encodeFormData(options.data));
        } else {
        	//发送请求
            http.send(options.data);
        }
    }

将数据转成表单编码

//表单编码
function encodeFormData(data){
				if(!data){
					return "";
				}
				var pairs = [];
				for(var name in data){
					if(!data.hasOwnProperty(name)){
						continue;
					}
					if(typeof data[name] == "function"){
						continue;
					}
					var value = data[name].toString();
					name = encodeURIComponent(name.replace("%20","+"));//编码名字
					value = encodeURIComponent(value.replace("%20","+"));//编码值
					pairs.push(name+"="+value);
				}
				return pairs.join('&');
			}

使用

        var obj = {
            method: 'GET',
            data: null,
            url: 'http://XXXXXXXXXXXXXXXXXXXXXXXXX',
            callback: function () {}
        }
        myAjax(obj)

以下奉上实例
演示：
http://www.zwq666.top/myWorkspace/AJAX/AJAX.html
（如果没数据把https改为http）
代码下载地址
https://download.csdn.net/download/qq972618478/11432047