ajax实例(.net)

 

5.2 Ajax基础http://book.youkuaiyun.com/bookfiles/653/10065320712.shtml

在 进行Ajax开发以前，我们必须先对一些基本的知识进行了解。虽然Ajax.NET已经将Ajax实现细节封装起来，并大大简化了我们的操作，但是了解基 本的Ajax实现方式对于帮助我们在开发中能更好理解和实施，以及更有效地优化和排错是至关重要的。此外，虽然我们不必编写具体的Ajax调用代理，但是 在调用代理前获取数据，以及返回数据后怎样使数据能够正确显示，这两部分工作都需要我们具有基本的JavaScript操作DOM模型的能力。接下来我们 将来对这几方面的知识进行讨论。

5.2.1 XMLHttpRequest对象

对 于Ajax技术的基础和核心，XMLHttpRequest对象应该是我们必须要了解的一个对象，Ajax实现的关键发送异步请求并接收响应执行回调都是 通过它来完成的。XMLHttpRequest最早是在Microsoft Internet Explorer 5.0以ActiveX组件中被引入的，之后各大浏览器厂商都以JavaScript内置对象的方式实现了XMLHttpRequest对象。虽然大家对 它的实现方式有所区别，但是绝大多数浏览器都提供了类似的属性和方法，在实际脚本编写方法上区别不大，并且实现得到的效果也基本相同，目前W3C正致力于 将XMLHttpRequest对象制定一个统一的标准使各个浏览器厂商遵照执行，以利于Ajax技术的推广与发展。

XMLHttpRequest提供了一个相对精简易用的API，下面我们就将简单地介绍一下它所提供的属性和方法以及怎么利用这些属性和方法完成一次Ajax的请求和响应处理。

1．readyState属性

当一个XMLHttpRequest对象被创建后，此属性标识了此对象正处于什么状态，我们可以通过对此属性的访问，来判断此次请求的状态是什么然后做出相应的操作。具体此属性的值代表的意义见表5-1。

表5-1

值	说    明
0	未初始化状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化此对象的属性
1	准备发送状态；此时，已经调用了XMLHttpRequest对象的Open()方法，并且已经准备好将一个XMLHttpRequest请求发送到服务端
2	已发送状态；此时，已经调用了XMLHttpRequest对象的Send()方法，但是并没有收到任何响应
3	正在接收状态；此时，已经开始接收HttpResponse响应信息但是还没有完成接收
4	完成响应状态；此时，已经完成了HttpResponse响应的接收

2．responseText属性

此属性描述的是一个HttpResponse中的全部文本内容，通过访问它，可以得到一次XMLHttpRequest得到响应回传的全部文本内容。只有当ReadyState的值为3或4时此属性才会有部分或者全部值，否则此属性只会是空字串。

3．responseXML属性

只有当 ReadyState属性为4，并且响应头部的Content-Type的MIME类型被指定为XML（text/xml或者 application/xml）时，此属性才会有值并且被解析为一个XML文档，否则此属性为Null。若是回传的XML文档结构不良或未完成响应回 传，此属性也会为Null，由此可见，此属性用来描述被XMLHttpRequest解析后的XML文档的属性。

4．status属性

用于描述服务器Http请求的状态值，通过此属性值我们可以判断服务器的响应状态，如我们通常通过判断status==200来判断服务器是否正常返回。但是注意，必须是日readyState为3或4时才能对此属性进行访问。

5．status属性

用于描述服务器Http请求的状态文本，通过此属性我们可以得到服务器响应的状态的描述文本，与status属性同样，必须在readyState为3或4时才能对此属性进行访问。

6．onreadystatechange事件

每当readyState发生改变时触发此事件，我们一般都通过此事件来触发回传处理函数。

7．open()方法

XMLHttpRequest 对象是通过open(method，uri，async，username，password)的方法来进行初始化工作的，通过调用此方法将得到一个可以 用来进行发送（send()方法）的对象。其中method参数是用来指定发送请求的HttpRequest类型，其值类型为字串，值可以为get、 post、put、delete等；uri参数是用来指定请求被发送到的服务器地址，该地址会被自动解析为绝对地址，所以在这里可以用相对地址来表示； async是一个类型为boolean类型的参数，默认情况下为true，此时表示为异步提交，如果希望发送一个同步请求可以将此值设为false；在服 务器需要验证访问用户的情况，我们可以设置username以及password两个参数。

