原生JS编写Ajax请求

ajax:一种请求数据的方式,不需要刷新整个页面;
ajax的技术核心是 XMLHttpRequest 对象;
ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;

    ajax({
        url: "./TestXHR.aspx",              //请求地址
        type: "POST",                       //请求方式
        data: { name: "super", age: 20 },        //请求参数
        dataType: "json",
        success: function (response, xml) {
            // 此处放成功后执行的代码
        },
        fail: function (status) {
            // 此处放失败后执行的代码
        }
    });

实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject

if(window.XMLHttpRequest){
    var xml = new XMLHttpRequest();      
}else{
    var xml = new ActiveXObject('Microsoft.XMLHttp);
}

get请求:

ajax({
    xml.open:('GET','url',true),
    xml.send(),
    xml.onreadystatechange = function(req,res){
        if(xml.readyState == 4){
            if(xml.status >= 200 && xml.status < 300 || xml.status == 304){
                  console.log("请求成功!");
            }else{
                  console.log("请求失败!");
          }
      }
}
})

POST请求:

ajax({
    xml.open:("POST",URL,true),
    xml.send(data);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xml.onreadystatechange = function(res,req){
       if(xml.readystate == 4){
            if(xml.status >= 200 && xml.status < 300 || xml.status == 304){
                console.log("请求成功!");
            }else{
                 console.log("请求失败");
            }
        }
    }
})

你可能感兴趣的:(原生JS编写Ajax请求)