【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”了。

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

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

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

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

AJAX 应用

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

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

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

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

点此下载

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