AJAX 教程.docx
- 文档编号:25703483
- 上传时间:2023-06-11
- 格式:DOCX
- 页数:23
- 大小:27.76KB
AJAX 教程.docx
《AJAX 教程.docx》由会员分享,可在线阅读,更多相关《AJAX 教程.docx(23页珍藏版)》请在冰豆网上搜索。
AJAX教程
AJAX简介
AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
您应当具备的基础知识
在继续学习之前,您需要对下面的知识有基本的了解:
∙HTML/XHTML
∙CSS
∙JavaScript/DOM
什么是AJAX?
AJAX=异步JavaScript和XML。
AJAX是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用AJAX的应用程序案例:
新浪微博、Google地图、开心网等等。
GoogleSuggest
在2005年,Google通过其GoogleSuggest使AJAX变得流行起来。
GoogleSuggest使用AJAX创造出动态性极强的web界面:
当您在谷歌的搜索框输入关键字时,JavaScript会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。
今天就开始使用AJAX
AJAX基于已有的标准。
这些标准已被大多数开发者使用多年。
请阅读下一章,看看AJAX是如何工作的!
AJAX实例
为了帮助您理解AJAX的工作原理,我们创建了一个小型的AJAX应用程序。
实例
LetAJAXchangethistext
AJAX实例解释
上面的AJAX应用程序包含一个div和一个按钮。
div部分用于显示来自服务器的信息。
当按钮被点击时,它负责调用名为loadXMLDoc()的函数:
LetAJAXchangethistext
接下来,在页面的head部分添加一个
下面的章节会为您讲解AJAX的工作原理。
AJAX-创建XMLHttpRequest对象
XMLHttpRequest对象(是AJAX的基础)
所有现代浏览器均支持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-向服务器发送请求
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-服务器响应
服务器响应
如需获得来自服务器的响应,请使用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事件 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; } }); } 亲自试一试 AJAXASP/PHP请求实例 AJAX用于创造动态性更强的应用程序。 AJAXASP/PHP实例 下面的例子将为您演示当用户在输入框中键入字符时,网页如何与web服务器进行通信: 请在下面的输入框中键入字母(A-Z): 窗体顶端 姓氏: 窗体底端 建议: 亲自试一下源代码 实例解释-showHint()函数 当用户在上面的输入框中键入字符时,会执行函数"showHint()"。 该函数由"onkeyup"事件触发: 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","gethint.asp? q="+str,true); xmlhttp.send(); } 源代码解释: 如果输入框为空(str.length==0),则该函数清空txtHint占位符的内容,并退出函数。 如果输入框不为空,showHint()函数执行以下任务: ∙创建XMLHttpRequest对象 ∙当服务器响应就绪时执行函数 ∙把请求发送到服务器上的文件 ∙请注意我们向URL添加了一个参数q(带有输入框的内容) AJAX服务器页面-ASP和PHP 由上面的JavaScript调用的服务器页面是ASP文件,名为"gethint.asp"。 下面,我们创建了两个版本的服务器文件,一个用ASP编写,另一个用PHP编写。 ASP文件 "gethint.asp"中的源代码会检查一个名字数组,然后向浏览器返回相应的名字: <% response.expires=-1 dima(30) '用名字来填充数组 a (1)="Anna" a (2)="Brittany" a(3)="Cinderella" a(4)="Diana" a(5)="Eva" a(6)="Fiona" a(7)="Gunda" a(8)="Hege" a(9)="Inga" a(10)="Johanna" a(11)="Kitty" a(12)="Linda" a(13)="Nina" a(14)="Ophelia" a(15)="Petunia" a(16)="Amanda" a(17)="Raquel" a(18)="Cindy" a(19)="Doris" a(20)="Eve" a(21)="Evita" a(22)="Sunniva" a(23)="Tove" a(24)="Unni" a(25)="Violet" a(26)="Liza" a(27)="Elizabeth" a(28)="Ellen" a(29)="Wenche" a(30)="Vicky" '获得来自URL的q参数 q=ucase(request.querystring("q")) '如果q大于0,则查找数组中的所有提示 iflen(q)>0then hint="" fori=1to30 ifq=ucase(mid(a(i),1,len(q)))then ifhint=""then hint=a(i) else hint=hint&","&a(i) endif endif next endif '如果未找到提示,则输出"nosuggestion" '否则输出正确的值 ifhint=""then response.write("nosuggestion") else response.write(hint) endif %> PHP文件 下面的代码用PHP编写,与上面的ASP代码作用是一样的。 注释: 如需在PHP中运行这个例子,请将url变量的值(Javascript代码中)由"gethint.asp"改为"gethint.php"。 php //用名字来填充数组 $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //获得来自URL的q参数 $q=$_GET["q"]; //如果q大于0,则查找数组中的所有提示 if(strlen($q)>0) { $hint=""; for($i=0;$i { if(strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if($hint=="") { $hint=$a[$i]; } else { $hint=$hint.",".$a[$i]; } } } } //如果未找到提示,则把输出设置为"nosuggestion" //否则设置为正确的值 if($hint=="") { $response="nosuggestion"; } else { $response=$hint; } //输出响应 echo$response; ? > AJAX数据库实例 AJAX可用来与数据库进行动态通信。 AJAX数据库实例 下面的例子将演示网页如何通过AJAX从数据库读取信息: 请在下面的下拉列表中选择一个客户: 窗体顶端 请选择一位客户: 窗体底端 客户信息将在此处列出。 亲自试一下源代码 实例解释-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=fun
";
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AJAX 教程