AJAX
概论:
w AJAX指异步的JavaScript及XML(Asynchronous JavaScriptAnd XML)
w 允许浏览器与服务器通信而无须刷新页面的技术都被叫做AJAX
w AJAX不是编程语言,而是创建更好更快以及交互性更强的Web应用程序的技术
w 通过使用AJAX可实现页面局部数据更新,而不是整个页面的跳转
同步是指:发送方发出数据后,等待收方发回响应以后才发下一个数据包通讯方式.
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式.
AJAX缺点:
1) AJAX大量使用了JavaScript和AJAX引擎,而这个取决于浏览器的支持.
有些支持但是提供的XMLHttpRequest的方式不一样,所以使得AJAX
程序必须测试针对各个浏览器的兼容性.
2) AJAX更新页面内容的时候没有刷新整个页面,因此,网页的后退功能是失效的,
有的用户还经常搞不清楚现在的数据时旧的还是已经更新过的.
3) 对流某提的支持没有FLASH,JavaApplet好.
4) 一些手持设备(手机等)现在还不能很好的支持Ajax.
工作流程:
w JavaScript使用XMLHttpRequest对象来直接与服务器进行通信,异步数据传输;
w 从服务器请求少量的所需信息,问不是整个页面内容,减少服务器压力
AJAX关键元素及作用:
关键元素
Ÿ JavaScript
Ÿ DOM(文档对象模型)
Ÿ CSS样式表
Ÿ XMLHttpRequest --核心对象
作用:
Ÿ Web2.0的主要开发技术
Ÿ 异步方式发送请求
Ÿ 实现页面局部刷新
Ÿ 提升用户体验
AJAX实现步骤:
1. 创建XMLHttpRequest对象
2. 设置回调函数
3. 初始化XMLHttpRequest组件
4. 发送请求
AJAX实例
点击加载按钮,不刷新页面获取服务器端的内容并显示在页面中
//JS
function getXmlHttp(){…} //获取XMLHttp对象
xmlHttp.readyState == 4 &&xmlHttp.status ==200 //HTTP状态验证
xmlHttp.open(“GET” , ”data.txt” , true); //创建http请求
xmlHttp.send(); //发送请求
XMLHttpRequest对象
作用:
实现以异步方式在客户端与服务器端之间传递数据.
减轻服务器负担,加快响应速度,缩短用户等待时间
浏览器创建XMLHttpReuest对象的差异
u XMLHttpRequest对象
u XMLHttpRequest对成功返回的信息有两种处理方式:
1) responseText: 将传回来的信息当字符串使用;
2) responseXML: 将传回来的信息当XML文档使用;
u Activex对象
//兼容写法
//如果是IE7+,FF等高级浏览器
if(window.XMLHttpRequest){
returnnew XMLHttpRequest();
}
//如果是IE 5,IE 6 低版本浏览器
if(window.ActiveXObject){
returnnew ActiveObject(“Microsoft.XMLHTTP”);
}
XMLHttpRequest对象属性
XMLHttpRequest对象方法
使用AJAX发送请求及处理相应
n 发送请求的方式:GET方式和POST方式
n 处理响应的方法:文本相应和XML响应
1) //创建XMLHttpRequest对象
2) 设置回调函数
xmlHttp.onreadystatechange =function(){
if(xmlHttp.readyState ==4 &&xmlHttp.status == 200){
//根据不同的返回类型处理响应
}
}
3) 初始化XMLHttpRequest组件
xmlHttp.open(type , url , asunc);
4) 发送请求
xmlHttp.send(String);
GET请求和POST请求区别
文本和XML方式响应的区别
数据格式提要:
从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式发送,
服务器端的编程语言只能以如下3种格式返回数据:
* XML;
*JSON;
*HTML;
xml :
优点:
*XML是一种通用的数据格式;
* 不必把数据强加到已定义好的格式中,而是为数据自定义合适的标记;
* 利用DOM可以完全掌控文档.
缺点 :
* 如果文档来自于服务器,就必须得保证文档含有正确的首部信息,若文档类型不正确,那么responseXML的值将为空的
* 当浏览器接收到长的XML文件后,DOM解析可能会很复杂
JSON:
优点:
*作为一种数据传输的格式,JSON与XML很相似,但JSON更加灵巧;
* JSON不需要从服务器端发送含有特定内容类型的首部信息;
缺点:
*语法过于严谨;
*代码不易读;
*eval函数存在风险
HTML:
优点:
* 从服务器端发送的HTML代码在浏览器端不需要javaScript进行解析;
* HTML的可读性好;
* HTML代码与innerHTML属性搭配,效率高;
缺点:
* 若需要通过AJAX更新一篇文档的多个部分,HTML不合适(拆串);
* innerHTML并非DOM标准
对比小结:
* 若应用程序不需要与其他引用程序共享数据的时候,使用HTML片段来返回数据时最简单;
* 如果数据需要重用,JSON文件是个不错的选择,其在性能和文件大小方面有优势;
* 当远程应用程序未知时,XML文档是首选,因为XML是web服务领域的”世界语”.
Jquery实现AJAX
$.ajax()方法
$.ajax({
url : ”发送请求地址”,
type : ”请求方式”,
date : ”要发送的数据”,
dataType : ”服务器返回的数据类型”,
beforeSend : function(data){ //发送请求前执行的代码},
success : function(data){ //发送成功后执行的代码},
error : function(){ //请求失败执行的代码}
});
$.get()方法
通过远程HTTP GET 请求载入信息
是$.ajax()方法中类型为GET请求的简化版
$.get(
“发送请求的地址”,
要发送的数据 key/value,
回调函数,
“返回内容格式,xml,html,script,json,text”
*get(url,data,callback,type)
* url:请求路径
* data:请求数据,以key/value刑事,json数据格式
* callback:function(data,texStatus,XMLHttpRequest){}
* data:代表请求返回内容,可以是XML文档,JSON,HTML,片段
* textStatus:代表请求状态,其值可能为:
succuss,error,notmodify,timeout4种
* type:返回内容格式,xml,html,script,json,text
* 返回值:XMLHttpRequest
* get()方法无论发送不发送请求数据,请求类型都是”GET”方式
$.post()方法
通过远程HTTP POST请求载入信息
是$.ajax()方法中类型为POST请求的简化版
$.post(
“发送是请求地址”,
要发送的数据 key/value,
回调函数,
“返回内容格式,xml.html,script,json,text”
);
);
*get(url,data,callback,type)
* url:请求路径
* data:请求数据,以key/value刑事,json数据格式
* callback:function(data,texStatus,XMLHttpRequest){}
* data:代表请求返回内容,可以是XML文档,JSON,HTML,片段
* textStatus:代表请求状态,其值可能为:
succuss,error,notmodify,timeout 4种
* type:返回内容格式,xml,html,script,json,text
* 返回值:XMLHttpRequest
* post()方法无论发送不发送请求数据,请求类型都是”POST”方式
$.getJSON()方法
通过HTTP GET请求载入JSON数据
是$.get()方法中返回数据类型为JSON的简化版
$.getJSON(
“发送请求地址”,
要发送的数据 key/value,
回调函数
);
$.getScript()方法
通过HTTP GET 求情载入并执行一个JavaScript文件
$.getScript(
“要发送的请求地址”,
回调函数
);
serialize() 用于序列化表单将DOM元素内容序列化为字符串用于AJAX请求
$(“form”).serialize();
//返回参数序列
single= Single&check = check2 & radio = radio1
好处: 不用逐个去获取表单元素的值,拼凑参数序列
);
*get(url,data,callback,type)
* url:请求路径
* data:请求数据,以key/value刑事,json数据格式
* callback:function(data,texStatus,XMLHttpRequest){}
* data:代表请求返回内容,可以是XML文档,JSON,HTML,片段
* textStatus:代表请求状态,其值可能为:
succuss,error,notmodify,timeout 4种
* type:返回内容格式,xml,html,script,json,text
* ajax总结:
* 同步交互和异步交互：
* 同步交互：客户端发送请求——>等待服务器端处理——>接收响应，这个过程客
户端不能做任何其他事情，这种模式叫做同步交互
* 异步交互：客户端发送请求——>等待服务器端处理——>接收响应，这个过程客
户端不用等待结果，可以做其他事情，这种模式叫做异步交互
* ajax的定义：允许客户端与服务器进行通信，而无须刷新整个页面的技术叫做ajax。
* 对比传统web模式与ajax模式的区别：
* 传统web模式：客户端与服务器通信，交互的是整个页面
* ajax模式：客户端与服务器通信，交互的是数据层面的
* ajax的工作原理：在客户端与服务器进行通信的时候，客户端的请求首先发送给"ajax
引擎"，再由"ajax引擎"发送到服务器端
* XMLHttpRequest对象：是使用ajax技术的关键
* 实现ajax的步骤：
1) 创建XMLHttpRequest对象
2) 注册监听
* 利用XMLHttpRequest对象的onreadystatechange属性监听服务器通信状态.
* 服务器的通信状态具体由XMLHttpRequest对象的readyState属性来获取
* readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
* 再利用XMLHttpRequest对象的另一个属性status，来获取访问服务器端是
否正确
* 常用状态码及其含义：
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没
有被修改 )
3) 接收服务器的响应数据：
* 文本格式：利用XMLHttpRequest对象的responseText属性来接收；
* xml格式：利用XMLHttpRequest对象的responseXML属性来接收；
* json格式：利用XMLHttpRequest对象的responseText属性来接收，再利
用eval()函数进行转换。
* 利用"{}"开始和结尾的，相当于map集合
* 利用"[]"开始和结尾的，相当于数组
4) 与服务器建立连接
* 利用XMLHttpRequest对象的open(method,url,asynch)方法
* method：请求类型，"GET"或者"POST"
* url：请求路径
* asynch：是否异步加载，true是异步加载
* 如果请求类型时"POST"方式的话，需要设置请求首部信息
* 利用XMLHttpRequest对象的setRequestHeader()方法
*xhr.setRequestHeader("Content-type","application/x-www-form-urlencode")
5) 向服务器发送请求数据
* 利用XMLHttpRequest对象的send()
* 如果是"GET"请求类型的话，send()方法向服务器发送请求数据，服务器接收不到
* 如果是"POST"请求类型的话，send()方法向服务器发送请求数据，服务器可以接收
* 服务、服务器、中间件、servlet：
* 服务：发布后的工程
* 服务器：硬件承载容器，实际上就是电脑硬件
* 中间件：tomcat、weblogic[oracle]、webshpere[IBM]
* servlet：服务上，具体处理相关内容的文件
使用jQuery+AJAX 解析XML文件加入二级联动中:
<?xml version="1.0"encoding="GB2312"?>
<china>
<provincename="吉林省">
<city>长春</city>
<city>吉林市</city>
<city>四平</city>
<city>松原</city>
<city>通化</city>
</province>
<provincename="辽宁省">
<city>沈阳</city>
<city>大连</city>
<city>鞍山</city>
<city>抚顺</city>
<city>铁岭</city>
</province>
<provincename="山东省">
<city>济南</city>
<city>青岛</city>
<city>威海</city>
<city>烟台</city>
<city>潍坊</city>
</province>
</china>
<select id="province" name="province">
<option value="">请选择....</option>
</select>
<select id="city"name="city">
<optionvalue="">请选择.....</option>
</select>
</body>
<scriptlanguage="JavaScript">
/*
* jquery通过$.get()或者$.post()方法来解析并加载xml文件
*
* * 以$.get(url,callback)方法为例
* *url：要解析的xml文件的路径
* *callback：回调函数，function(xml){}
* *xml：解析后的内容
*/
$.get("cities.xml",function(xml){
vardocXml = xml;
//在jquery中使用标签名来查找对应标签，
//利用find()方法，传入标签名
//$(docXml)--将解析回来的xml进行包装
var$provinceXmlElements = $(docXml).find("province");
//遍历
$provinceXmlElements.each(function(index,domEle){
//有name属性的每一个标签
var$provinceXmlValue = $(domEle).attr("name");
/*加入到第一个下拉选中
* <select id="province"name="province">
<option value="">请选择....</option>
</select>
*/
//创建option标签
var$option = $("<option></option>");
//设置属性value,省份名称
$option.attr("value",$provinceXmlValue);
//加文本内容,省份
$option.text($provinceXmlValue);
//获取页面province
var$provinceElement = $("#province");
//添加到第一个下拉框
$provinceElement.append($option);
});
$("#province").change(function(){
//获取页面的元素(选中内容)
var$provinceValue = $("#province").val();
/*
* <select id="city"name="city">
<optionvalue="">请选择.....</option>
<optionvalue="长春">长春</option>
</select>
*/
// $("#cityoption[value!='']").each(function(index,domEle){
// $(domEle).remove(); //可以用遍历清空
// });
//清空:除请选择以外的所有
$("#cityoption[value!='']").remove();
//遍历xml
$provinceXmlElements.each(function(index,domEle){
var$provinceXmlValue = $(domEle).attr("name");
//如果页面省份名称等于xml省份名称(找到了)
if($provinceValue==$provinceXmlValue){
//根据省份查找下面所有city
var$cityXmlELements = $(domEle).find("city");
//遍历,获取文本内容
$cityXmlELements.each(function(index,domEle){
var$cityXmlValue = $(domEle).text();
/*加入到第二个下拉选中
* <select id="city"name="city">
<optionvalue="">请选择.....</option>
</select>
*/
var$option = $("<option></option>");
//设置属性
$option.attr("value",$cityXmlValue);
//设置文本
$option.text($cityXmlValue);
var$cityElement = $("#city");
$cityElement.append($option);
});
}
});
});
});
</script>