2.3 重新认识Ajax
在第一章的时候已经看到了jQuery中的Ajax效果，然而由于基础知识的限制只演示了其中十分基础的一部分功能，对于jQuery中真正强大的Ajax功能等没有进行详细介绍，在这一章节将会详细介绍jQuery中如何轻松地实现所需的Ajax效果。Ajax可以说是网页开发过程中经常使用到的效果，同时Ajax效果能够极大的提高用户的体验度，能够为用户提供更好的交互体验，然而对于网页开发的新手来说Ajax效果并不是那么简单就可以实现的，需要很多的开发经验，然而就是因为有jQuery这一优秀的JavaScript类库才使得这样一个效果得以轻松实现。在进行本章的学习前希望已经掌握了如下内容：
HTML/XHTML语言
JavaScript/DOM操作
而通过这一节的学习，将会掌握Ajax的原理以及在jQuery中如何实现Ajax。
由于这一节开始要进入前台页面与服务器交互方面的内容，服务器脚本有很多语言或者框架来书写。比如经常使用的框架：ASP、ASP.NET、JSP、PHP等，本章节将统一使用ASP.NET作为服务器端框架，并使用C#语言来书写服务器端的脚本。这里给出在Visual Studio中如何建立一个简单的测试用的网站。Visual Studio 2008以及以上版本均满足本书的要求，Windows 8下可安装2012版本，这里以2012为例来进行讲解。
下载并安装VisualStudio 2012
图2-50 Visual Studio 2012图标
软件打开后的界面如下：
图2-51 Visual Studio 2012截图
之后单击新建项目：
之后选择语言C# 中的Web
图2-53 新建项目菜单
这里要选择使用.NETFramework 4 并选择ASP.NET 空Web应用程序。
图2-54 新建项目
图2-55 新建项目
图2-56 新建网站
新建立的网站是有这样一个目录，目前里面什么没有，在后续的章节中将会向里面添加内容，在后续的章节中遇到HTML代码请按照如下方式添加：
图2-57 弹出菜单
图2-59 添加一般处理程序
2.3.1 Ajax的组成
Ajax涉及到了许多基本技术：
HTML用于建立Web表单并确定应用程序其他部分使用的字段。
JavaScript代码是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。
DHTML或Dynamic HTML，用于动态更新表单。将使用div、span和其他动态HTML元素来标记HTML。
文档对象模型DOM用于（通过JavaScript代码）处理HTML结构和服务器返回的XML。
只有熟悉了这些技术的核心内容才能够真正的理解Ajax的组成，接下来将通过一段实例来讲解Ajax的组成：
Ajax组成的JavaScript代码
01 <html>
02 <head>
03 <scripttype="text/javascript">
04 functionloadXMLDoc()
05 {
06 varxmlhttp;
07 if(window.XMLHttpRequest)
08 {//code for IE7+,Firefox,Chrome,Opera,Safari
09 xmlhttp=new XMLHttpRequest();
10 }
11 else
12 {// code for IE6,IE5
13 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
14 }
15 xmlhttp.onreadystatechange=function()
16 {
17 if(xmlhttp.readyState==4 && xmlhttp.status==200)
18 {
19 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
20 }
21 }
22 xmlhttp.open("GET","/ajax/demo_get.asp?t="+ Math.random(),true);
23 xmlhttp.send();
24 }
25 </script>
26 </head>
27 <body>
28 <h2>AJAX</h2>
29<button type="button" onclick="loadXMLDoc()">请求数据</button>
30 <divid="myDiv"></div>
31 </body>
32 </html>
Ajax组成的运行效果：
图2-60 载入效果
图2-61 Ajax效果
在这个完整的Ajax过程包含了HTML（button可以看做Ajax开始的控制），JavaScript代码（书写了Ajax的核心代码，明确了整个运行过程中素需要用到的参数、函数等信息），DynamicHTML（div用于显示服务器返回的信息）。这里只简单的介绍Ajax的组成所必须的部分，在下一节将会对Ajax的工作原理进行更为详细的讲解。
2.3.2 Ajax的工作原理
通过前一节的学习相信已经对Ajax的整体的工作流程以及Ajax的组成有了一个大致的了解了，这一节将会进一步解析Ajax的工作原理，使得能够对于这个过程能够理解的更为详细清晰。这里将会对上一节的那个代码进行一个更加全面的剖析，以此让大家对Ajax的工作原理能够理解的更为清晰，需要明白的是Ajax并不是什么新的语言而是新的技术实现标准。
在这个代码中通过Ajax向服务器发送了一个获取系统时间请求，在执行代码的过程中没有发现整个页面的重新载入而是在请求数据button下面直接显示了请求的信息。这就是一个动态页面效果了，而Ajax就是实现动态页面的有力工具。
接下来通过分析一下上面的那段代码，来解析一下Ajax的组成：
01<button type="button" onclick="loadXMLDoc()">请求数据</button>
这句代码可以说是Ajax请求的开始，当点击按钮后才会开始进行数据的请求。也就是上面提到的Ajax所需要的技术之一HTML。
02 <divid="myDiv"></div>
这个是DynamicHTML内容的标签的，当Ajax请求成功时将会改变这个动态内容块的内容，也就是上面提到的DHTML或Dynamic HTML。
01 if(window.XMLHttpRequest)
02 {// codefor IE7+,Safari
03 xmlhttp=new XMLHttpRequest();
04 }
05 else
06 {// codefor IE6,IE5
07 xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
08 }
这里是为了建立XMLHttpRequest对象，由于不同版本的浏览器存在着兼容性问题，对于低版本的InternetExplorer浏览器需要另外的方法来实例化XMLHttpRequest对象。
01 xmlhttp.onreadystatechange=function()
02 {
03 if (xmlhttp.readyState==4 &&xmlhttp.status==200)
04 {
05 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
06 }
07 }
这里为xmlhttp对象的onreadystatechange属性设定出对象，其实这里实在为整个请求的状态改变设定处理函数，当readyState变为4，status变为200，这两个参数的意思是这个请求成功发出并得到了服务器的处理且处理结果已经接受完毕，这是执行
01 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
来改变myDiv的内容。需要注意的是这里并没有发送请求只是把这个请求所有的属性给设定好，如果都设定完毕那么便可以与服务器建立连接并发送请求了：
01 xmlhttp.open("GET",true);
02 xmlhttp.send();
请求发送出去之后后台将会有另外一个线程在运行，等待与服务器的连接信息以及服务器的处理和处理结果，在这期间可以进行其他操作并不影响这个线程的运行，当服务器的消息有返回的时候便会自己去执行上面提到的内容。
通过以上的实例和代码讲解希望可以对Ajax的整个运行过程以及其涉及到的技术能够有一个清晰的认识，这对于后续章节理解如何使用jQuery来实现Ajax效果是十分重要的。
接下来给出整个Ajax的工作原理图：
图2-62 Ajax的原理图
这个示意图中的userinterface事实上对应着本样例代码中的button，用户点击button，button的响应函数开始执行其内部的JavaScript代码，之后JavaScript代码开始调用Ajax引擎来发出异步的请求，Ajax从这里开始，发送的请求送到服务器端服务器处理请求，在请求处理完毕后想客户端浏览器发回XML数据，这个数据通过Ajax引擎解析获得HTML信息和CSS样式信息，再把这些信息放到用户页面上去，这样一个完整的Ajax过程就完成了。
2.3.3 Ajax核心对象XMLHTTPRequest
理解了Ajax的工作原理，想必都会发现在Ajax中XMLHTTPRequest是一个十分重要的对象，可以说整个Ajax过程都是围绕着它进行的，可以说它是Ajax中最为核心的对象，这一小节将会把XMLHTTPRequest对象进行详细的介绍。
现在各种浏览器对于XMLHTTPRequest对象的支持已经十分完善了，除了在建立对象时会有所不同，正如前面那段代码中看到的一样，只有在低版本的IE浏览器中才会出现这样的差异，所以说在现代浏览器中已经不存在差异了，然而XMLHTTPRequest并没有一个标准，虽然W3C组织已经开始了标准化工作。但各个浏览器实现的也大抵相同，然而还是会有一些微小的不同，例如同一种情况下的返回值有的是null、有则是空字符串；虽然有这样一些微小的不同但并不影响XMLHTTPRequest的使用。
接下来将会对XMLHTTPRequest对象的属性、方法、以及事件句柄进行详细的介绍。
XMLHTTPRequest的属性：
readyState属性：
这个属性标识了当前请求的状态他拥有从0到4五中不同的状态，详细信息如下：
状态 |
描述 |
|
0 |
Uninitialized |
初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
1 |
Open |
|
2 |
Send |
|
3 |
Receiving |
所有响应头部都已经接收到。响应体开始接收但未完成。 |
4 |
Loaded |
HTTP 响应已经完全接收。 |
表2-63readyState取值
就是因为只有readyState达到了4状态时这次的异步请求才算完成，所以前面的代码才会有这样的判断条件：
01 if(xmlhttp.readyState==4 && xmlhttp.status==200)
另外一个需要注意的地方是readyState的状态是不会倒退的，也就是说只会按照0、1、2、3、4这样的顺序进行转变，除非调用了open()方法或者abort()方法。
responseText属性：
这个属性只有当readyState变为3或4的时候才开始有意义，在这之前一直都是空字符串，变为3的时候为目前已经收到的服务器传来的内容，当变为4时保存接收完毕的字符内容，不包括响应头。同时对于编码来说，当响应体包含了关于字符编码的说明时按照说明接收相应编码的字符否则按照UTF-8来进行接收。
responseXML属性：
这个属性只有当服务器返回的响应体为XML类型是才有效，并会将结果村委document类型，否则为null值。
Status属性：
这个属性是指由服务器返回的Http状态代码，当为200是表示访问成功，当为404时表示访问失败，未找到相应页面。而在readyState小于3时使用该属性会出现错误，因为此时与服务器的连接状态未知。
XMLHTTPRequest的事件句柄：
onreadystatechange：
这个事件句柄是对应readyState改变这一事件所对应的处理函数。换句话说就是每当readyState的值改变时都会调用这个句柄所对应的函数，例如：
01 xmlhttp.onreadystatechange=functionaa()
02 {
03 if (xmlhttp.readyState==4 &&xmlhttp.status==200)
04 {
05 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
06 }
07 }
这段代码中函数aa里面的内容就是每当readyState变化时所要执行的代码。
XMLHttpRequest的方法：
open(method,url,async,username,password)方法
method参数用来指定这次请求使用的方法，可以是：GET、POST、HEAD三种方式。
url则用来说明这个请求时发送到服务器的哪个页面。
async说明这次请求的异步性，true表示异步进行，否则false表示同步进行
username和password是可选参数，只有当url请求的页面是需要用户名和密码登陆的页面的时候才需要使用这两个参数
关于这个方法需要注意几点：这个这个方法初始化请求参数以供send()方法稍后使用。它把readyState 设置为 1并删除之前指定的所有请求头部，以及之前接收的所有响应头部，并且把responseText、responseXML、status以及statusText参数设置为它们的默认值。当 readyState为0的时候（当 XMLHttpRequest 对象刚创建或者 abort() 方法调用后）以及当readyState为4时（已经接收响应时），调用这个方法是安全的。当针对任何其他状态调用的时候，open()方法的行为是为指定的。
除了保存供send()方法使用的请求参数，以及重置XMLHttpRequest对象以便复用，open()方法没有其他的行为。要特别注意，当这个方法调用的时候，浏览器的实现上通常不会打开一个到Web服务器的网络连接。
send(body)方法：
body参数指定了请求体，作为一个字符串或者Document对象。如果请求体不是必须的话，这个参数就为null。对于任何其他方法，这个参数是不可用的，应该为null（有些实现不允许省略该参数）。
关于这个方法需要说明的几点：这个方法将会发送一个HTTP请求。如果之前没有调用open()，或者更宽泛地说，如果readyState不是 1，send()抛出一个异常。这个HTTP请求由以下几部分组成：
之前调用open()时指定的HTTP方法、URL以及认证资格（也就是前面提到的username和password）、还有之前调用setRequestHeader()时指定的请求头部（如果有的话）都将传递给这个方法的 body 参数。一旦请求发出了，先触onreadystatechang事件句柄，随send()把readyState设置为2，并触发onreadystatechange 事件句柄。
如果之前调用的open()参数async为 false，这个方法会阻塞并不会返回，直到readyState为4并且服务器的响应被完全接收。否则，如果async参数为 true，或者这个参数省略了，send()立即返回，并且正如后面所介绍的，服务器响应将在一个后台线程中处理。
如果服务器响应带有一个HTTP重定向，send()方法或后台线程自动遵从重定向。当所有的HTTP响应头部已经接收，send()或后台线程把readyState设置为3并触发onreadystatechange事件句柄。如果响应较长，send()或后台线程可能在状态 3 中触发onreadystatechange事件句柄：这可以作为一个下载进度指示器。最后，当响应完成，send()或后台线程把readyState设置为4，并最后一次触发事件句柄。
setRequestHeader (name,value)方法：
name参数是要设置的头部的名称。这个参数不应该包括空格、冒号或换行。
value 参数是头部的值。这个参数不应该包括换行。
关于这个方法需要说明的几点：setRequestHeader()方法指定了这个HTTP请求的头部，它应该包含在通过后续send()调用而发出的请求中。这个方法只有当执行了open()方法之后才能调用，或者更准确的说只有readyState为1的时候才能调用，例如，在调用了open() 之后，调用send()之前。
如果带有指定名称的头部已经被指定了，这个头部的新值就是：之前指定的值，加上逗号、空格以及这个调用指定的值。
如果 open()调用指定了认证资格，XMLHttpRequest自动发送一个适当的 Authorization 请求头部。但是，你可以使用setRequestHeader()来添加这个头部。类似地，如果Web服务器已经保存了和传递给 open() 的 URL相关联的cookie，适当的Cookie或Cookie2头部也自动地包含到请求中。可以通过调用setRequestHeader()来把这些cookie添加到头部。XMLHttpRequest也可以为User-Agent头部提供一个默认值。如果它这么做，你为该头部指定的任何值都会添加到这个默认值后面。
abort()方法：
执行abort方法将取消当前响应，关闭连接并且结束任何未决的网络活动。
这个方法把XMLHttpRequest对象重置为readyState为0的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
2.3.4 jQuery中实现Ajax的方法（一）
jQuery中实现Ajax有很多方法，根据Ajax的方式不同可以有.get()、.post()、.ajax()等多种方法。这些方法将会在后续的章节中一一进行解释，本节将对最为常用的Ajax方法进行介绍。也是一些非常简单快捷的方法例如：jQuery.get()方法。
参数url是必须参数，也就是要请求的页面，函数将会向url指定的网页发送一个get请求，具体的参数将在后面可选参数进行指定。
参数data是一个PlainObject或者String类型，这个参数指定了将要发送到服务器页面的参数，可以字符串类型如“act=get”或者键值对的形式。“{Action: “get”,“lulu”}”。
参数success是一个函数，作为成功执行get()方法后执行的回调函数。回调函数中的data就是服务器返回的数据，data可能是xml、html、text等类型的数据。
参数dataType指定返回的数据类型，这里这个参数可以忽略，默认的是智能感知，xml、json、script、html等类型将会自动得到。
这里看到get()方法已经封装的十分完善，调用起来也比较方便。接下来将通过代码进一步的介绍get()方法的使用：
01 <!DOCTYPEhtml>
02 <htmlxmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <scripttype="text/javascript"src="jquery-1.9.1.min.js"></script>
05 <Metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
06 <title></title>
07 <scripttype="text/javascript">
08 function on() {
09 var aa=$("#txt").val();
10 $.get("TestAjax.ashx",{act:aa},function (data) {
11$("#result").text(data);
12 });
13 }
14 </script>
15 </head>
16 <body>
17 <label>Content</label>
18 <input type="text"id="txt"/>
19 <buttononclick="on()">Click Me</button>
20 <div id="result">
21 NoMessage
22 </div>
23 </body>
24 </html>
01 <%@WebHandler Language="C#" Class="TestAjax" %>
02 usingSystem;
03 usingSystem.Web;
04 publicclass TestAjax : IHttpHandler {
05 public void ProcessRequest (HttpContextcontext) {
06 String action=context.Request.QueryString["act"];
07 switch (action)
08 {
09 case "get":
10 context.Response.Write("YouSend 'get'");
11 break;
12 default:
13 context.Response.Write("YouSend not 'get'");
14 break;
15 };
16 }
17 public bool IsReusable {
18 get {
19 return false;
20 }
21 }
22 }
图2-65 载入效果
图2-66 填入get执行
图2-67 填入非get执行
对上面的HTML代码进行一下详细的解释：
首先是页面布局：
01 <label>Content</label>
02<input type="text" id="txt"/>
03<button onclick="on()">Click Me</button>
04<div id="result">
05 NoMessage
06</div>
声明了一个按钮（button），点击之后执行on()方法，也是整个测视例中最为核心的内容，在on()方法中将会发出get()请求并针对服务器返回的数据进行响应。
01 functionon() {
02 varaa=$("#txt").val();
03$.get("TestAjax.ashx",function (data) {
04 $("#result").text(data);
05 });
06 }
接下来看一下on()方法的内容，在on()方法中声明了一个变量用来获取用户在文本框里输入的内容，接着使用jQuery的$.get()方法想服务器发送一个请求，这里采用了键值对的方式来发送数据，当然也可以采用字符串的形式：
01 $.get("TestAjax.ashx",”act=”+aa,function (data) {
02 $("#result").text(data);
03 });
这里比较推荐使用键值对的方式来发送数据这样不仅可以发送大量数据，在书写时也比较简单易懂，而是用字符串的形式则显得不够结构化了。
接下来将会介绍另外一个jQuery中的Ajax方法，通过这个方法可以从服务器端获取一段HTML代码，使用这段返回的HTML代码重新构造页面的某些元素或者添加元素。
图2-68 load()方法
这个方法用来载入一些html页面，或是用来重构当前的html页面，这个方法相较于get()方法比较简单，并不需要传入任何参数，只需要指定请求的目标，请求时发送的数据，以及完成时的响应函数就可以了，功能基本类似于get()方法，然而还有另外的用途，将会在代码中看到load()方法请求获取一个独立的html页面的例子：
01 <!DOCTYPEhtml>
02 <htmlxmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <scripttype="text/javascript"src="jquery-1.9.1.min.js"></script>
05 <Metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
06 <title></title>
07 <scripttype="text/javascript">
08 function on() {
09 $("#result").load("ToLoad.html",function () { alert("Load Finish!")});
10 }
11 </script>
12 </head>
13 <body>
14 <label>Content</label>
15 <input type="text"id="txt"/>
16 <buttononclick="on()">Click Me</button>
17 <div id="result">
18 </div>
19 </body>
20 </html>
01 <!DOCTYPEhtml>
02 <htmlxmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <scripttype="text/javascript"src="jquery-1.9.1.min.js"></script>
05 <Metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
06 <title></title>
07 </head>
08 <body>
09 <label>Content</label>
10 <input type="text" id="txt"/>
11 <button>Click Me</button>
12 <div>
13 NoMessage
14 </div>
15 </body>
16 </html>
图2-67 载入效果
图2-69 载入完成时的对话框
图2-70 载入完成时的页面
这例子中向服务器请求了一个html页面，这里并没有做多余的工作，完全由网站的服务器来自动处理了这个请求，从目录中找到了需要的文件，并将文件的内容发送回到请求的网页，网页接到服务器的相应信息，将内容填充到div块中。
由于本书专注于介绍jQuery方面的内容，服务器端的处理已不在本书的范围中，有兴趣的读者可以自行阅读其他书籍。
2.3.4 jQuery中实现Ajax的方法（二）
前面介绍了jQuery中get()以及load()两个方法来实现Ajax，本节将会介绍另外一个常用的方法来实现Ajax。本节介绍的方法是：post()方法，这个方法相较于get()方法来说从本质上来说使用了JavaScript中的post方式来发送请求，而get()方法则使用了JavaScript中get方式来向服务器发送请求。这两种请求在小数据量时是一样的，当数据量比较大的时候推荐使用post方式，get方式最多可以发送和接受2KB大小的数据，而post没有这样的限制，相应的，get方法会比较快，而post的方法相对的慢一些，所以如果可以的话尽量使用get方法而在必须的时候使用post方法。
接下来介绍jQuery中的$.post()方法：
01 <!DOCTYPEhtml>
02 <htmlxmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <scripttype="text/javascript"src="jquery-1.9.1.min.js"></script>
05 <Metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
06 <title></title>
07 <script type="text/javascript">
08 function on() {
09 var aa = $("#txt").val();
10 $.post("TestAjax.ashx",{act: aa },function (data) {
11 $("#result").text(data);
12 });
13 }
15 </script>
16 </head>
17 <body>
18 <label>Content</label>
19 <input type="text"id="txt"/>
20 <buttononclick="on()">Click Me</button>
21 <div id="result">
22 No Message
23 </div>
24 </body>
25 </html>
01 <%@WebHandler Language="C#" Class="TestAjax" %>
02 usingSystem;
03 usingSystem.Web;
04 publicclass TestAjax : IHttpHandler {
05 public void ProcessRequest (HttpContextcontext) {
06 String action=context.Request.Params["act"];
07 switch (action)
08 {
09 case "get":
10 context.Response.Write("YouSend 'get'");
11 break;
12 default:
13 context.Response.Write("YouSend not 'get'");
14 break;
15 };
16 }
17 public bool IsReusable {
18 get {
19 return false;
20 }
21 }
22 }
图2-71 载入页面
图2-72 运行结果
在这个样例代码中使用了post方法来发送Ajax请求，这里基本跟get()方法基本类似，在服务器端唯一不同的是获取act内容的方法由QueryString改成了Param方法，这也体现出两种Ajax方法发送请求的方式是不一样的，一种是get方式一种是post方式。
2.3.5 jQuery中实现Ajax的方法（三）
事实上以上的多种方法都是基于同一个方法的，这个方法是jQuery中比较底层的Ajax方法，这个方法是$.Ajax()。这个方法包含了诸多功能，是一个非常全面的方法，用起来也就不如前面的那些方法来的简洁，但是既然作为Ajax方法的底层还是应该涉及一下，对于理解jQuery中Ajax方法的实现是有一定好处的。
图2-73 jQuery官网上提供的文档
jQuery中的Ajax方法看似简单，只需要指定请求发送的目标就可以了，事实上更多详细的设定则需要指定到settings中，这才是这个ajax方法最为精髓的地方，然而不幸的是这个settings中提供了十几个属性可供选择，往往不需要那么多的属性设置，通常只需要设置很少的属性就可以满足需求了，当需要对相应的属性设定时利用键值对的方法在ajax里面说明即可，其他未指明的方法则会按照jQuery默认的值来指定，这里列出一些常用的属性以供参考：
图2-74 async属性
Async属性用来指定这此的请求是否采用异步的方式进行，true表示异步，false则表示同步。
图2-75 beforeSend属性
beforeSend属性用来指定这个请求发送出去之前需要执行的方法。
图2-76 complete属性
Complete用来指定发送的请求完成时所要执行的方法。这个不保证一定成功获取到服务器的数据只是表示这次请求的结束，当请求失败同样会调用这个函数。
图2-77 data属性
Data属性指定将要发送到服务器的数据，可以采用字符串或者键值对的方式。
图2-78 statusCode属性
StatusCode用来获取请求的返回代码404表示页面未找到，如果成功执行请求将会调用success方法，如果失败则会调用error方法。
图2-79 success属性
图2-80 error属性
图2-81 timeout属性
Timeout属性为Ajax请求提供一个时间设定，当超过时间是这个请求将会变为无效，时间从ajax方法被调用时开始计算，到请求complete完成，单位为毫秒。
图2-82 username和password属性
以上是比较常用到的Ajax属性，除了这些属性jQuery的Ajax还有许许多多的属性，有兴趣的读者可以参考jQuery的在线帮助文档（查看方法参考第一章内容）。接下来将通过代码来演示如何使用Ajax的这些属性：
01 <!DOCTYPEhtml>
02 <htmlxmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <scripttype="text/javascript"src="jquery-1.9.1.min.js"></script>
05 <Metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
06 <title></title>
07 <scripttype="text/javascript">
08 function on() {
09 var aa = $("#txt").val();
10 $.ajax({
11 url:"TestAjax.ashx?act=" + aa,
12 success: function (rep) {$("#result").text(rep) },
13 error: function () {$("#result").text("Error Request")}
14 });
15 }
16 </script>
17 </head>
18 <body>
19 <label>Content</label>
20 <input type="text"id="txt"/>
21 <buttononclick="on()">Click Me</button>
22 <div id="result">
23 No Message
24 </div>
25 </body>
26 </html>
01 <%@WebHandler Language="C#" Class="TestAjax"%>
02 usingSystem;
03 usingSystem.Web;
04 publicclass TestAjax : IHttpHandler {
05 public void ProcessRequest (HttpContextcontext) {
06 String action=context.Request.Params["act"];
07 switch (action)
08 {
09 case "get":
10context.Response.Write("You Send 'get'");
11break;
12 default:
13 context.Response.Write("YouSend not 'get'");
14 break;
15 };
16 }
17 public bool IsReusable {
18 get {
19 return false;
20 }
21 }
22 }
图2-83 载入效果
图2-84 执行效果
这个样例代码中主要演示了如何来设置Ajax里的属性，通用格式应该是：属性：”属性值”。其他属性也可以按照上面的方法来进行设置。
原文地址：https://www.jb51.cc/ajax/160419.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
