Asp.Net+Jquery.Ajax详解2-$.Load
目录（已经更新的文章会有连接，从7月25日开始，每2到3天更新一篇）：
Asp.Net+Jquery.Ajax详解1-开篇（2012.07.25发）
Asp.Net+Jquery.Ajax详解2-$.Load（2012.07.26发）
Asp.Net+Jquery.Ajax详解3-$.get和$.post
Asp.Net+Jquery.Ajax详解4-$.getJSON
Asp.Net+Jquery.Ajax详解5-$.getScript
Asp.Net+Jquery.Ajax详解6-$.ajaxSetup
Asp.Net+Jquery.Ajax详解7-全局Ajax事件
Asp.Net+Jquery.Ajax详解8-核心$.ajax
Asp.Net+Jquery.Ajax详解9-serialize和serializeArray
Asp.Net+Jquery.Ajax详解10-JSON和XML+写在最后
上一篇我们主要谈了什么是ajax，以及它的原始实现方式，简单介绍了Jquery。从这篇开始，我们将深入了解Jquery.ajax.从$.load开始。
jQuery.load( url [, data][, callback] )
url:请求网页的URL地址
data(可选):发送至服务器的key/value数据
callback(可选)：请求完成时的回调函数
load()方法提供了回调函数（callback），该函数有三个参数：responseText,textStatus,XMLHttpRequest，分别代表请求返回的内容、请求状态和XMLHttpRequest对象。
$("#result").load("Data/GetServiceInfo.aspx",function(responseText,textStatus,XMLHttpRequest){
//responseText:请求返回的内容
//textStatus:请求状态：success、error、notmodified、timeout
//XMLHttpRequest:XMLHttpRequest对象
});
如果只需要加载GetServiceInfo.aspx页面内的某些元素，那么可以使用load()方法的URL参数来达到目的。通过为URL参数指定选择符，可以很方便地从加载过来的HTML文档里筛选出所需要的内容。
load()方法的URL参数的语法结构为：“url selector”。注意，URL和选择器之间有一个空格。
//测试load，使用选择器，过滤掉天津
function LoadFilter(event) {
$("#result").load("data/GetCity.aspx?resultType=html&t=" + (new Date()).getTime() + " ul>li:not(:contains('天津'))");
}
load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST方式。
//测试load，以Post方式请求，注意：默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式
function LoadPost(event) {
$("#result").load("Data/GetServiceInfo.aspx", { "param": "TestLoad-Post" });
}
注意：1、在load()方法中，无论Ajax请求是否成功，只要当请求完成（complete）后，回调函数（callback）就被触发
2、如果有参数，则在GetServiceInfo.aspx页面接收参数时，应该用HttpContext.Current.Request["param"]形式，Request.Querysting获取不到。
实例（vs2010）：
客户端—GetServiceInfo.aspx—
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjaxLoad.aspx.cs" Inherits="JqueryAjaxTest.JqueryAjaxLoad" %><!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>Jquery Ajax Test</title> <%--引入Jquery库--%> <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //为各个按钮绑定事件 $("#TestLoad-Get").bind("click", LoadGet); $("#TestLoad-Post").bind("click", LoadPost); $("#TestLoad-Callback").bind("click", LoadCallback); $("#TestLoad-Filter").bind("click", LoadFilter); } ); //测试load，以Get方式请求 //加时间戳(new Date()).getTime()，防止返回缓存内容 function LoadGet(event) { $("#result").load("Data/GetServiceInfo.aspx?param=TestLoad-Get&t=" + (new Date()).getTime()); } //测试load，以Post方式请求，注意：默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式 function LoadPost(event) { $("#result").load("Data/GetServiceInfo.aspx", { "param": "TestLoad-Post" }); } //测试load，使用回调函数 //注意：load()方法提供了回调函数（callback），该函数有三个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象 function LoadCallback(event) { $("#result").load("Data/GetServiceInfo.aspx", { "param": "TestLoad-Callback" }, function (responseText, textStatus, XMLHttpRequest) { $("#result").html("回调函数在起作用,结果：" + responseText); }); } //测试load，使用选择器 function LoadFilter(event) { $("#result").load("data/GetCity.aspx?resultType=html&t=" + (new Date()).getTime() + " ul>li:not(:contains('天津'))"); } </script></head><body> <form id="form1" runat="server"> <div> <input id="TestLoad-Get" type="button" value="Load-Get方式" /> <input id="TestLoad-Post" type="button" value="Load-Post方式" /> <input id="TestLoad-Callback" type="button" value="Load-回调函数" /> <input id="TestLoad-Filter" type="button" value="Load-过滤结果" /> <div id="result"> </div> </div> </form></body></html>
服务端1—GetCity.aspx—
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace JqueryAjaxTest.Data{ public partial class GetMethodInfo : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string param = ""; //获取参数 if (!String.IsNullOrEmpty(HttpContext.Current.Request["param"])) { param = HttpContext.Current.Request["param"]; } //清空缓冲区 Response.Clear(); //将字符串写入响应输出流 Response.Write("Http请求的方式为："+Request.HttpMethod.ToUpper()+"; 传递过来的参数为:"+param); //将当前所有缓冲的输出发送的客户端，并停止该页执行 Response.End(); } }}
服务端2——
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace JqueryAjaxTest.Data{ public partial class GetCity : System.Web.UI.Page { private string resultType = "json"; protected void Page_Load(object sender, EventArgs e) { //获取请求的参数 if (!String.IsNullOrEmpty(Request.QueryString["resultType"])) { resultType = Request.QueryString["resultType"].ToLower()=="html" ? "html" : "json"; } string html = GetResult(resultType); //清空缓冲区 Response.Clear(); //将字符串写入响应输出流 Response.Write(html); //将当前所有缓冲的输出发送的客户端，并停止该页执行 Response.End(); } private string GetResult(string resultType) { string result = ""; if (resultType == "html") { //返回的html result = @"<ul><li id=""1"">北京</li><li id=""2"">天津</li></ul>"; } else if (resultType == "json") { //返回的json数据 result = @"[{""pkid"":""0001"",""ProvinceId"":""BJ"",""CityName"":""北京"",""CityNameEn"":""Beijing"",""PostCode"":""010"",""isHotCity"":false}, {""pkid"":""0002"",""ProvinceId"":""TJ"",""CityName"":""天津"",""CityNameEn"":""Tianjin"",""PostCode"":""022"",""isHotCity"":false}]"; } return result; } }}
第二篇到了，对比第一篇中的ajax原始方法，这次的方法明显简洁了许多。第三篇马上就会杀到。如果想这个系列的文章到底写些什么，请参见第一篇。