从下面这个简单的AJAX实例中，一步一步来分析代码每一部分的作用及功能，并对相关的名词进行了解释。
一个简单的AJAX实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
1.创建一个XMLHttpRequest对象
XMLHttpRequest是什么？
-
XMLHttpRequest是AJAX技术的核心，用于在后台与服务器交换数据。XHR对象为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息。 - 我们可以通过使用XHR对象获取新数据，再通过DOM将新数据插入到页面中。
XMLHttpRequest适用的版本
- 所有现代浏览器均支持
XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。
创建XHR
var xmlhttp;
if(window.XMLHttpRequest){ //兼容大部分浏览器
xmlhttp = new XMLHttpRequest();
}else{ //兼容IE5，IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2-1.向服务器发送请求
- 在使用XMLHttpRequest对象时，要调用的第一个方法是open()
xmlhttp.open("GET" , "ajax_info.txt" , true);
xmlhttp.send(null);
- 调用open()方法并不会真正的发送请求，而只是启动一个请求以备发送。要发送特定的请求，必须调用send()方法。
- Send()方法接受一个参数，即要作为请求主体发送的数据。如果不需要请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必须的。
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） |
| send(string) | 将请求发送到服务器。 |
string：仅用于 POST 请求
- GET和POST的选择
与POST相比，GET更简单更快，并且在大部分情况下都能用。
然而在以下情况中，请使用POST请求。
1.无法使用缓存文件（更新服务器上的文件或数据库）
2.向服务器发送大量数据（POST没有数据量限制）
3.发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
3-1.服务器响应
-
在收到响应后，响应的数据会自动填充XHR对象的以下几个属性。
- responseText：作为响应主体被返回的文本。
- responseXML：如果来自服务器的响应是XML，则需要作为XML对象进行解析，此属性中将保存包含着响应数据的DOM文档。
- status：响应的HTTP状态的说明
- statusText：HTTP状态的说明
-
responseText
responseText 属性返回字符串形式的响应，因此您可以这样使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- responseXML 属性
假设我们要获取book.xml文件中的artist内容：
var xmlDoc=xmlhttp.responseXML;
var txt="";
var x=xmlDoc.getElementsByTagName("ARTIST");
for (var i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
3-2.onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发onreadystatechange 事件。
下面是XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 |
| 0: 请求未初始化 | |
| 1: 服务器连接已建立 | |
| 2: 请求已接收 | |
| 3: 请求处理中 | |
| 4: 请求已完成，且响应已就绪 | |
| status | 200: "OK" |
| 404: 未找到页面 |
在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态代码为200作为成功的标志。
但当我们需要发送异步请求时，还得检测XHR对象的readyState属性，才能让JavaScript继续执行而不必等待响应。
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
与服务器进行交互
以上介绍的都是以url为txt文件的情况，当我们需要与服务器交互，通过相应的参数获取相关信息时，可以通过以下方式来编写。
- 当服务器为ASP/PHP编写时，我们用以下这个例子来解释如何与服务器之间通信。
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
当输入框为空时(str.length==0)，输入框没有内容，无任何信息可以返回，该函数清空 txtHint 占位符的内容，并退出函数。
如果输入框不为空，showHint() 函数执行以下任务：
- 创建 XMLHttpRequest 对象
- 当服务器响应就绪时执行函数
- 把请求发送到服务器上的文件
- 请注意我们向 URL 添加了一个参数 q （带有输入框的内容）
发送的url为
/try/ajax/gethint.php?q="+str，q是与服务器端交互的参数，服务器端可以通过获取q的值，来得到输入框中输入的内容，然后向客户端返回检索结果到responseText中。
网友评论