Ajax学习
以前,当我们点击了一个按钮,向服务器请求数据的时候,通常会有这么一个流程。浏览器向服务器发送Http请求→服务器返回整个页面→浏览器将原先的整个页面替换成新的页面。这样子做当然没有什么问题,但是比如在看土豆的视频的时候,想看一下下方的评论,不过瘾,想再看下一页的评论,这时候浏览器会向服务器发请求,要是正在看视频的时候整个页面重新加载,视频重加载一次,那简直不可饶恕。所以就产生了Ajax这种技术,用来进行页面的局部刷新,省的每次更新界面都得重新下载一个完整的界面。Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中,不是整个页面刷新,而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据,就像JavaScript版的WebClient一样,在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据,这样页面就不会整个刷新了。
下面我们将用一个小例子来体验一下Ajax的神奇。我们将会做一个向服务器获取时间的小页面,这个东西将通过XmlHTTPRequest向服务器发送请求。
浏览器端的Ajax请求代码![复制代码](http://common.cnblogs.com/images/copycode.gif)
script type="text/javascript" function btnClick() { var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象 if (!xmlHttp) { //判断xmlHttp对象是否创建成功 alert("创建xmlHttp对象异常!"); return false; xmlHttp.open("POST", "GetDate.ashx?ts=" + encodeURI("哈哈"), false); //准备向服务器的GetDate发出post请求 //XMLHTTP默认(也推荐)不是同步请求的,也就是open方法并不等服务器响应数据才返回,而是监听服务器 //返回的数据,因此需要监听onreadystatechange事件。 xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) {//如果状态码为200则是成功 alert(xmlHttp.responseText);//responseText是服务器返回的文本 document.getElementById("Text1").value = xmlHttp.responseText; else { alert("Ajax服务器错误"); xmlHttp.send(); /script
![复制代码](http://common.cnblogs.com/images/copycode.gif)
在这段代码中,我们做了一下几件事情:1、创建一个XmlHttpRequest对象用来处理Ajax请求。2、我们调用XmlHttpRequest.open()方法准备Ajax请求,传进去的参数主要是选择请求的方法和请求的URL。3、我们将XmlHttpRequest.onreadystatechange绑定上我们自己的处理函数,主要就是判断返回的消息是否正确,如果正确,那么从返回的消息中提取我们需要的信息并绑定到指定的控件上。4、向服务器发起请求。
其实这个过程有点像数据库的查询(执行)过程。数据库的查询要经历这么几个步骤,首先建立数据库的连接,通常是通过指定的数据库连接字符串进行数据库的匹配,再次就是进行查询操作,最后操作完成后对查询的结果进行处理。
服务器端代码我们在Vs2010中创建一个WebApplication,并创建一个GetDate.Ashx来处理客户端的请求。
![复制代码](http://common.cnblogs.com/images/copycode.gif)
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace testAjax /// summary /// GetDate 的摘要说明 /// /summary public class GetDate : IHttpHandler public void ProcessRequest(HttpContext context) string time = context.Request["ts"]; context.Response.ContentType = "text/plain"; context.Response.Write(DateTime.Now.ToString() + time); public bool IsReusable return false; }
![复制代码](http://common.cnblogs.com/images/copycode.gif)
这个一般处理程序其实就做一件事情,就是将服务器上面的时间发送给客户端。
补充说明:1、前面我们定义了Ajax的同步请求,如果我们发送异步请求,那么在请求过程中javascript代码会继续执行,这时可以通过readyState属性判断请求的状态(即上文xmlHttp.readyState==4处的代码),当readyState = 4时,表示收到全部响应数据,属性值的定义如下:
作者:kissazi2
出处:http://www.cnblogs.com/kissazi2/
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
转载:http://www.cnblogs.com/kissazi2/p/3294341.html
相关文章
- ajax发送异步请求四个步骤,深入理解ajax异步请求的五个步骤(详细代码)
- Select2-Ajax获取数据
- 史上最详细Ajax学习笔记
- JS 学习笔记(二)Ajax的简单使用
- Struts2 ajax json使用介绍详解编程语言
- jQuery Ajax 实例 ($.ajax、$.post、$.get)详解编程语言
- jquery ajax详解编程语言
- 使用Ajax轻松访问和操作MySQL数据库(ajax访问mysql)
- 使用Ajax和Mysql实现简单点赞功能(ajax mysql点赞)
- Ajax与MySQL实现高效率数据加载(ajax mysql加载)
- AJAX技术简化Oracle数据库的访问处理(ajax连接oracle)
- 使用Ajax与Oracle实现极致可靠性开发(ajax oracle)
- 健壮的AJAX源码学习应用示例
- AJAX和DOM的运行经验
- AJAX缓存问题的两种解决方法(IE)
- Ajax对象包含post和get两种异步传输方式
- ajax页面无刷新IE下遭遇Ajax缓存导致数据不更新的问题
- IE关闭时判断及AJAX注销案例学习
- jQuery学习笔记之Ajax操作篇(一)-数据加载
- ajax异步处理POST表单中的数据示例代码
- 使用ajax操作JavaScript对象详解