堆栈花园的AJAX学习备忘录——AJAX初步

(本文不使用JQuery，了解原始的AJAX)

一、什么是AJAX？

AJAX是一个缩写，四个字母分别取的四个单词的开头字母

• Asynchronous JavaScript and XML（异步的JavsScript 和 XML）

二、AJAX有什么用？

在了解AJAX的作用之前，有必要先了解一下什么叫“全局刷新”和“局部刷新”。

• 全局刷新：整个浏览器被新数据覆盖。这个过程中网络传输了大量的数据，浏览器需要重新加载，重新渲染页面。

• 局部刷新：在浏览器的内部向后端服务器发起请求，获取数据，改变页面中的部分内容。其他部分的页面无需重新加载和渲染。对比全局刷新，网络中需要传输的数据量少，给用户的体验更好。

而AJAX就是用来实现局部刷新的一种方法。局部刷新使用的核心对象是异步对象（XMLHttpRequest），这个对象是存在浏览器内存中的，使用JavaScript语法创建和使用XMLHttpRequest对象。

现在，在AJAX中传输数据格式，用JSON比XML更多一些。

三、如何使用AJAX？

• 使用AJAX概括一下有四步

1. 创建异步对象

var xmlHttp = new XMLHttpRequest();

2. 给异步对象绑定事件

xmlHttp.onreadystatechange = function(){
}

• onreadystatechange：当异步对象发起请求，获取了数据，都会触发这个事件。这个事件需要指定一个函数，在函数中处理。

• 绑定事件后需要指定一个函数处理请求的状态变化。
  异步对象的属性readyState表示异步对象请求的状态变化。
  0:创建异步对象时，new XMLHttpRequest();
  1:初始化异步请求对象，xmlHttp.open();
  2:发送请求，xmlHttp.send();
  3:从服务器端获取了数据
  4:异步对象把接收数据处理完成后。此时，开发人员要处理数据（更新当前页面）。
• 异步对象的status属性，表示网络请求的状况，200,404,500，需要是当status是200时，表示网络请求是成功的。

当请求的状态变化是 “4” 并且网络请求状况是 “200” 时，我们要处理服务器端返回的数据，使用异步对象的responseText属性。

if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data = xmlHttp.responseText;
//data就是我们从服务器拿到的数据
//接下来根据业务开始处理数据
}

3. 初始化异步请求对象

xmlHttp.open(请求方式get/post,
"服务器端的访问地址",
异步/同步请求(一般是true，也就是异步));

4.使用异步对象发送请求

xmlHttp.send();

• 疑问：为什么在第二步处理从服务器端获取的数据？异步对象在第四步才发送请求，逻辑上说不通啊！

解答：因为当请求的状态发生变化时，也就是readyState的值发生变化时，异步对象会自动调用onreadystatechange事件对应的函数（回调）。也就是说代码走到了第三步或者第四步，他都会自动去调用一次我们写的函数，但是由于函数中有一个if语句，所以只有在第四步之后，从服务器返回了我们需要的数据，函数才会真正执行代码，网页才会发生我们需要的变化。当然我们也可以在if语句前加个alert(readyState);观察一下请求状态的变化过程。