天天看点

Ajax学习

以前,当我们点击了一个按钮,向服务器请求数据的时候,通常会有这么一个流程。浏览器向服务器发送http请求→服务器返回整个页面→浏览器将原先的整个页面替换成新的页面。这样子做当然没有什么问题,但是比如在看土豆的视频的时候,想看一下下方的评论,不过瘾,想再看下一页的评论,这时候浏览器会向服务器发请求,要是正在看视频的时候整个页面重新加载,视频重加载一次,那简直不可饶恕。所以就产生了ajax这种技术,用来进行页面的局部刷新,省的每次更新界面都得重新下载一个完整的界面。ajax(asynchronous javascript and xml,异步javascript和xml)是一种进行页面局部异步刷新的技术。用ajax向服务器发送请求和获得服务器返回的数据并且更新到界面中,不是整个页面刷新,而是在html页面中使用javascript创建xmlhttprequest对象来向服务器发出请求以及获得返回的数据,就像javascript版的webclient一样,在页面中由xmlhttprequest来发出http请求和获得服务器的返回数据,这样页面就不会整个刷新了。

      下面我们将用一个小例子来体验一下ajax的神奇。我们将会做一个向服务器获取时间的小页面,这个东西将通过xmlhttprequest向服务器发送请求。

Ajax学习
Ajax学习

在这段代码中,我们做了一下几件事情:1、创建一个xmlhttprequest对象用来处理ajax请求。2、我们调用xmlhttprequest.open()方法准备ajax请求,传进去的参数主要是选择请求的方法和请求的url。3、我们将xmlhttprequest.onreadystatechange绑定上我们自己的处理函数,主要就是判断返回的消息是否正确,如果正确,那么从返回的消息中提取我们需要的信息并绑定到指定的控件上。4、向服务器发起请求。

其实这个过程有点像数据库的查询(执行)过程。数据库的查询要经历这么几个步骤,首先建立数据库的连接,通常是通过指定的数据库连接字符串进行数据库的匹配,再次就是进行查询操作,最后操作完成后对查询的结果进行处理。

我们在vs2010中创建一个webapplication,并创建一个getdate.ashx来处理客户端的请求。

Ajax学习
Ajax学习

这个一般处理程序其实就做一件事情,就是将服务器上面的时间发送给客户端。

1、前面我们定义了ajax的同步请求,如果我们发送异步请求,那么在请求过程中javascript代码会继续执行,这时可以通过readystate属性判断请求的状态(即上文xmlhttp.readystate==4处的代码),当readystate = 4时,表示收到全部响应数据,属性值的定义如下:

readystate值

描述

未初始化;尚未调用open()方法

1

启动;尚未调用send()方法

2

已发送;但尚未收到响应

3

接收;已经收到部分响应数据

4

完成;收到全部响应数据

<a href="http://files.cnblogs.com/kissazi2/testajax.zip"> ----示例代码</a>

<a href="http://kb.cnblogs.com/page/150964/">ajax与json的一些总结</a>

<a href="http://www.w3.org/tr/xmlhttprequest/">xmlhttprequest</a>

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

转载:http://www.cnblogs.com/kissazi2/p/3294341.html