什么是Ajax
Ajax被认为是(Asynchronous JavaScript and XML的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都叫做Ajax。
不用刷新整个页面就能与服务器通讯的方法:
Flash
java applet
框架:如果使用了一组框架构造了一个网页,可以只更新其中的一个框架,而不必惊动整个页面
隐藏的iframe
**XMLHttpRequest:**该对象是对JavaScript的一个扩展,可使网页与服务器进行通信。是创建Ajax应用的最佳选择。
实际上通常把Ajax当成是XMLHTTPRequest对象的代名词。
XMLHttpRequest的方法
abort()停止当前请求
getAllResponseHeaders()把HTTP请求的所有响应首部作为键值对返回。
getResponseHeader(“header”)返回指定首部的串值。
open(“method”,“url”)建立对服务器的调用。Method参数可以是GET,POST或PUT.url参数可以是相对URL或绝对URL。
send(content)向服务器发送请求
setRequestHeader(“header”,“value”)
XMLHttpRequest的属性
onreadystatechange:每个状态的改变都会触发这个事件触发器,通常会调用一个javaScript函数
readyState:请求的状态,有5个可取值:0=未初始化、1=正在加载、2=已经加载、3=交互中、4=完成。
responseText:服务器的响应,表示为一个串
responseXML:服务器的响应,表示为XML。这个对象可以解析为dom对象。
status:服务器的HTTP状态码
statusText:HTTP状态码对应文本
//1.获取a节点,为其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据:url
var url = this.href + "?time=" + new Date();//加上时间戳
var method = "GET";
//5.调用XMLHttpRequest对象的open方法
request.open(method,url);
//6.调用XMLHttpRequest对象的send方法
request.send(null);
//7.为XMLHttpRequest对象添加onreadystatechange响应函数
request.onreadystatechange = function(){
//8.判断响应是否完成:XMLHttpRequest对象的readyState属性值为4
if(request.readyState == 4){
//9.再判断响应是否可用:XMLHttpRequest对象的status属性值为200
if(request.status == 200||request.status == 304){
//10.打印响应结果:responseText
alert(request.responseText);
}
}
}
//2.取消a结点的默认行为
return false;
}
发送请求
利用XMLHttpRequest实例与服务器进行通信包含以下三个关键部分:
onreadystatechange 事件处理函数:
(该事件处理函数由服务器触发,而不是用户
在Ajax执行的过程中,服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest 对象的readyState来实现。改变readystate属性是服务器对客户端连接操作的一种方式。每次 readyState属性的改变都会触发readystatechange事件。
)
open方法:
(XMLHttpRequest对象的open方法允许程序员用一个Ajax调用服务器发送请求。
method:请求类型,类似"GET"或"POST"的字符串。若只想从服务器检索一个文件,而不需要发送任何数据,使用GET(可以在GET请求里通过附加在URL上的查询字符来发送数据,不过数据大小限制为2000个字符)。若需要向服务器发送数据,用post。
在某些情况下,有些浏览器会把多个XMLHttpRequest请求的结果缓存到同一个URL。如果对每个请求的响应不同,就会带来不好的消息。在此将时间戳追加到URL的最后,就能确保URL的唯一性,从而避免浏览器缓存的结果。
url:路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
asynch:表示请求是否要异步传输,默认值为true。指定true,在读取后面的脚本之前,不需要等待服务器的响应。指定false,当脚本处理过程经过这点时,会停下来,一直等到Ajax请求执行完毕再继续执行。
)
send(data)方法:
open方法定义了Ajax请求的一些细节。send方法可为已经待命的请求发送指令。
data:将要传递给服务器的字符串。
若选用的是GET请求,则不会发送任何数据,给send方法传递null即可:request.send(null);
当向send()方法提供参数时,要确保open()中指定的方法是POST,如果没有数据作为请求体的一部分发送,则使用null。
完整的Ajax的GET请求示例:
var request = getHTTPObject();
if(request){
request.onreadystatechange = doSomeThing;
request.open(“GET”,“file.txt”,true);
request.send(null);
}
接收请求
用XMLHttpRequest的方法可向服务器发送请求。在Ajax处理过程中,XMLHttpRequest的如下属性可被服务器更改:
readyState:
表示Ajax请求的当前状态。它的值用数字代表。
0代表未初始化。还没有调用open方法
1代表正在加载。open方法已被调用,但send方法还没有被调用。
2代表已加载完毕。send已被调用。请求已经开始。
3代表交互中。服务器正在发送响应。
4代表完成。响应发送完毕。
每次readyState值的改变,都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数,那么每次readyState值的变化都会引起该函数的执行。
readystate值的变化都会因为浏览器的不同而有差异,但是,当请求结束的时候,每个浏览器都会吧readyState的值统一设为4。
status
服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息,而且属于超文本传输协议中的一部分。
常用状态码及其含义:
404没找到页面
403禁止访问
500内部服务器出错
200一切正常
304没有被修改
在XMLHttpRequest对象中,服务器发送的状态码都保存在status属性中。通过把这个值和200或304比较,可以确保服务器是否发送了一个成功的响应。
responseText
XMLHttpRequest的responseText属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本,这取决于服务器发送的内容。
当readyState属性值变为4时,responseText属性才可用,表明Ajax请求已经结束。
function doSomeThing(){
if(request.readyState == 4){
if(request.status == 200||request.status == 304){
alert(request.responseText);
}
}
}
responseXML
如果服务器返回的是XML,那么数据将储存在responseXML属性中。
只有服务器发送了带有正确首部信息的数据时,responseXML属性才是可用的。MIME类型必须为text/xml
数据格式提要
在服务器端Ajax是一门与语言无关的技术,在业务逻辑层使用何种服务器端语言都可以。
从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下3种格式返回数据:
XML
JSON
HTML
解析HTML
HTML由一些普通的文本组成。如果服务器通过XMLHttpRequest发送HTML,文本将存储在responseText属性中。
不必从responseText属性中读取数据。它已经是希望的格式,可以直接将它插入到页面中。
插入html代码最简单的方法就是更新这个元素的innerHTML属性。
<script type = "text/javascript">
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i<aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHTTPRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200|| request.status == 304){
document.getElementById("details").innerHTML = request.responseText ;
}
}
}
}
}
}
</script>
优点:从服务器端发送的HTML代码在浏览器端不需要用javaScript进行解析。
HTML的可读性好。HTML代码块与innerHTML属性搭配,效率高。
缺点:若需要通过Ajax更新一篇文档的多个部分,HTML不合适(对文档里东西进行拆分就不黄爽)。
innerHTNM并非DOM标准。
解析XML
<script type = "text/javascript">
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i<aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHTTPRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200|| request.status == 304){
//1.结果为XML格式,所以需要使用requestXML来获取
var result = request.responseXML;
//2.结果不能直接使用,必须先创建对应的节点,再把节点加入到#details中
var name = result.getElementByTagName("name")[0].firstChild.nodeValue;
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto" + email;
}
}
}
}
}
}
</script>
JSON
json(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘ 名称/值’对 ”之间使用“,”(逗号)分割。
<script type="text/javascript">
var jsonObject = {
"name":"atguigu",
"age":12,
"address":{"city":"Beijing","school":"尚硅谷"},
"teaching":function(){
alert("JavaEE,Android...");
}
};
alert(jsonObject.name);
alert(jsonObject.address.city);
jsonObject.teaching();
//使用eval()方法
var testStr = "alert('hello eval')";
//alert(testStr);
//eval可以把一个字符串转为本地的JS代码来执行
eval(testStr);
//把JSON字符串转为JSON对象
var testObject = eval("("+jsonStr+")");
alert(testObject.name);
</script>
JSON用冒号来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。
对象描述中存储的数据可以是字符串,数字或者布尔值。对象描述也可存储函数,那就是对象的方法。
解析代码
<script type = "text/javascript">
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i<aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHTTPRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200|| request.status == 304){
//1.结果为XML格式,所以需要使用requestXML来获取
var result = request.responseText;
var object = eval("("+result+")");
//2.结果不能直接使用,必须先创建对应的节点,再把节点加入到 #details中
var name = result.object.person.name;
//var website ..........
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto" + email;
}
}
}
}
}
}
</script>
JSON小结
优点:
作为一种数据传输格式,JSON与XML很相似,但是它更加灵巧。
JSON不需要从服务端发送含有特定内容类型的首部信息。
缺点:
代码过于严谨
代码不易读
eval函数存在风险(把恶意代码用字符串形式写出)
对比小结
若应用程序不需要与其他应用程序共享数据的时候,使用HTML片段来返回数据时最简单。
如果数据需要重用,JSON文件是个不错的选择,其在性能和文件大小方面有优势。
当远程应用程序未知时,XML文档是首选,因为XML是web服务领域的“世界语”。
JQuery中的Ajax
jQuery对Ajax操作进行了封装,在jQuery中最底层的方法时 . a j a x ( ) , 第 二 层 是 l o a d ( ) , .ajax(),第二层是load(), .ajax(),第二层是load(),.get()和 . p o s t ( ) , 第 三 层 是 .post(),第三层是 .post(),第三层是.getScript()和$.getJSON(),
load()方法
load()方法时jQuery中最为简单和常用的Ajax方法,能载入远程*的HTML代码*并插入DOM中,它的结构是:load(url[,data],[,callback]])
参数 类型 说明
url String 请求HTML页面的URL地址
data(可选) Object 发送到服务器的key/value数据
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败
程序员只需要使用jQuery选择器为HTML片段指定目标位置,然后将要加载的文件的url做为参数传递给load()方法即可。
细节:
如果只需要加载目标的HTML页面内的某些元素,则可以通过load()方法的URL参数来达到目的。通过URL参数指定选择符,就可以方便的从加载过来的HTML文档中选出所需要的内容。load()方法的URL参数的语法结构为:“url selector”(注意:url和选择器之间有一个空格)
传递方式:load()方法的传递参数根据参数data来自动自定。如果没有参数传递,采用GET方式传递,否则采用POST方式。
对于必须在加载完成才能继续的操作,load()方法提供了回调函数,该函数有三个参数:代表请求返回内容的data;代表请求状态的textStatus对象和XMLHttpRequest对象。