美文网首页
原生JS编写Ajax请求

原生JS编写Ajax请求

作者: 夏日清风_期待 | 来源:发表于2017-06-28 17:21 被阅读0次

    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请求

          本文链接:https://www.haomeiwen.com/subject/iyjscxtx.html