【AJAX】试论AJAX

什么是AJAX？AJAX的作用是？

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括:  HTML或XHTML , CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。

使用Ajax技术网页应用能够快速地将增量更新呈现用户界面在上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

AJAX的作用也是它与FORM表单提交相比的不同。

---

AJAX的使用

AJAX的使用分为4步：1.创建 2.配置（打开）3.响应（监听）4.发送

1.创建

var xhr = new XMLHttpRequest();

2.配置

    // xhr.open(请求方式，请求地址，是否异步)
    var url = 'http://jsonplaceholder.typicode.com/posts';
    xhr.open('get', url, true);

3.响应

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            //数据接收成功
            // console.log(JSON.parse(xhr.responseText));
            var arr = JSON.parse(xhr.responseText);
            arr.forEach(function (obj) {
                document.body.innerHTML += `
                    <div>
                        <p>${obj.title}</p>
                        <p>${obj.body}</p>
                    </div>
                `
            })
        }
    }

4.发送

xhr.send();

---

AJAX的open方法

ajax.open（1，2，3）有三个参数，参数1代表请求方式（‘get’或‘post’），参数2代表请求地址（url），参数3代表是否异步（默认异步，true时异步，false时同步）。

AJAX的响应方法onreadystatechange

使用该方法，判断readyState值。

关于readyState值：

发送后状态值 readystate

   0：对象已建立，还未初始化，未调用send

   1：open已调用，未调用send

   2：send已调用，其他未知

   3：请求已发送，正在接受数据

   4：表示数据已经收到

---

前后端的数据交换只能使用字符串，由ajax请求来的字符串为JSON字符串，需要经过JSON解析。

console.log(JSON.parse(xhr.responseText));