有一半清醒,有一半醉!这可能是众位看客看过之前两篇博客后的感觉.没关系,继续闷头看起!!!
你的脑壳一定要建立这样一种信念,ajax不是新的技术,而是对客户端技术js/dom/css的综合运用而已.所以掌握ajax,最重要是在锤炼你的js/dom/css功底.从web应用角度来看,无非就是处理两种事情
1.request-请求即浏览器向服务器请求数据
我们来看看在request方都需要做哪些事情呢?
1.1XMLHttpRequest对象的构建
ajax方式的请求是借助浏览器的一个对象XMLHttpRequest来实现.而获取XMLHttpRequest对象在不同类型的浏览器中的方式不同,火狐浏览器直接通过new XMLHttpRequest()来完成,而对于IE浏览器来说,则需要根据IE的不同版本来实现XMLHttpRequest对象的构建.当获得XMLHttpRequest对象后保存在一个变量中,命名成http_request.
1.2设置响应处理函数
在发送请求数据的时候,就需要提前设置谁来处理服务器返回的数据,对客户端来讲,当然就是某个js函数了.这里设置响应处理函数用这样一句代码来实现:
http_request.onreadystatechange=doHandler;
其中,onreadystatechange是XMLHttpRequest对象上的一个属性,整句代码的意思是"当服务器将数据返回后,将数据交给函数名为doHandler的函数负责处理".函数doHandler需要你单独编写.
1.3构建请求服务器地址和发送数据
服务器地址的构建是根据客户端的请求方式的不同而不同,如果客户端请求方式为post时,这时,地址和请求数据的构建是分离的.在前文的实例当中,我们是将数据发送到服务器端的一个叫做CheckAccountServlet来处理,那么请求地址和数据的构建如下:
var url = CheckAccountServlet;
var data = "name=zhangsan&password=123"
如果服务器端地址为/abc/cfg/CheckAccountServlet,那么这里就应该变成var url = abc/cfg/CheckAccountServlet,总之这里的地址是跟你所请求的服务器地址始终保持一致.
而对于请求方式为get时,这时,地址和请求数据一起来构建成一个完成的url.示例代码如下:
var url = "CheckAccountServlet?name=zhangsan&password=123"
在发送时,就将url直接以get方式发送到服务器上.
1.4连接服务器
就跟你操作db一样,在真正执行sql语句之前,你必须先跟db连接上.同样的,ajax要想发送数据则也需先跟服务器建立连接,建立连接代码如下
http_request.open(method,url,flag);
其中,method代表客户端请求方式,取值为post或者get
url代表服务器地址(具体构建方式见1.3)
flag取值为true或者false,如果为true表示只有和服务器建立连接成功后才执行发送数据,否则,相反(建议设置为true)
1.5.发送请求数据
如果请求方式为get,由于数据已经一并附加到url后面,所以,发送时直接调用http_request.send(null)即可.
如果请求方式为post,则需要将按照格式构建好的数据传递给send函数,并且在调用send函数前还需加上另外一个行代码,整个代码如下:
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(data);
至此,客户端的处理已经宣告结束.剩下的就是服务器端的处理了
2.response-响应即服务器将响应数据发送回浏览器
我们再来看看在response方都需要做哪些事情呢?
2.1获取请求数据
跟你获取表单数据一样,获取ajax提交上来的数据也是采用request.getParameter()来实现
2.2处理请求数据
具体的数据处理就是你的事情了(做你想做的一切事情!)
2.3输出响应数据
要想把响应数据输出给客户端,只能通过输出流的方式来实现.
PrintWriter out = response.getWriter();//获取输出流
out.println("Some message");//开始输出响应数据
.......
out.close();//关闭输出流
这里,需要重点强调几点:
2.3.1.如果输出信息中包含中文,则需要在获取输出流之前添加response.setContentType("text/html;charset=gb2312");
2.3.2.设置让浏览器无缓存,添加response.setHeader("Cache-Control","no-cache");
2.3.3.输出信息只允许两种形式,分别是文本信息和xml格式的字符串信息.如果是文本信息,则按照前面的方式直接输出即可.如果是xml格式的字符串信息,则需要更改2.3.1.提到的代码response.setContentType("text/html;charset=gb2312")为response.setContentType("text/xml;charset=gb2312")
至此,服务器端的响应信息已经输出完成(但我们的路还差最后一步哦,加点油,我们马上成功啦!!!)
2.4.客户端处理服务器返回的数据
那么,在哪来处理服务器返回的数据呢?还记得1.2提到的doHandler函数吗?
对了,doHandler函数就负责处理返回的数据的.来看看,它都做了哪些事情
/*具体负责处理服务器返回数据的函数*/
function doResponse(){
//当服务器将数据返回给客户端时,readyState状态值为4
if(http_request.readyState==4){
//当服务器返回的数据是正常的数据时,status状态值为200
if(http_request.status==200){
//通过XMLHttpRequest对象的responseText属性获取
//服务器返回的文本信息
var returnMsg = http_request.responseText;
//将响应信息显示到页面上
showMessage(returnMsg);
}
}
}
这里的函数doResponse函数就是起到doHandler的作用(说过了嘛,doHandler函数名称可以任意取的嘛,别纠着函数名不放好不好).
关键的地方在于通过什么来获取服务器给我们返回的数据.XMLHttpRequest对象上提供两个属性供我们抉择.
2.4.1.responseText-如果服务器端返回的是普通的文本信息的话,用它就够了.
2.4.2.responseXML-如果服务器端返回的是xml格式的数据,则需要用它.而如果用它的话,那么就需要dom技术来解析其中的数据喽!(见下回分解)
大功告成,一切的一切都已经OK,请问,您酒醒了吗?
分享到:
- 2007-05-23 18:21
- 浏览 2716
- 评论(4)
- 论坛回复 / 浏览 (1 / 3568)
- 查看更多
相关推荐
全书共分为4大部分,前3部分通过一些详细的小实例,介绍了Ajax技术中的各个组成部分,并深入这些组成元素的技术内部,力求挖掘出更完整、更深入的Ajax技术。最后一部分通过几个大型的实例,让读者深入领会Ajax技术...
json是一种轻量级的数据...下面我们正式来利用数据挖掘对json文件进行处理 现在很多网站都运用了Ajax,所以一般很多都是XHR文件 通过这里我想利用一个地图网站来演示 我们通过浏览器的调试获取了相关url https://di
根据企业建设期特点,通过简单的用户界面和方便实用的功能,除了方便管理者的基本客户管理、合同管理、收款管理、员工管理等,还对相关 数据进行深入挖掘,通过柱形图、饼状图等各种统计方式进行统计。 本客户关系...
根据企业发展期特点,通过简单的用户界面和方便实用的功能,除了方便管理者的基本客户管理、合同管理、收款管理、员工管理、考勤管理、服务管理等,还对相关 数据进行深入挖掘,通过柱形图、饼状图等各种统计方式...
根据企业筹划期特点,通过简单的用户界面和方便实用的功能,除了方便筹划者的基本客户管理、合同管理、收款管理等,还对相关 数据进行深入挖掘,通过柱形图、饼状图等各种统计方式进行统计。 本客户关系管理软件...
数组,字符串,使用正则表达式操纵字符串,客户端,控制文档结构的模型,JavaScript事件驱动模型,CSS,Cookie,XML和JSON,Ajax,深入JavaScript面向对象编程,深入JavaScript函数式编程,深入JavaScript动态化编程...
JavaScript对象,数组,字符串,使用正则表达式操纵字符串,客户端,控制文档结构的模型,JavaScript事件驱动模型,CSS,Cookie,XML和JSON,Ajax,深入JavaScript面向对象编程,深入JavaScript函数式编程,深入...
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。
本书以全新ASP.NET 2.0内容设计为出发点...内容以专家级水平为基准点,透过精辟立论来诠释ASP.NET 2.0技术之美,挖掘最深入的秘密,目的是为了引领与造就读者成为ASP.NET 2.0专家,清清楚楚地了解ASP.NET 2.0技术脉络。