js 原生ajax的封装

概念

ajax是前端常用技术，今天用原生js封装了一个ajax函数，类似于jquery库的$.ajax()函数，大家如果对jquery的ajax函数原理不太理解，可以参考这篇。

定义

var ajax=window.XMLHttpRequest? new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");

方法

1.open(method url async) 定义请求的方式 数据 同步异步
2.send(data) 发送数据
3.setsetRequestHeader() 设置请求头部

事件

onreadystatechange 服务端对请求的响应

属性

1.readyState 服务器对请求的处理进度
2.status 服务器对请求的响应
3.responseXML 获得字符串形式的响应数据
4.responseText 获得 XML 形式的响应数据

封装函数

       var param = {
                    url:"response.json", 
                    data:{"user":"wang","pswd": "123"},
                    type:"get",
                    dataType:"json",
                    success:function(data){console.log(data)},
                    error:function(){} }
function ajaxsend(obj){
var ajax=window.XMLHttpRequest    ///创建ajax对象
var url = obj.url; 
var type = obj.type;
var dataType = obj.dataType;
var data ="";                       
for(i in obj.data){
    data="&"+i+"="+obj.data[i]
    }
data.replace("&","");                   ///处理传送数据的data格式
if(type == "get"){
    ajax.open("GET",url+"?"+data,true); ///发送数据
    ajax.send(null);
}else if(type == "post"){
    ajax.open("POST",url,true);
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded") ;
    ajax.send(data);
    }//发送数据之后 ，我们需要监听服务器返回的数据 
ajax.onreadystatechange = function(){
    if(ajax.readyState == 4 ){
        console.log(ajax.status)
        if(ajax.status ===200 ){
            var result = JSON.parse(ajax.responseText);
            obj.success.call(this,result);
            obj.success(result);
                }else if(ajax.status ===404){
                    console.log("页面未找到")
                }   
            }else{
                console.log(ajax.readyState);
            }
        }
    }
ajaxsend(param);