前端实现ajax完成一次请求

103 阅读1分钟

ajax用于实现与后台数据的交互,现在经常使用axios。

Ajax的使用特点主要是包括三部分,

第一,生成XMLHttpRequest对象;

第二,发出请求;

第三,处理请求返回的结果。

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    //onreadystatechange,readyState,status是XMLHttpRequest对象的三大属性,
    //当readyState属性发生变化时,会自动调用onreadystatechange
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
       // if (xmlhttp.readyState==4 && xmlhttp.status==0)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            alert(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET","1.txt",true);
    //open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。
    //method:请求的类型;GET 或 POST
    //url:文件在服务器上的位置
    //async:true(异步)或 false(同步)
    xmlhttp.send();
}

注意:

1.GET方式在一定时间内,是不会真正重新发送请求的,它会优先使用缓存。

2.如果希望传递参数,那么,使用GET方式,直接在URL中把参数的值加上就行了;如果使用POST方式,相当于是使用表单传递数据,需要额外地设置HTTP头。然后把参数通过send方法传递出去。

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");//传递参数

3.默认async为true(异步)也就是可以先执行其他部分,如果为false,则为同步,即只有当请求结束才可以执行其他的代码。

参考链接:zhuanlan.zhihu.com/p/52546872