AJAX总结

最近学习使用AJAX来获取后台数据，通过使用AJAX我们可以实现页面无刷新自动获取最新数据，是一种非常实用的创建快速动态网页的技术。在这里我总结了一些AJAX的知识点来供大家学习与参考。通过运用AJAX实时获取后台数据做了一个模拟聊天室。

1.png

1.AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
2.AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
3.AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
4.AJAX的核心对象为XMLHTTPRequest。
5.AJAX中的异步请求是同时做多件事，速度快，同步请求是只做一件事，速度慢。多用异步请求，只有在少数情况必须需要前面的数据内容才能运行的情况下用同步请求。

至于更多的详细的知识点可以看我上一篇博客总结的一些AJAX面试题。

下面是AJAX的核心步骤。

"GET"请求的ajax核心四步
第一步：创建对象

var xhr = new XMLHttpRequest();

第二步：准备好需要发送请求的方式、地址、和是否是同步异步

xhr.open("GET", "http://localhost:8080/ajax/person", true);

第三步：发送请求

xhr.send();

第四步：获取数据,先判断是否获取到数据，str为获取到的后台数据为字符串，需要将其转化为JSON形式来获取其中的具体数据。

xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var str = xhr.responseText;
            var obj = JSON.parse(str);
    }
}

"POST"请求的ajax核心五步
第一步：创建对象

var xhr = new XMLHttpRequest();

第二步：准备好需要发送请求的方式、地址、和是否是同步异步

xhr.open("POST", "http://localhost:8080/ajax/football", true);

第三步：POST需要使用XHR来模仿表单提交

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

第四步：发送请求,post请求发送的数据是放在send方法中传递的。

xhr.send("pageNo=1");

第五步：获取数据,先判断是否获取到数据，str为获取到的后台数据为字符串，需要将其转化为JSON形式来获取其中的具体数据。

xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var str = xhr.responseText;
            var obj = JSON.parse(str);
    }
}