什么是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;

事件

(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',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}