AJAX详解

什么是AJAX

Asynchronous Javascript And XML 取四个单词的首字母 AJAX，读作['eidʒæks]，汉译为阿贾克斯。

Asynchronous [ei’siŋkrənəs] adj. 异步的
async [əˈsɪŋk] abbr. 异步

---

AJAX能做什么

在不刷新整个页面的情况下，与服务器交互(发送与接收数据)。

---

使用场景

从上面的AJAX能做什么，应该能得到启发，只要能提高用户体验或方便开发。

---

XMLHttpRequest对象 - AJAX的核心

XMLHttpRequest对象是AJAX的核心。所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象，老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象。

创建XMLHttpRequest对象

var xmlhttp = null;if (window.XMLHttpRequest) {    // for IE7+, Firefox, Chrome, Opera, Safari    xmlhttp = new XMLHttpRequest();} else {    // for IE6, IE5    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');}

---

XMLHttpRequest对象的属性、方法与事件

属性

(1) readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

(2) status

200: “OK”
404: 未找到页面

(3 ) responseText

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

(4) responseXML

获得 XML 形式的响应数据(是XML文件，不是XML形式的字符串)。

方法

(1) open(method, url, async)

method：请求的类型，取值为’GET’ 或 ‘POST’
url：被请求的服务器文件
async：’true’（异步）或 ‘false’（同步）

(2) send(string)

如果method为’GET’，则参数写在url中，send()方法不能有参数
如果method为’POST’，则参数作为send()的参数
如果async为’true’，则在onreadystatechange事件函数中处理数据
如果async为’false’，则不要编写 onreadystatechange 函数，把代码放到 send() 语句后面即可

// 同步xmlhttp.open('GET', 'a.php', false);xmlhttp.send();document.getElementById('myDiv').innerHTML = xmlhttp.responseText;// 异步xmlhttp.onreadystatechange = function () {    if (xmlhttp.readyState==4 && xmlhttp.status==200) {        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;    }}xmlhttp.open("GET", "test1.txt", true);xmlhttp.send();

事件

(1) onreadystatechange

每当 readyState 属性改变时，就会解发这个事件

---

GET的问题

(1) GET有缓存现象

解决办法

xmlhttp.open(‘GET’, ‘a.php?t=’ + Math.random(),true);
xmlhttp.send();

(2) GET有数据量限制
(3) GET没有POST安全

---

POST的注意事项

如果需要像 HTML 表单那样 POST 数据，需要使用 setRequestHeader() 来添加 HTTP 头。

xmlhttp.open('POST', 'a.php', true);xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');xmlhttp.send('name=weiheli&age=26');

setRequestHeader(header,value)

向请求添加 HTTP 头
header: 规定头的名称
value: 规定头的值

---

JSONP

JSON with Padding 简称 JSONP。

由于同源策略，js有跨域问题，但HTML的 <script> 标签中的src却没有这个限制，JSONP正是利用了这一点。

一个示例
HTML页面

<script>    function myFn(data) {        console.log(data);    }</script><script src="003.php?callback=myFn"></script>

003.php

<?php    $myFn = $_GET['callback'];    $arr = array('name' => 'weiheli', 'age' => 26);    echo $myFn . '(' . json_encode($arr) . ')';?>

执行结果

 Object {name="weiheli",  age=26}

---