AJAX

一、什么是AJAX？

AJAX 就是Asynchronous Javascript And XML 的简称，也就是 异步传输 + JS +XML。

AJAX 通过和服务器进行局部数据交换，使网页在不加载整个页面的情况下，实现异步更新。

（异步就是指：向服务器发送请求的时候，我们不必等着结果，而是可以同时做其他事情，等到有了结果再来处理这个事情）

二、创建XMLHttpRequest对象

XMLHttpRequest用于在后台与服务器交换数据，实现对网页的异步更新，所有浏览器均支持，只是IE5 和 IE6需要使用ActiveX对象。
创建对象语法：

let variable = new XMLHttpRequest();

实例：

let xmlhttp;
if (window.XMLHttpRequest){
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
}
else{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

三、AJAX 向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
1. open()

xmlhttp.open(method,url,async)
url参数是服务器上文件的地址。

括号内是（规定请求的类型、URL、是否异步处理请求）
2. send()

xmlhttp.send()

在POST 请求中，send方法中可以添加一串字符串send(string)

（1.）get 请求

function loadXMLDoc(){
    let req = new XMLHttpRequest();
    req.onreadystatechange = ()=>{
        console.log("---->", req.readyState, req.status);
        if (req.readyState === 4 && req.status === 200){
            document.getElementById("myDiv").innerHTML = req.responseText;
        }
    };
    req.open("GET","/try/ajax/ajax_info.txt",true);
    req.send();
}

（2.）post请求

function loadXMLDoc() {
    let xml = new XMLHttpRequest();
    xml.onreadystatechange = ()=> {
        if (xml.readyState === 4 && xml.status === 200) {
            document.getElementById("myDiv").innerHTML = xml.responseText;
        }
    };
    xml.open("POST","/try/ajax/demo_post2.php",true);
    xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xml.send("fname=zhang&lname=anguo");
}

• 与get请求相比，post请求多了setRequestHeader()方法，以及在send()方法中多了一串字符串。
• setRequestHeader(key,value)，key就是规定头的名称，value就是规定头的值。