AJAX => 入门学习

学习内容

Ajax全接触(慕课网)

---

学习网站

1. Ajax全接触
2. w3school - AJAX 教程
3. 深入浅出HTTP请求

---

学习笔记

1. 什么是Ajax?

Ajax全称Asynchronous JavaScript and XML（异步的JavaScript和XML）;Ajax不是编程语言，仅仅是一种在无需重新加载整个页面情况下更新部分网页的技术。

2. 同步和异步：

简单来说，同步即严格按照顺序执行，异步即不按照顺序执行。如下所示：

function do() {    openDoor();    intoRoom();    // 同步：先开门，才能进屋}function do() {    setTimeout(openDoor(), 10000);    intoRoom();    // 异步：钥匙落在屋里，要先翻墙进屋拿钥匙才能开门}

Ajax技术，即运用XMLHttpRequest对象和web服务器来进行数据的异步交换。

3. HTTP（HyperText Transfer Protocol）概念

HTTP是一种无状态的协议：无状态指的是不建立持久的连接。

3.1 一个完整的HTTP的请求过程，通常有一下七个步骤：

一、建立#连接（TCP是因特网中的传输层协议，使用三次握手协议建立连接）二、浏览器向服务器发送请求命令三、浏览器发送请求头信息四、服务器应答五、服务器发送应答头信息六、服务器向浏览器发送数据七、服务器关闭TCP连接

3.2 一个HTTP请求组成：

<request-line> /* 请求行：包含请求方法、要访问的资源、使用的HTTP版本 */<headers> /* 请求头：客户端环境信息，身份验证等等信息 */<blank line> /* 空行，空行之后为请求正文 */[<request-body>] /* 请求体，也就是请求正文： 包含客户提交的查询字符串信息等等 */

请求方法：HTTP1.1支持7种，GET、POST、HEAD、OPTIONS、PUT、DELETE和TARCE。在Internet应用中，最常用的方法是GET和POST。他们的区别是：
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量有限制，一般在2000字符
POST：一般用于修改服务器上的资源，对所发送信息的数量没有限制

3.3 一个HTTP响应组成：

<status-line> /* 状态行：返回状态码显示请求成功还是失败 */<headers> /* 响应头：包含服务器类型，日期时间，内容类型，长度等 */<blank line> /* 空行，空行之后为响应体 */[<response-body>] /* 响应体*/

响应代码：
* 1XX 信息类，表示收到浏览器的请求，正在进一步处理。
* 2XX 成功，例如：200 OK， 找到了该资源，并且一切正常。
* 3XX 重定向，表示没有成功，例如：304 NOT MODIFIED，该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。
* 4XX 客户端错误，例如：404 NOT FOUND， 意味着在指定的位置不存在所申请的资源。
* 5XX 服务端错误，例如：500，表示服务器不能完成对请求的处理。

3.4 安全和幂等

所谓安全的意味着该操作用于获取信息而非修改信息。幂等的意味着对同一 URL 的多个请求应该返回同样的结果。完整的定义并不像看起来那样严格。换句话说，GET 请求一般不应产生副作用。从根本上讲，其目标是当用户打开一个链接时，她可以确信从自身的角度来看没有改变资源。比如，新闻站点的头版不断更新。虽然第二次请求会返回不同的一批新闻，该操作仍然被认为是安全的和幂等的，因为它总是返回当前的新闻。反之亦然。POST 请求就不那么轻松了。POST 表示可能改变服务器上的资源的请求。仍然以新闻站点为例，读者对文章的注解应该通过 POST 请求实现，因为在注解提交之后站点已经不同了（比方说文章下面出现一条注解）。

4. XMLHttpRequest对象

var request = new XMLHttpRequest();

请求 open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求：
method：请求的类型；GET 或 POST；
url：文件在服务器上的位置；
async：true（异步）或 false（同步） send(string) 将请求发送到服务器：
string：仅用于 POST 请求 setRequestHeader(header,value) 向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值

---

响应 responseText 获得字符串形式的响应数据 responseXML 获得 XML 形式的响应数据

---

onreadystatechange 事件 onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪 status 状态码:当 readyState 等于 4 且状态为 200 时，表示响应已就绪

一个典型的Ajax

var request = new XMLHTTPRequest();request.open(“GET”, “create.PHP”, true);request.setRequestHeader(“Content-type”, “application/x-www-form-urlendecoded”);// 此行必须放在open()与send()之间request.send();request.onreadystatechange = function() {    if (request.readyState === 4 && request.status === 200) {        // do something    }}