乐趣区

Ajax

一、什么是 Ajax
Ajax 的全称是 Asynchronous JavaScript and XML,即异步 JavaScript+XML。
二、Ajax 技术的核心
Ajax 技术的核心是 XMLHttpRequest 对象(简称 XHR),使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。XMLHttpRequest 对象的主要属性有:onreadystatechange——每次状态改变所触发事件的事件处理程序。responseText——从服务器进程返回数据的字符串形式。responseXML——从服务器进程返回的 DOM 兼容的文档数据对象。status——从服务器返回的数字代码,如 404(未找到)和 200(已就绪)。status Text——伴随状态码的字符串信息。readyState——对象状态值。
三、XHR 用法

创建 Ajax 核心对象 XMLHttpRequest(记得考虑兼容性)

向服务器发送请求

注意:POST 请求一定要设置请求头的格式内容

对于 open 方法,有几点需要注意:

URL 是相对于当前页面的路径,也可以似乎用绝对路径。
open 方法不会向服务器发送真正请求,它相当于初始化请求并准备发送。
只能向同一个域中使用相同协议和端口的 URL 发送请求,否则会因为安全原因报错。真正能够向服务器发送请求需要调用 send 方法,并仅在 POST 请求可以传入参数,不需要则发送 null,在调用 send 方法之后请求被发往服务器。

请求发往服务器,服务器根据请求生成响应(Response),传回给 XHR 对象,在收到响应后相应数据会填充到 XHR 对象的属性,有四个相关属性会被填充:

responseText——从服务器进程返回数据的字符串形式。
responseXML——从服务器进程返回的 DOM 兼容的文档数据对象。
status——从服务器返回的数字代码,如 404(未找到)和 200(已就绪)。
status Text——伴随状态码的字符串信息。

Http 状态码:1xx:指示信息 – 表示请求已接收,继续处理 2xx:成功 – 表示请求已被成功接收、理解、接受 3xx:重定向 – 要完成请求必须进行更进一步的操作 4xx:客户端错误 – 请求有语法错误或请求无法实现 5xx:服务器端错误 – 服务器未能实现合法的请求常见状态码:
200 OK // 客户端请求成功
400 Bad Request // 客户端请求有语法错误,不能被服务器所理解
401 Unauthorized // 请求未经授权,这个状态代码必须和 WWW-Authenticate 报头域一起使用
403 Forbidden // 服务器收到请求,但是拒绝提供服务
404 Not Found // 请求资源不存在,eg:输入了错误的 URL
500 Internal Server Error // 服务器发生不可预期的错误
503 Server Unavailable // 服务器当前不能处理客户端的请求,一段时间后可能恢复正常
readyState——对象状态值。对象状态值有以下几个:

0 – (未初始化) 还没有调用 send() 方法
1 – (载入) 已调用 send() 方法,正在发送请求
2 – (载入完成)send() 方法执行完成
3 – (交互) 正在解析响应内容
4 – (完成) 响应内容解析完成,可以在客户端调用了

在异步请求时,我们可以检查 XHR 对象的 readyState 属性,该属性表示请求 / 响应过程中的当前活动阶段,每当 readyState 值改变的时候都会触发一次 onreadystatechange 事件。我们可以利用这个事件检查每次 readyState 变化的值,当为 4 的时候表示所有数据准备就绪。有一点我们需要注意:必须在 open 方法之前指定 onreadtstatechange 事件处理程序。

四、GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

五、HTTP 请求

HTTP 之请求消息 Request 客户端发送一个 HTTP 请求到服务器的请求消息包括以下格式:请求行(request line)、请求头部(header)、空行和请求数据四个部分组成。

POST 请求例子
POST / HTTP1.1
Host: www.wrox.com
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley
第一部分:请求行,第一行明了是 post 请求,以及 http1.1 版本。第二部分:请求头部,第二行至第六行。第三部分:空行,第七行的空行。第四部分:请求数据,第八行。

HTTP 之响应消息 Response 一般情况下,服务器接收并处理客户端发过来的请求后会返回一个 HTTP 的响应消息。HTTP 响应也由四个部分组成,分别是:状态行、消息报头、空行和响应正文。

例子
HTTP/1.1 200 OK Date: Fri, 22 May 2009 06:07:21 GMT Content-Type: text/html; charset=UTF-8

<html>
<head></head>
<body>
<!–body goes here–>
</body>
</html>
第一部分:状态行,由 HTTP 协议版本号,状态码,状态消息 三部分组成。第一行为状态行,(HTTP/1.1)表明 HTTP 版本为 1.1 版本,状态码为 200,状态消息为(ok)第二部分:消息报头,用来说明客户端要使用的一些附加信息第二行和第三行为消息报头,Date: 生成响应的日期和时间;Content-Type: 指定了 MIME 类型的 HTML(text/html), 编码类型是 UTF- 8 第三部分:空行,消息报头后面的空行是必须的第四部分:响应正文,服务器返回给客户端的文本信息。空行后面的 html 部分为响应正文。

退出移动版