ajx详细的学习指南.docx
- 文档编号:8509354
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:16
- 大小:24.39KB
ajx详细的学习指南.docx
《ajx详细的学习指南.docx》由会员分享,可在线阅读,更多相关《ajx详细的学习指南.docx(16页珍藏版)》请在冰豆网上搜索。
ajx详细的学习指南
functionloadXMLDoc()
{
varxmlhttp;
if(window.XMLHttpRequest)
{//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest();
}
else
{//codeforIE6,IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
LetAJAXchangethistext
AJAX实例解释
上面的AJAX应用程序包含一个div和一个按钮。
div部分用于显示来自服务器的信息。
当按钮被点击时,它负责调用名为loadXMLDoc()的函数:
LetAJAXchangethistext
接下来,在页面的head部分添加一个
下面的章节会为您讲解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("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象。
如果支持,则创建XMLHttpRequest对象。
如果不支持,则创建ActiveXObject:
varxmlhttp;
if(window.XMLHttpRequest)
{//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest();
}
else
{//codeforIE6,IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
在下一章中,您将学习发送服务器请求的知识。
AJAX-向服务器发送请求
∙PreviousPage
∙NextPage
XMLHttpRequest对象用于和服务器交换数据。
向服务器发送请求
如需将请求发送到服务器,我们使用XMLHttpRequest对象的open()和send()方法:
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法
描述
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请求:
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
亲自试一试
在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向URL添加一个唯一的ID:
xmlhttp.open("GET","demo_get.asp?
t="+Math.random(),true);
xmlhttp.send();
亲自试一试
如果您希望通过GET方法发送信息,请向URL添加信息:
xmlhttp.open("GET","demo_get2.asp?
fname=Bill&lname=Gates",true);
xmlhttp.send();
亲自试一试
POST请求
一个简单POST请求:
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
亲自试一试
如果需要像HTML表单那样POST数据,请使用setRequestHeader()来添加HTTP头。
然后在send()方法中规定您希望发送的数据:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
亲自试一试
方法
描述
setRequestHeader(header,value)
向请求添加HTTP头。
∙header:
规定头的名称
∙value:
规定头的值
url-服务器上的文件
open()方法的 url 参数是服务器上文件的地址:
xmlhttp.open("GET","ajax_test.asp",true);
该文件可以是任何类型的文件,比如.txt和.xml,或者服务器脚本文件,比如.asp和.php(在传回响应之前,能够在服务器上执行任务)。
异步-True或False?
AJAX指的是异步JavaScript和XML(AsynchronousJavaScriptandXML)。
XMLHttpRequest对象如果要用于AJAX的话,其open()方法的async参数必须设置为true:
xmlhttp.open("GET","ajax_test.asp",true);
对于web开发人员来说,发送异步请求是一个巨大的进步。
很多在服务器执行的任务都相当费时。
AJAX出现之前,这可能会引起应用程序挂起或停止。
通过AJAX,JavaScript无需等待服务器的响应,而是:
∙在等待服务器响应时执行其他脚本
∙当响应就绪后对响应进行处理
Async=true
当使用async=true时,请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
亲自试一试
您将在稍后的章节学习更多有关onreadystatechange的内容。
Async=false
如需使用async=false,请将open()方法中的第三个参数改为false:
xmlhttp.open("GET","test1.txt",false);
我们不推荐使用async=false,但是对于一些小型的请求,也是可以的。
请记住,JavaScript会等到服务器响应就绪才继续执行。
如果服务器繁忙或缓慢,应用程序会挂起或停止。
注释:
当您使用async=false时,请不要编写onreadystatechange函数-把代码放到send()语句后面即可:
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
亲自试一试
AJAX-服务器响应
∙PreviousPage
∙NextPage
服务器响应
如需获得来自服务器的响应,请使用XMLHttpRequest对象的responseText或responseXML属性。
属性
描述
responseText
获得字符串形式的响应数据。
responseXML
获得XML形式的响应数据。
responseText属性
如果来自服务器的响应并非XML,请使用responseText属性。
responseText属性返回字符串形式的响应,因此您可以这样使用:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
亲自试一试
responseXML属性
如果来自服务器的响应是XML,而且需要作为XML对象进行解析,请使用responseXML属性:
请求 books.xml 文件,并解析响应:
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for(i=0;i { txt=txt+x[i].childNodes[0].nodeValue+" } document.getElementById("myDiv").innerHTML=txt; 亲自试一试 AJAX-onreadystatechange事件 ∙PreviousPage ∙NextPage 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时,表示响应已就绪: xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4&&xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } 亲自试一试 注释: onreadystatechange事件被触发4次,对应着readyState的每个变化。 使用Callback函数 callback函数是一种以参数形式传递给另一个函数的函数。 如果您的网站上存在多个AJAX任务,那么您应该为创建XMLHttpRequest对象编写一个标准的函数,并为每个AJAX任务调用该函数。 该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务(每次调用可能不尽相同): functionmyFunction() { loadXMLDoc("ajax_info.txt",function() { if(xmlhttp.readyState==4&&xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } 亲自试一试
";
functionshowHint(str)
{
varxmlhttp;
if(str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if(window.XMLHttpRequest)
{//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest();
}
else
{//codeforIE6,IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/gethint.asp?
q="+str,true);
xmlhttp.send();
}
请在下面的输入框中键入字母(A-Z):
姓氏:
建议:
源代码解释:
如果输入框为空(str.length==0),则该函数清空txtHint占位符的内容,并退出函数。
如果输入框不为空,showHint()函数执行以下任务:
∙创建XMLHttpRequest对象
∙当服务器响应就绪时执行函数
∙把请求发送到服务器上的文件
∙请注意我们向URL添加了一个参数q(带有输入框的内容)
、、、
AJAX数据库实例
∙PreviousPage
∙NextPage
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)
{
varxmlhttp;
if(str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if(window.XMLHttpRequest)
{//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest();
}
else
{//codeforIE6,IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?
q="+str,true);
xmlhttp.send();
}
showCustomer()函数执行以下任务:
∙检查是否已选择某个客户
∙创建XMLHttpRequest对象
∙当服务器响应就绪时执行所创建的函数
∙把请求发送到服务器上的文件
∙请注意我们向URL添加了一个参数q(带有输入域中的内容)
AJAX服务器页面
由上面的JavaScript调用的服务器页面是ASP文件,名为"getcustomer.asp"。
用PHP编写服务器文件也很容易,或者用其他服务器语言。
请看用PHP编写的相应的例子。
"getcustomer.asp"中的源代码负责对数据库进行查询,然后用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("
"&x.name&" | ")"&x.value&" |
%>
AJAXXML实例
∙PreviousPage
∙NextPage
AJAX可用来与XML文件进行交互式通信。
AJAXXML实例
下面的例子将演示网页如何使用AJAX来读取来自XML文件的信息:
获得CD信息
亲自试一下源代码
实例解释-loadXMLDoc()函数
当用户点击上面的“获得CD信息”这个按钮,就会执行loadXMLDoc()函数。
loadXMLDoc()函数创建XMLHttpRequest对象,添加当服务器响应就绪时执行的函数,并将请求发送到服务器。
当服务器响应就绪时,会构建一个HTML表格,从XML文件中提取节点(元素),最后使用已经填充了XML数据的HTML表格来更新txtCDInfo占位符:
functionloadXMLDoc(url)
{
varxmlhttp;
vartxt,xx,x,i;
if(window.XMLHttpRequest)
{//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest();
}
else
{//codeforIE6,IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=fun
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ajx 详细 学习指南