1、对Ajax的初步认识
1.1、 Ajax 是一种网页开发技术，（Asynchronous Javascript + XML）异步 JavaScript 和 XML；
1.2、Ajax 是异步交互，局部刷新；
1.3、Ajax 能减少服务器压力；
1.4、Ajax 能提高用户体验；
2、Ajax交互和传统交互的比较
传统交互：网页整体刷新，服务器压力大，用户体验不好；
Ajax 交互：局部刷新，服务器压力小，用户体验好；
3、Ajax核心知识
3.1 XMLHttpRequest对象的创建
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新
。
3.2、XMLHttpRequest对象请求后台
open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
send(string)：将请求发送到服务器。string：仅用于 POST 请求。
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
setRequestHeader(header,value)：向请求添加 HTTP 头。
- header: 规定头的名称
- value: 规定头的值
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
为 True 的话，表示的是异步，异步表示程序请求服务器的同时，程序可以继续执行；能提高系统的运行效率；
为 False 的话，表示同步，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。我们一般都是用 True；
3.3、XMLHttpRequest对象响应服务器
onreadystatechange 事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status
- 200: "OK"
- 404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
如需获得来自服务器的响应，需要使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述：
- responseText 获得字符串形式的响应数据。
- responseXML 获得 XML 形式的响应数据。
4、自己对Ajax局部数据交互流程的总结：
相比传统的数据交互，Ajax的亮点后台与服务器仅仅进行少量数据交换。换言之就是不重新加载整个网页的情况下，对网页的某部分进行更新。我们要实现这个功能的话，首先需要一个XMLHttpRequest的对象，这个对象是目前主流浏览器都会内置的一个对象，这个对象就是为了完成局部数据交换而存在的一个对象。为了兼容不同版本的浏览器，我们创建这个对象的时候，需要考虑到运行此程序的浏览器时候有这个对象。然后要把请求发送到后台（XMLHttpRequest对象请求后台）、后台收到请求之后进行处理、经过处理的结果在返回到前台进行展示（XMLHttpRequest对象响应服务器），大致就是一个这样的过程，这期间一直持续维护的一个对象就是XMLHttpRequest对象，这样就实现了一个完整的局部动态网页更新的功能。
原文地址：https://www.cnblogs.com/BaoZiY/p/10041344.html