深入挖掘AJAX（来源：http://superbo8888.javaeye.com）

用面向对象的思维来写JS | 告诉你AJAX怎么玩
2007-05-23
深入挖掘AJAX
关键字: 深入挖掘AJAX

有一半清醒,有一半醉!这可能是众位看客看过之前两篇博客后的感觉.没关系,继续闷头看起!!!

你的脑壳一定要建立这样一种信念,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,请问,您酒醒了吗?

深入挖掘AJAX（来源：http://superbo8888.javaeye.com）相关推荐

ajax更改dom,javascript – 用Ajax响应替换DOM节点
我有一个ajax响应,看起来像这样: some other text 我想用resp替换下面的element1: 所以在替换后我会得到: some other text 我尝试了replaceChil ...
php如何获取ajax请求,php-从ajax调用获取json数据
我的问题是:我的php脚本如何发送json类型数据并收到返回成功或完成的功能? 我试图让this聊天功能在我的网站上工作因为它不起作用,所以我在代码中创建了一个最小化部分以进行检查如果与json ...
checkbox ajax 不选中的值,php – 无法通过ajax传递checkbox的值
我有从数据库收到的表: //$id = $_SESSION['staff_id']; $teamResult = getQuarter($leader_id); $count1 = 0; if (my ...
解读：通过挖掘概念间共享信息，实现股票趋势预测的图模型框架
写在前面下面这篇文章的内容主要是来自发表于微软亚洲研究院同中山大学合作的一篇文章<HIST: A Graph-based Framework for Stock Trend Forecasti ...
从艺赛旗iS-RPM，看国产流程挖掘产品的发展与特性
从艺赛旗iS-RPM,看国产流程挖掘产品的发展与特性艺赛旗发布iS-RPM,国产流程挖掘产品有哪些特性与优势? 文/王吉伟要问2022年业务流程领域哪个技术最火,绝对非流程挖掘莫属. 2019年, ...
明略数据SCOPA发布开启大数据关联挖掘的新时代
10月22日,明略数据战略产品发布会在中国大饭店隆重召开,同时也开启了基于数据关系挖掘的大数据智能分析新篇章.此次发布会吸引了众多明略数据的客户.合作伙伴及行业专业人士莅临到场.明略数据董事长吴明辉先 ...
刚开始走向工作岗位初遇到的一些问题
1. Ubuntu Eclipse SVN 密码 1. 关键字: Ubuntu Eclipse SVN 记录密码 subclipse 因为偷懒直接复制别人的Eclipse,没想到它记录密码了,然后提 ...
[导入]ExtJs 2.0 弹窗事例
网站: JavaEye 作者: ppkosd 链接:http://ppkosd.javaeye.com/blog/133004 发表时间: 2007年10月18日责任不是你应该做的事情,而是你 ...
342.基于高通量技术的微生物组研究实验设计
基于高通量技术的微生物组研究实验设计 --微生物组研究,从方案设计到写作套路(二) 作者:王晓雯凌波微课版本1.0.2,更新日期:2020年9月22日好文章离不开好设计研究第一步就是要结合自己 ...
【转】Traceview的使用
Traceview是android平台配备的一个很好的性能分析工具.它可以通过图形化的方式让我们了解我们要跟踪的程序的性能,并且能具体到method. 使用Traceview的版本限制对于Andro ...

深入挖掘AJAX（来源：http://superbo8888.javaeye.com）

深入挖掘AJAX（来源：http://superbo8888.javaeye.com）相关推荐

最新文章

热门文章