当open()方法被调用时，XMLHttpRequest对象将会把readyState属性设为1，且初始化其他属性，如果此时一个请求正在被发送或者响应正在被接收，则前一请求的数据和内容将会丢失，请求将会被取消。

8．send()方法

当调用 open()方法后，我们就可以通过调用send()方法按照open()方法设定的参数将请求进行发送。当open()方法中async参数为true 时，在send()方法调用后立即return，否则将会中断直到请求返回。需要注意的是，send()方法必须在readyState为1时，即调用 open()方法以后调用。在调用send()方法以后到接收到响应头之前，readyState的值将被设为2，一旦开始接收到响应消息， readyState将会被设为3，直到响应接收完成，readyState的值才会被设为4。

9．abort()方法

该方法可以暂停一个HttpRequest的请求发送或是HttpResponse的接收，并且将XMLHttpRequest对象设置为初始化状态。

10．setRequestHeader()方法

该方法用于在调用open()方法后，设置HttpRequest头的信息，setRequestHeader（header,value）方法包含两个参数，前一个是header键名称，后一个是其值。

11．getResponseHeader()方法

此方法在readyState为3或4时，用于获取HttpResponse的头部信息，此外我们还可以通过getAllResponseHeaders()获取所有的HttpResponse的头部信息。

在搞清楚了XMLHttpRequest的这些基本属性方法以后，我们就可以开始编写我们的第一个Ajax程序了。我们准备通过点击一个按钮然后通过Ajax的方式到服务端取回一个Hello world!的字符串显示在界面的一个文本框里。

我们在一个配置好的站点工程里面新建一个名为AjaxTest.aspx页面。首先我们在cs文件中的page_load事件函数中写下如下代码：

AjaxTest.aspx.cs:

    protected void Page_Load(object sender, EventArgs e)

    {

        if (Request.QueryString["s"] == "1")//使用查询字串来指示这个请求是通过Ajax发出的

        {

            Response.Write("hello world!");//向HttpResponse中输出hello world!

            Response.End();//将页面缓冲发送向客户端浏览器 并中止该页输出

                           //如果去掉这句 会得到多余的HTML代码

        }

    }

相对来说，我们在前台页面中书写的代码将会多一些，慢慢地你会发现这也许是Ajax的一个惯例：

AjaxTest.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTest.aspx.cs" Inherits= "AjaxTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>测试</title>

    <script language="javascript" type="text/javascript">

    <!--

    function GetInfo(){//我们就是通过这个函数来异步获取信息的

        var xmlHttpReq = null;//声明一个空对象用来装入XMLHttpRequest

        if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象

            xmlHttpReq = new XMLHttpRequest();//我们通常采用这种方式实例化一个XMLHttpRequest

        }

        else if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的

            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

                                            //IE5 IE6是通过这种方式

        }

        if(xmlHttpReq != null){//如果对象实例化成功 我们就可以干活啦

            xmlHttpReq.open("get","AjaxTest.aspx?s=1",true);

                                           //调用open()方法并采用异步方式

            xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数

            xmlHttpReq.send(null);//因为使用get方式提交，所以可以使用null参调用

        }

        function RequestCallBack(){//一旦readyState值改变，将会调用这个函数

            if(xmlHttpReq.readyState == 4)

            {

                document.getElementById("iptText").value = xmlHttpReq.responseText;

                //将xmlHttpReq.responseText的值赋给iptText控件

            }

        }

    }

    -->

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <input id="iptText" type="text" value="" />

            <input type="button" id="" value="Ajax提交" onclick="GetInfo();" />

            <!--点击这个按钮调用-->

        </div>

    </form>

</body>

</html>

如果你在点击按钮的瞬间发现文本框内闪电般地出现了 “Hello world!”，那么恭喜你，你已经完成了一个Ajax调用。如果你还对前台页面中那些和C#貌似神离的代码觉得不太明白，没关系，接下来我们就将来简单 学习一下Ajax另外一个重要的部分——JavaScript