AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
第一步:创建XMLHttpRequest对象
XMLHttpRequest 是 AJAX 的基础。
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均支持内建 XMLHttpRequest 对象。老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject 对象。
为了应对所有的现代浏览器,创建对象,要检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject 对象:
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
第二步:向服务器发送请求
XMLHttpRequest对象用于和服务器交换数据。
如需将请求发送到服务器,使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xhr.send();
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
send(string) | 将请求发送到服务器。
|
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
open() 方法的 url 参数是服务器上文件的地址,该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true。
通过 AJAX,JavaScript 无需等待服务器的响应,而是:
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
第三步:服务器响应
如需获得来自服务器的响应,使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
当使用 async=true 时,规定在响应处于 onreadystatechange 事件中的就绪状态时执行函数:
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.open("GET","ajax_info.txt",true);
xhr.send();
onreadystatechange 事件
当请求被发送到服务器时,需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
XMLHttpRequest 对象的三个重要的属性:
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中,规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪.
注意: onreadystatechange 事件被触发 4 次(0 - 4), 分别是: 0-1、1-2、2-3、3-4,对应着 readyState 的每个变化。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax简单例子</title>
<script>
function loadXMLDoc(){
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
};
xhr.open("GET","ajax_info.txt",true);
xhr.send();
}
</script>
</head>
<body>
<div id="myDiv"><h1>学习Ajax</h1></div>
<button οnclick="loadXMLDoc()">改变内容</button>
</body>
</html>