Ajax

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="吉林省">

</province>

<provincename="辽宁省">

</province>

<provincename="山东省">

</province>

</china>

</select>

<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">

</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>