原生JS实现AJXA及Ajax的封装

**

原生JS实现AJXA及Ajax的封装

**

1、’原生JS实现Ajax

代码：

            //获取XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            //打开服务器端的请求
            xhr.open("GET","http://www.softeem.top:8080/music/list",true);
            //发送请求
            xhr.send();
            //当请求状态发生变化是，执行回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4&&xhr.status === 200) {
                        let data = xhr.responseText;
                       //处理数据
                       console.log(data);
                }
            }
//如果请求需要携带数据：
	//GET请求这直接在请求地址里面跟参数
	//POST请求则将请求参数写到send方法中。（name=zs&pwd=123）

2、Ajax的封装

代码：

function  $ajax(method,url,data,callback) {
    var params = formsParams(data);
    var xmlHttpRequest = new XMLHttpRequest();
	//判断请求类型，分发方法
    if ('get' === method.toLowerCase()){
        xmlHttpRequest.open(method,url+"?"+params,true);
        xmlHttpRequest.send();
    }
    if('post' === method.toLowerCase()){
        xmlHttpRequest.open(method,url,true);
        xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlHttpRequest.send(params);
    }
    xmlHttpRequest.onreadystatechange = function () {
        if (xmlHttpRequest.readyState === 4&&xmlHttpRequest.status === 200){
            callback(xmlHttpRequest.responseText);
        }
    };
//将传入的字符串，转变为Ajax能识别的样子（即name=zs&pwd=123）
    function formsParams(d){
        var arr = [];
        for(var key in d){
            arr.push(key + "=" + d[key]);
        }
        return arr.join("&");
    }
}

封装的使用

	<script src="AjaxUtil.js"></script>
    <script>
      
        $ajax(method,url,data,function (data) {
            alert(data);
        })
     </script>
//data 数据的样式  {"method":method,"sno":name,"password":pwd}