ajax原理 - 掘金

ajax：异步javascript和XML，是指一种创建交互式网页应用的网页开发技术。

通过XmlHttpRequest对象向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM从而更新页面。

xmlhttprequest过程：

1.创建XMLhttpRequest对象

2.使用open方法设置和服务器的交互信息

3.如果默认是json格式,那就可以不设置requestHeader,默认的发送的是json格式数据

4.发送请求

5.如果请求完成，并响应完成，获取到响应数据

function getRequest(){
    //1.创建XMLhttpRequest对象
    var request=new XMLHttpRequest();
    //2.使用open方法设置和服务器的交互信息
    request.open('get','https://api.muxiaoguo.cn/api/lishijr');
    //3.如果默认是json格式,那就可以不设置requestHeader,这是默认的发送json格式数据
    request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    //4.发送请求
    request.send();
    //5.如果请求完成，并响应完成，获取到响应数据
    request.onreadystatechange=function (){
        if(request.readyState===4&&request.status===200){
            console.log(JSON.parse(request.responseText));
        }
    }
}

发送json格式数据
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

发送表单数据
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');

发送纯文本(不指定Content-type时，此是默认值)
request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');

发送html文本
request.setRequestHeader('Content-type', 'text/html; charset=utf-8');

responseText：作为响应体返回的文本。

responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。

status：响应的 HTTP 状态。

statusText：响应的 HTTP 状态描述。

readyState：返回HTTP请求状态 0 open()尚未调用 UNSENT 1 open()已调用 OPENED 2 接收到头信息 HEADERS_RECEIVED 3 接收到响应主体 LOADING 4 响应完成 DONE

readystatechange 请求状态改变事件 当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

if(request.readyState === 4 && request.status === 200){}