以下文章为根据慕课网：Ajax全接触整理而得的文字笔记版，以便随时翻阅学习。但是本文未引用视频课程中的示例，使用示例将在今后的文章中单独写出。且最后一章《处理跨域方式》不做整理，如需要，请上慕课网官网进行学习。
一. 课程介绍
1. 什么是 Ajax？
- 异步的 JavaScript 和 XML ( Asynchronous JavaScript 和 XML )。
- Ajax 不是某种编程语言，而是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。通过在后台跟服务器进行少量的数据交换，网页就可以实现异部局部更新。
- Ajax 改变了 WEB 开发的格局。
2. 预备知识
基本的 HTML、CSS、JS知识储备。
二. Ajax 概念介绍
1. 同步和异步
1）概念
在 Ajax 出现之前，网页的数据请求是同步进行的，以表单为例，输入完所有的信息，才会向服务器请求数据，然后服务器对信息进行处理并刷新整个页面，进行信息反馈
Ajax 实现了异步数据传输，当我表单内的一个信息填写完成后，客户端就会向服务器提交信息，进行信息处理并返回处理结果，在此时我们可以继续进行其他信息的填写
2）异步的产生
异步的产生在技术层面是由于新对象的出现XMLHttpRequest。这个对象的出现可以在不加载整个页面的情况下，使后台和服务器进行数据的交换。
3）异步的使用
- 运用 HTML 和 CSS 来实现页面，表达信息
- 运用 XMLHttpRequest 和 WEB 服务器进行数据的异步交换
- 运用 JavaScript 操作 DOM，实现动态局部更新
2. XMLHttpRequest ( XHR ) 对象创建
实例化一个 XHR 对象
var request = new XMLHttpRequest();
现在的浏览器基本都支持 XHR 对象，但是 ie6以下不支持，所以我们可以输入如下代码进行兼容
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6,IE5
}
当我们 new 了一个 XHR 对象，我们就可以进行数据请求的操作了。
3. HTTP 请求
1）HTTP 概念
http 是计算机通过网络进行通信的规则，使得浏览器可以从服务器请求信息和服务。
http 是一种无状态的协议，即不建立持久的连接。客户端向服务器提出请求，服务器作出相应，然后链接就被关闭了，这个处理过程是没有记忆的。
-
一个完整的 HTTP请求 过程，通常有下面7个步骤：
- 建立 TCP 连接
- WEB 浏览器想 WEB 服务器发送请求命令
- WEB 浏览器发送请求头信息
- WEB 服务器应答
- WEB 服务器发送应答头信息
- WEB 服务器向浏览器发送数据
- WEB 服务器关闭 TCP 链接
-
一个 HTTP 请求一般由四部分组成：
- HTTP 请求的方法或动作，比如是 GET 还是 POST 请求
- 正在请求的 URL，总得知道请求的地址是什么吧
- 请求头，包含一些客户端环境信息，身份验证等信息
- 请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等
这是一个完整的 HTTP 请求样例
GET 是请求方法
login.php 是请求地址
中间部分是请求头
最后一行是请求体
2）GET 与 POST
- GET：一般用于信息获取，使用URL 传递参数，对所发送信息的数量也有限制，一般在2000个字符
- POST：一般用于修改服务器上的资源，对所发送的信息的数量无限制，是不可见的
3）HTTP 响应
一个 HTTP 响应一般由三个部分组成：
- 一个数字和文字组成的状态码
- 响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等
-
响应体，也就是响应正文
HTTP 响应样例
4）HTTP 响应的状态码
HTTP 的状态码由三位数字构成，其中首位数字定义了状态码的类型：
HTTP 响应状态码
4. XMLHttpRequest 发送请求
之前我们知道了如何创建一个 XHR 对象，现在我们来看看如何用这个 XHR 对象发送请求。
XHR 发送请求有两个常用的方法需要介绍：
- open(method,url,async)
- method：get 或者 post
- url：请求地址（相对或绝对）
- async：同步请求或者默认异步请求（true）
- send(string)：把请求发送到服务器
-
send 的时候参数实际上是拼接在 url 中的，所以可以不填写
示例
-
5. XMLHttpRequest 取得响应
以下是获取服务器响应的一些方式语句：
- responseText：获得字符串形式的相应数据
- responseXML：获得 XML 形式的相应数据
- status 和 statusText：以数字和文本的形式返回 HTTP 状态码
- getAllResponseHeader()：获取所有的响应报头
- getResponseHeader()：查询响应中的某个字段的值
以上的方式只是获取响应值，下面的属性是在响应成功的时候得到通知：
- readyState 属性，我们在响应过程中监听 readyState 值得变化，获取到响应所进行到的步骤
- 0：请求未初始化，open 还没有调用
- 1：服务器连接已建立，open 已经调用了
- 2：请求已接收，也就是接收到信息头了
- 3：请求处理中，也就是接收到响应主体了
- 4：请求已完成，且相应已就绪，也就是响应完成了（我们所注意的属性值）
监听方式：
var request = new XMLHttpRequest();
request.open("GET", "get.php", true);
request.send();
request.onreadystatechange = function (){
if(request.readyState === 4 && request.status === 200){
// 做一些事情
}
}
以上也是一个典型的 XHR 建立 Ajax 对象的基本步骤。
三. Ajax 的简单例子(Ajax + PHP)
在这里由于配置环境等的不同，本文中并未直接采用视频中的例子进行说明，而是使用了自己的例子进行参考：
四. JSON 格式
1. JSON 基本概念
1）JSON 基本概念
- JSON：JavaScript 对象表示法( JavaScript Object Notation )
- JSON 是储存和交换文本信息的语法，类似 XML。它采用键值对的方式来组织，已与人们阅读和编写，同时也易于机器解析和生成
- JSON 是独立于语言的，也就是说不管是什么语言，都可以解析 JSON，只要按照 JSON 的格式来就行
2）JSON 与 XML 比较
- JSON 的长度与 XML 比较起来很短小
- JSON 的读写速度更快
- JSON 可以使用 JavaScript 内建的方法直接进行解析，转换成 JavaScript 对象，非常方便
3）JSON 语法规则
-
JSON 数据的书写格式是：名称 / 值对
名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，比如：
"name":"郭静"
-
JSON 的值可以是下面这些类型
- 数字（整数或者浮点数），比如123，1.23
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
{
"staff":[
{"name":"洪七", "age":70},
{"name":"郭静", "age":35},
{"name":"黄蓉", "age":30}
]
}
2. JSON 解析、格式化和校验工具
1）JSON 解析
- eval方法 和 JSON.parse方法
- 在代码中使用 eval 是很危险的！特别是用它执行第三方的 JSON 数据（其中可能包含恶意代码）时，尽可能使用 JSON.parse() 方法解析字符串本身，该方法还可以捕捉 JSON 中的语法错误。
控制台中两种方式解析 JSON 的演示
注：在控制台，eval 不会判断字符串是否合法，而且各种方法会直接执行，这是非常危险，而且应该避免发生的。所以尽量不使用 eval 方法。在实际使用中，尽可能地使用 JSON.parse()。
2）在线 JSON 校验工具
输入 JSON 代码即可返回代码中的错误。
具体使用略，详见视频。
五. jQuery 中的 AJAX
用 jQuery 实现 Ajax
通常我们不会直接用 JS 实现 Ajax 效果，而是采用第三方库，比如 jQuery。JQuery 已经封装了 Ajax 的方法。
jQuery.ajax([settings])
- type：类型，“POST”或者“GET”，默认为“GET”
- url：发送请求的地址
- data：是一个对象，连同请求发送到服务器的数据
- dataType：预期服务器返回的类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，一般我们采用 JSON 格式，可以设置为“json”
- success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串
- error：是一个方法，请求失败时调用此函数。传入 XMLHttpRequest 对象
这是一个 jQuery 创建的 Ajax 对象在留言板示例中的使用
由于本文整理时并未引用视频中的示例
所以将会在之后的文章中单做讲解
网友评论