Ajax

一.  什么是Ajax

Ajax：asynchronous javascript and XML (异步JavaScript和XML)
其是可以与服务器进行（异步/同步）交换的技术之一。
Ajax的语言载体是JavaScript。其是浏览器的一个技术。
最大特点：页面不刷新。
XMLHttpRequest是Ajax的官方名称。

二. Ajax的使用

2.1  创建Ajax对象

2.1.1    主流浏览器方式
火狐、Google、苹果Safari、Opera、包括IE7以上版本的浏览器：

2.1.2    老版本的 IE （IE5 和 IE6）使用 ActiveX 对象：

2.1.3      为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

2.2  发起对服务器的请求

2.2.1 步骤

①创建新的http请求
xhr.open(请求方式get/post,url请求地址)；
②发送请求
xhr.send(get->nunll/post->给服务器传递的信息);

2.2.2  GET 请求

一个简单的 GET 请求：

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

2.2.3  POST 请求

一个简单 POST 请求：

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

2.3  异步 – True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

2.3.1 Async = true

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

2.3.2 Async = false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

三.  Ajax接收服务器返回的信息

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

3.1  responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

3.2  responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

请求 books.xml 文件，并解析响应：

3.3  onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

3.4  使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

四、 请求方式

4.1 post与get请求方式的不同

• 1.传输数据量的不同
  get：受限于浏览器，大多数浏览器限制在2KB;
  post：原则没限制，php.ini对其限制为8MB;
• 2.数据安全
  get：明文传输，不安全；
  post：加密传输，相对较安全；
• 3.数据传输形式不一样
  get：URL地址后面以请求字符串形式传递参数，如：index.php?name=tom&age=10
  蓝色部分为请求字符，就是一些“名-值”对，中间使用”&”符号链接。
  post：模拟form表单，把数据以XML形式传递给服务器。

4.2 get请求需要注意的两个地方

• 1.在URL地址后面以请求字符串形式传递参数
• 2.对中文、=、&等特殊字符的处理

4.2.1  对特殊信息的处理

在浏览器里通过get参数传递一些特殊符号信息会被误解混淆，例如：’&’、’=’等。
为了避免特殊符号被误解产生歧义，需要对其进行编码处理。

• 1. 在php里面可以通过函数url_encode()/url_decode()对特殊符号进行编码、反编码处理。
  （url_encode()可以把中文转变为浏览器可以识别的信息。编码后的信息为 %号后接两个十六进制数）
• 2. 在JavaScript里面可以用过encodeURIComponent()对特殊符号进行编码。

4.2.2  特殊字符URL编码列表

4.3 post请求需要注意的四个地方

• 1.给服务器传递数据需要调用send（请求字符串数据）方法。
• 2.调用方法setRequestHeader()把传递的数据组织为XML格式（模仿form表单传递数据）。
• 3.传递的中文信息无需编码，特殊符号像’&’、’=’等 仍需要编码。
• 4.该方式请求的同时也可以传递get参数信息，同样使用$_GET接收该信息。

总结