ajx详细的学习指南Word文档下载推荐.docx
《ajx详细的学习指南Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《ajx详细的学习指南Word文档下载推荐.docx（16页珍藏版）》请在冰豆网上搜索。
/head>
body>
divid="
h2>
LetAJAXchangethistext<
/h2>
/div>
buttontype="
button"
onclick="
loadXMLDoc（）"
通过AJAX改变内容<
/button>
/body>
/html>
AJAX实例解释
上面的AJAX应用程序包含一个div和一个按钮。
div部分用于显示来自服务器的信息。
当按钮被点击时，它负责调用名为loadXMLDoc（）的函数：
h3>
/h3>
ChangeContent<
接下来，在页面的head部分添加一个<
script>
标签。
该标签中包含了这个loadXMLDoc（）函数：
....AJAXscriptgoeshere...
下面的章节会为您讲解AJAX的工作原理。
AJAX-创建XMLHttpRequest对象
XMLHttpRequest是AJAX的基础。
XMLHttpRequest对象
所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。
XMLHttpRequest用于在后台与服务器交换数据。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建XMLHttpRequest对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均内建XMLHttpRequest对象。
创建XMLHttpRequest对象的语法：
variable=newXMLHttpRequest（）;
老版本的InternetExplorer（IE5和IE6）使用ActiveX对象：
variable=newActiveXObject（"
为了应对所有的现代浏览器，包括IE5和IE6，请检查浏览器是否支持XMLHttpRequest对象。
如果支持，则创建XMLHttpRequest对象。
如果不支持，则创建ActiveXObject：
在下一章中，您将学习发送服务器请求的知识。
AJAX-向服务器发送请求
∙PreviousPage
∙NextPage
XMLHttpRequest对象用于和服务器交换数据。
向服务器发送请求
如需将请求发送到服务器，我们使用XMLHttpRequest对象的open（）和send（）方法：
test1.txt"
方法
描述
open（method,url,async）
规定请求的类型、URL以及是否异步处理请求。
∙method：
请求的类型；
GET或POST
∙url：
文件在服务器上的位置
∙async：
true（异步）或false（同步）
send（string）
将请求发送到服务器。
∙string：
仅用于POST请求
GET还是POST？
与POST相比，GET更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用POST请求：
∙无法使用缓存文件（更新服务器上的文件或数据库）
∙向服务器发送大量数据（POST没有数据量限制）
∙发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
GET请求
一个简单的GET请求：
demo_get.asp"
亲自试一试
在上面的例子中，您可能得到的是缓存的结果。
为了避免这种情况，请向URL添加一个唯一的ID：
demo_get.asp?
t="
+Math.random（）,true）;
如果您希望通过GET方法发送信息，请向URL添加信息：
demo_get2.asp?
fname=Bill&
lname=Gates"
POST请求
一个简单POST请求：
POST"
demo_post.asp"
如果需要像HTML表单那样POST数据，请使用setRequestHeader（）来添加HTTP头。
然后在send（）方法中规定您希望发送的数据：
ajax_test.asp"
xmlhttp.setRequestHeader（"
Content-type"
application/x-www-form-urlencoded"
xmlhttp.send（"
setRequestHeader（header,value）
向请求添加HTTP头。
∙header:
规定头的名称
∙value:
规定头的值
url-服务器上的文件
open（）方法的
url
参数是服务器上文件的地址：
该文件可以是任何类型的文件，比如.txt和.xml，或者服务器脚本文件，比如.asp和.php（在传回响应之前，能够在服务器上执行任务）。
异步-True或False？
AJAX指的是异步JavaScript和XML（AsynchronousJavaScriptandXML）。
XMLHttpRequest对象如果要用于AJAX的话，其open（）方法的async参数必须设置为true：
对于web开发人员来说，发送异步请求是一个巨大的进步。
很多在服务器执行的任务都相当费时。
AJAX出现之前，这可能会引起应用程序挂起或停止。
通过AJAX，JavaScript无需等待服务器的响应，而是：
∙在等待服务器响应时执行其他脚本
∙当响应就绪后对响应进行处理
Async=true
当使用async=true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：
您将在稍后的章节学习更多有关onreadystatechange的内容。
Async=false
如需使用async=false，请将open（）方法中的第三个参数改为false：
false）;
我们不推荐使用async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript会等到服务器响应就绪才继续执行。
如果服务器繁忙或缓慢，应用程序会挂起或停止。
注释：
当您使用async=false时，请不要编写onreadystatechange函数-把代码放到send（）语句后面即可：
document.getElementById（"
AJAX-服务器响应
服务器响应
如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性。
属性
responseText
获得字符串形式的响应数据。
responseXML
获得XML形式的响应数据。
responseText属性
如果来自服务器的响应并非XML，请使用responseText属性。
responseText属性返回字符串形式的响应，因此您可以这样使用：
responseXML属性
如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性：
请求
books.xml
文件，并解析响应：
xmlDoc=xmlhttp.responseXML;
txt="
"
;
x=xmlDoc.getElementsByTagName（"
ARTIST"
for（i=0;
i<
x.length;
i++）
txt=txt+x[i].childNodes[0].nodeValue+"
br/>
）.innerHTML=txt;
AJAX-onreadystatechange事件
onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readyState改变时，就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息。
下面是XMLHttpRequest对象的三个重要的属性：
onreadystatechange
存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
readyState
存有XMLHttpRequest的状态。
从0到4发生变化。
∙0:
请求未初始化
∙1:
服务器连接已建立
∙2:
请求已接收
∙3:
请求处理中
∙4:
请求已完成，且响应已就绪
status
200:
"
OK"
404:
未找到页面
在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当readyState等于4且状态为200时，表示响应已就绪：
onreadystatechange事件被触发4次，对应着readyState的每个变化。
使用Callback函数
callback函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个AJAX任务，那么您应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个AJAX任务调用该函数。
该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）：
functionmyFunction（）
loadXMLDoc（"
ajax_info.txt"
function（）
}）;
functionshowHint（str）
if（str.length==0）
{
txtHint"
）.innerHTML="
return;
/ajax/gethint.asp?
q="
+str,true）;
请在下面的输入框中键入字母（A-Z）：
formaction="
姓氏：
inputtype="
text"
id="
txt1"
onkeyup="
showHint（this.value）"
/>
/form>
p>
建议：
spanid="
/span>
/p>
源代码解释：
如果输入框为空（str.length==0），则该函数清空txtHint占位符的内容，并退出函数。
如果输入框不为空，showHint（）函数执行以下任务：
∙创建XMLHttpRequest对象
∙当服务器响应就绪时执行函数
∙把请求发送到服务器上的文件
∙请注意我们向URL添加了一个参数q（带有输入框的内容）
、、、
AJAX数据库实例
AJAX可用来与数据库进行动态通信。
下面的例子将演示网页如何通过AJAX从数据库读取信息：
请在下面的下拉列表中选择一个客户：
窗体顶端
请选择一位客户：
窗体底端
CustomerID
BAIDU
CompanyName
BAIDU,Inc
ContactName
LiYanHong
Address
Lixiangguojidasha,No58,beisihuanxilu
City
Beijing
PostalCode
100080
Country
China
亲自试一下源代码
实例解释-showCustomer（）函数
当用户在上面的下拉列表中选择某个客户时，会执行名为"
showCustomer（）"
的函数。
该函数由"
onchange"
事件触发：
functionshowCustomer（str）
if（str=="
）
getcustomer.asp?
showCustomer（）函数执行以下任务：
∙检查是否已选择某个客户
∙当服务器响应就绪时执行所创建的函数
∙请注意我们向URL添加了一个参数q（带有输入域中的内容）
AJAX服务器页面
由上面的JavaScript调用的服务器页面是ASP文件，名为"
getcustomer.asp"
。
用PHP编写服务器文件也很容易，或者用其他服务器语言。
请看用PHP编写的相应的例子。
中的源代码负责对数据库进行查询，然后用HTML表格返回结果：
%
response.expires=-1
sql="
SELECT*FROMCUSTOMERSWHERECUSTOMERID="
sql=sql&
'
&
request.querystring（"
q"
）&
setconn=Server.CreateObject（"
ADODB.Connection"
conn.Provider="
Microsoft.Jet.OLEDB.4.0"
conn.Open（Server.Mappath（"
/db/northwind.mdb"
））
setrs=Server.CreateObject（"
ADODB.recordset"
rs.Opensql,conn
response.write（"
table>
dountilrs.EOF
foreachxinrs.Fields
response.write（"
tr>
td>
b>
x.name&
/b>
/td>
x.value&
/tr>
next
rs.MoveNext
loop
/table>
%>
AJAXXML实例
AJAX可用来与XML文件进行交互式通信。
下面的例子将演示网页如何使用AJAX来读取来自XML文件的信息：
获得CD信息
实例解释-loadXMLDoc（）函数
当用户点击上面的“获得CD信息”这个按钮，就会执行loadXMLDoc（）函数。
loadXMLDoc（）函数创建XMLHttpRequest对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。
当服务器响应就绪时，会构建一个HTML表格，从XML文件中提取节点（元素），最后使用已经填充了XML数据的HTML表格来更新txtCDInfo占位符：
functionloadXMLDoc（url）
vartxt,xx,x,i;
xmlhttp.onreadystatechange=fun
升级会员 