【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浏览器内核的是:
varxmlhttprequest = new activexobject("microsoft.xmlhttp");或varxmlhttprequest = 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”了。
1public void processrequest(httpcontext context)
2{
3context.response.contenttype = "text/plain";
4context.response.write("hello world");
5}
在发送大数据量的时候,我们就不能简单的发送一行字符了,我们需要使用构造xml格式来进行大数据量的传递,这样主页面使用起来也方便,在主界面获取信息的时候
可以像xml操作那样直接获取各个节点的值。
document.getelementbyid("text").value = xmlhttprequest.responsexml.documentelement.firstchild.nodevalue;
这样主页面和后台的交互就完成了,效果就是部分刷新来与后台通信,关键部分就是要熟悉使用xmlhttprequest对象的流程:
ajax 应用
提交
1.xmlhttprequest————>请求
返回分析
2.服务器————>数据点此下载
喜欢我的文章的话就关注我吧!大家的支持就是我的动力!

======================================================

在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/