AJAX用法示例详解
来源:互联网 发布:知乎回答过于频繁 编辑:程序博客网 时间:2024/06/15 00:39
1、简介
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。总的来说,AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
2、什么是AJAX?
AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
3、AJAX - 创建XMLHttpRequest对象
XMLHttpRequest是AJAX 的基础。
3.1 XMLHttpRequest对象
所有现代浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveXObject)。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
3.2创建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){ //code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();}else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
4、AJAX - 向服务器发送请求
XMLHttpRequest对象用于和服务器交换数据。
4.1向服务器发送请求
如需将请求发送到服务器,我们使用XMLHttpRequest对象的open()和send()方法:
xmlhttp.open("GET","test1.txt",true);xmlhttp.send();
4.1.1 open(method,url,async):规定请求的类型、URL以及是否异步处理请求。
method:请求的类型;GET或POST
url:文件在服务器上的位置
async:true(异步)或false(同步)
4.1.2 send(string):将请求发送到服务器。
string:仅用于POST请求
4.2 GET还是POST?
与POST相比,GET更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用POST请求:
无法使用缓存文件(更新服务器上的文件或数据库);
向服务器发送大量数据(POST没有数据量限制);
发送包含未知字符的用户输入时,POST比GET更稳定也更可靠。
4.3 GET 请求
4.3.1 一个简单的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();
4.4 POST请求
4.4.1 一个简单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");
4.4.2 setRequestHeader(header,value):向请求添加HTTP头。
header: 规定头的名称
value: 规定头的值
url - 服务器上的文件
4.4.3 open() 方法的url参数是服务器上文件的地址:
xmlhttp.open(“GET”,”ajax_test.asp”,true);
该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。
4.5 异步 - True或False?
AJAX 指的是异步JavaScript 和 XML(Asynchronous JavaScript and XML)。
XMLHttpRequest对象如果要用于AJAX的话,其open()方法的async参数必须设置为true:
xmlhttp.open("GET","ajax_test.asp",true);
对于web开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX出现之前,这可能会引起应用程序挂起或停止。通过AJAX,JavaScript无需等待服务器的响应,而是:
在等待服务器响应时执行其他脚本;
当响应就绪后对响应进行处理。
4.5.1 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();
4.5.2 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;
5、AJAX - 服务器响应
5.1 服务器响应
如需获得来自服务器的响应,请使用XMLHttpRequest对象的responseText或responseXML属性。
responseText:获得字符串形式的响应数据。
responseXML:获得XML形式的响应数据。
5.2 responseText属性
如果来自服务器的响应并非XML,请使用responseText属性。
responseText属性返回字符串形式的响应,因此您可以这样使用:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
5.3 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 />";}document.getElementById("myDiv").innerHTML=txt;
6、AJAX - onreadystatechange 事件
6.1 onreadystatechange事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当readyState改变时,就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。下面是XMLHttpRequest对象的三个重要的属性:
(1)onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
(2)readyState:存有XMLHttpRequest的状态。从0到4发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
(3)status
200: “OK”
404: 未找到页面
6.2 在onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。当readyState等于4且状态为200时,表示响应已就绪:
xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML = xmlhttp.responseText; }}
注释:onreadystatechange事件被触发5次(0-4),对应着readyState的每个变化。
6.3 使用Callback函数
callback函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个AJAX任务,那么您应该为创建XMLHttpRequest对象编写一个标准的函数,并为每个AJAX任务调用该函数。该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务(每次调用可能不尽相同):
function myFunction(){ loadXMLDoc("ajax_info.txt",function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } });}
7、AJAX 请求实例
下面的例子将为您演示当用户在输入框中键入字符时,网页如何与web服务器进行通信:
请在下面的输入框中姓名键入字母(A - Z)(然后会在建议中给出提示):
姓名:
建议:
实例解释 - showHint():函数当用户在上面的输入框中键入字符时,会执行函数 “showHint()” 。该函数由 “onkeyup” 事件触发:
function showHint(str){ var xmlhttp; if (str.length==0){ document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{ // code for 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","gethint.asp?q="+str,true); xmlhttp.send();}
解释:
如果输入框为空 (str.length==0),则该函数清空txtHint占位符的内容,并退出函数。
如果输入框不为空,showHint()函数执行以下任务:
创建 XMLHttpRequest 对象;
当服务器响应就绪时执行函数;
把请求发送到服务器上的文件;;
请注意我们向 URL 添加了一个参数 q (带有输入框的内容)
AJAX 服务器页面 - ASP 和 PHP;
由上面的 JavaScript 调用的服务器页面是 ASP 文件,名为 “gethint.asp”。
下面,我们创建了两个版本的服务器文件,一个用 ASP 编写,另一个用 PHP 编写。
//gethint.asp文件"gethint.asp" 中的源代码会检查一个名字数组,然后向浏览器返回相应的名字:<%response.expires=-1dim a(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,则查找数组中的所有提示if len(q)>0 then hint="" for i=1 to 30 if q=ucase(mid(a(i),1,len(q))) then if hint="" then hint=a(i) else hint=hint & " , " & a(i) end if end if nextend if'如果未找到提示,则输出 "no suggestion"'否则输出正确的值if hint="" then response.write("no suggestion")else response.write(hint)end if%>
注:参考w3c关于Aajax介绍。
- AJAX用法示例详解
- ajax用法示例
- $.ajax()用法与示例
- list用法示例详解
- jQuery Ajax用法详解
- Ajax用法实例详解
- sc.exe用法 详解 示例
- cpio 命令用法详解示例
- java list用法示例详解
- java list用法示例详解
- Ajax异步传值用法示例
- Ajax异步传值用法示例
- Ajax异步传值用法示例
- Ext.Ajax.request用法详解
- Java抽象类用法示例详解
- Java抽象类用法示例详解
- Oracle 分组函数用法示例详解
- Java抽象类用法示例详解
- css常用笔记
- 大文件切割上传
- CTex: can not find psfig.sty
- linux清屏命令clear和reset
- tableView的表头
- AJAX用法示例详解
- C#委托的介绍(delegate、Action、Func、predicate)
- 在nginx中x-sendfile解决方案
- [李景山php]每天TP5-20161214|App.php
- RCNN基础资料
- Http 206 文件断点续传下载原理
- 00 caffe-学习笔记
- java json字符串操作
- linux du命令参数及用法详解---linux统计磁盘空间大小命令