博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Ajax的应用实例解析

Posted on 2011-10-25 16:46  小飞龙(Jack)  阅读(158)  评论(0编辑  收藏  举报

【Asp.Net】教你一步一步学习Ajax(一)使用GET方法

关于Ajax概念方面的叙述就不写了,不清楚的园友可以去百度搜索下。(点此进入

注意:Ajax不是一门编程语言,它是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

Ajxa可以为我们做什么呢?我们为什么需要用到Ajax呢?

如今技术的飞跃发展,用户体验的越来越重要。面对干巴巴的一个、没有任何效果的页面,用户是不会过多的停留。只有那些很炫,用户体验好的页面,用户才会花些时间去浏览。

然后如今浏览量就是一个网站的成功的标志。要想获取更多的用户,你就必须让页面符合用户的习惯和用户的需求。

通过 AJAX,您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。 这样在用户的网络不稳定的情况下,只是部分刷新而不影响用户在该页面进行浏览或其他操作。

关于XMLHttpRequest 的几个重要属性和方法:

属性:

readyState:0 - (未初始化)还没有调用send()方法; 1 - (载入)已调用send()方法,正在发送请求;2 - (载入完成)send()方法执行完成,已经接收到全部响应内容; 3 - (交互)正在解析响应内容; 4 - (完成)响应内容解析完成,可以在客户端调用了。

onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

status:(1)200: "OK";(2)404: 未找到页面。

方法:void open(string,string,boolean)、void send(string)、void setHeader(string,string)、string getResponseHeader(string)、

string getAllResponseHeaders()、void abort()。

  使用Ajax有几个流程必须是要熟悉的:

1.创建一个XMLHttpRequest对象来进行异步与服务器进行通信。在创建该对象时要注意根据浏览器的不同而创建不同的对象。基于IE浏览器内核的是:

var  xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");或var  xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"),此种方法有很多种版本。

基于其他则有:var xmlHttpRequest = new XMLHttpRequest()。

2.创建好对象后就需要使用open方法来进行交互的设置了, xmlHttpRequest.open("GET", url, true);其中“get”表示使用的是GET方法,传入的url为获取数据或者交互的地址;第三个参数,当该boolean值为true时,服务器请求是异步进行的,也就是脚本执行send()方法后不等待 服务器的执行结果,而是继续执行脚本代码; 当该boolean值为false时,服务器请求是同步进行的,也就是脚本执行send()方法后等待 服务器的执行结果的返回,若在等待过程中超时,则不再等待,继续执行后面的脚本代码!

3.给onreadystatechange 指定一个调用的函数,赋值为函数名,如:xmlHttpRequest.onreadystatechange = getfromHandler;

4.启用send方法进行交互。xmlHttpRequest.send(null);因为使用的是get方法,在此不需要利用send来传递参数值。

5.实现在第三步中的getfromHandler()函数。因为是在通信结束后才进行的操作,所以先判断readyState值是否为4,Status是否为200,然后再进行需要对页面的操作。

 

 function getfromHandler() {
if (xmlHttpRequest.readyState == 4) {
if (xmlHttpRequest.Status == 200) {
document.getElementById("Result").value = xmlHttpRequest.responseText;
}
}
}


上面是页面获取到后台传来的数据(xmlHttpRequest.responseText),下面介绍后台是如何发送数据的。

使用一般处理程序来与进行数据的操作,在此处可以根据需要的数据进行处理后发回到主页面,简单的就是“Hello World”了。

1  public void ProcessRequest(HttpContext context)
2 {
3 context.Response.ContentType = "text/plain";
4 context.Response.Write("Hello World");
5 }

在发送大数据量的时候,我们就不能简单的发送一行字符了,我们需要使用构造XML格式来进行大数据量的传递,这样主页面使用起来也方便,在主界面获取信息的时候
可以像XML操作那样直接获取各个节点的值。

document.getElementById("text").value = xmlHttpRequest.responseXML.documentElement.firstChild.nodeValue;

这样主页面和后台的交互就完成了,效果就是部分刷新来与后台通信,关键部分就是要熟悉使用XMLHttpRequest对象的流程:

AJAX 应用

             提交
1.   XMLHttpRequest————>请求

        返回          分析
             2.服务器————>数据<————3.JavaScript

令附带上2个小示例,一个普通的“Hello World”,还有一个是与数据的交互,当然读者不能直接运行的了,因为你们没得我本地的数据库,只需修改便能正常运行了,留点考验给读者了,应该都能完成吧!

本篇博文感觉写得不好,希望大家能多多指点,在此表示歉意。

点此下载

喜欢我的文章的话就关注我吧!大家的支持就是我的动力!

 

转载请说明出处并联系作者,否则将追究法律责任。 博主QQ:1226051092 http://www.cnblogs.com/Zeech-Lee