開發環境：vs2010+jquery-1.4.min.js
解決問題：網上代碼比較少，好多調試不通，返回數據不用json而用jsonp主要考慮解決跨域問題
開發步驟：打開VS2010，新建一web站點，保存位置選擇D:\Website1;添加新項,選擇一般處理程序，命名cmdHandler.ashx;添加新項，選擇HTML頁，命名爲testAshx.htm;網上下載jquery-1.4.min.js拷貝到web站點中
項目相關代碼和運行截圖如下：
1、testAshx.htm代碼如下:
<!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>
<title>Jquery調用ashx文件返回的jsonp格式數據實例</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
</head>
<body>
<div id="Div1"> </div>
<div id="Div2"> </div>
<div id="Div3"> </div>
<div id="Div4"> </div>
<script type="text/javascript" >
//回調函數1
function success_jsonpCallback11(data) {
var $ul = $("<ul></ul>");
$.each(data, function (i, v) {
$("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
});
$("#Div2").html($ul);
}
//回調函數2
function success_jsonpCallback22(data) {
var $ul = $("<ul></ul>");
$.each(data, function (i, v) {
$("<li/>").text(v["OrderID"] + " " + v["CustomerID"]).appendTo($ul)
});
$("#Div4").html($ul);
}
//頁面加載完成後執行下面代碼
$(document).ready(function () {
//讀取Ashx文件中直接返回的字符串
$.ajax({
url: 'cmdHandler.ashx',
data: { StatusCode: 1 },
dataType: "jsonp",
jsonp: "jsonpcallback",
success: function (data) {
var $ul = $("<ul></ul>");
$.each(data, function (i, v) {
$("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
});
$("#Div1").html($ul);
}
});
//讀取Ashx文件中直接返回的字符串帶回調函數名稱
$.ajax({
type: "get",
async: false,
url: "cmdHandler.ashx",
data: { StatusCode: 1 },
dataType: "jsonp",
jsonp: "jsonpcallback", //傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(默認爲:callback)
jsonpCallback: "success_jsonpCallback1", //自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名
success: function (json) {
//在此之前若沒有定義回調函數success_jsonpCallback1則執行下面的代碼
var $ul = $("<ul></ul>");
$.each(json, function (i, v) {
$("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
});
$("#Div2").html($ul);
},
error: function () {
alert('fail');
}
});
//讀取Ashx文件中返回的數據庫字符串
$.ajax({
type: "get",
async: false,
url: "cmdHandler.ashx",
data: { StatusCode: 2 },
dataType: "jsonp",
jsonp: "jsonpcallback",
success: function (json) {
var $ul = $("<ul></ul>");
$.each(json, function (i, v) {
$("<li/>").text(v["OrderID"] + " " + v["CustomerID"]).appendTo($ul)
});
$("#Div3").html($ul);
},
error: function () {
alert('fail');
}
});
//讀取Ashx文件中返回的數據庫字符串帶回調函數名稱
$.ajax({
type: "get",
async: false,
url: "cmdHandler.ashx",
data: { StatusCode: 2 },
dataType: "jsonp",
jsonp: "jsonpcallback", //傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(默認爲:callback)
jsonpCallback: "success_jsonpCallback2", //自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名
success: function (json) {
//在此之前若沒有定義回調函數success_jsonpCallback2則執行下面的代碼
var $ul = $("<ul></ul>");
$.each(json, function (i, v) {
$("<li/>").text(v["OrderID"] + " " + v["CustomerID"]).appendTo($ul)
});
$("#Div4").html($ul);
},
error: function () {
alert('fail');
}
});
/* 回調函數寫在末尾時候不起作用
function success_jsonpCallback(data) {
alert("測試成功");
}
*/
});
</script>
</body>
</html>
2、cmdHandler代碼如下:
<%@ WebHandler Language="C#" Class="cmdHandler" %>
using System;
using System.Web;
//添加引用
using System.Data;
using System.Data.SqlClient;
using System.Text;
public class cmdHandler : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string StatusCode = context.Request.QueryString["StatusCode"];
switch (StatusCode)
{
case "1"://返回測試用的組合字符串
context.Response.Write(getFormatString(context));
break;
case "2"://返回查詢數據庫得到的組合字符串
context.Response.Write(GetDbString(context));
break;
}
}
#region 測試用的組合字符串
public string getFormatString(HttpContext context)
{
string strReturn = "";
string jsonp = context.Request["jsonpcallback"];
string str = "[{\"id\":\"1\",\"name\":\"張三\"},{\"id\":\"2\",\"name\":\"李四\"}]";
strReturn = jsonp + "(" + str + ")";
return strReturn;
}
#endregion
#region 查詢數據庫得到組合字符串
public string GetDbString(HttpContext context)
{
string strReturn = "";
string strConn = "server=.;database=northwnd;uid=sa;pwd=123456;";//數據庫連接字符串
string strFun = context.Request["jsonpcallback"];//傳遞參數
StringBuilder strJsonData = new StringBuilder();//拼接json所有格式
StringBuilder strJsonMsgData = new StringBuilder();//拼接json內容
string sqlText = "select top 3 * from Orders";//查詢數據表語句
DataSet ds = new DataSet();
SqlConnection mySqlConnection = new SqlConnection();
mySqlConnection.ConnectionString = strConn;
try
{
mySqlConnection.Open();
SqlCommand mySqlCommand = new SqlCommand();
mySqlCommand.CommandText = sqlText;
mySqlCommand.Connection = mySqlConnection;
SqlDataAdapter da = new SqlDataAdapter(mySqlCommand);
da.Fill(ds);
DataTable dt = ds.Tables[0];
if (dt.Rows.Count > 0)
{
strJsonData.AppendFormat("{0}([", strFun);//json begin
foreach (DataRow row in dt.Rows)//得到行集合
{
strJsonMsgData.Append("{\"OrderID\"" + ":" + "\"" + row["OrderID"].ToString() + "\"" + ",\"CustomerID\"" + ":" + "\"" + row["CustomerID"].ToString() + "\"}" + ",");
}
strJsonData.Append(strJsonMsgData.ToString().TrimEnd(','));
strJsonData.Append("])");//json end
strReturn = strJsonData.ToString();
}
else
{
strJsonData.AppendFormat("{0}([", strFun);//json begin
strJsonData.Append("])");//json end
strReturn = strJsonData.ToString();
}
}
catch
{
}
finally
{
mySqlConnection.Close();
}
return strReturn;
}
#endregion
public bool IsReusable
{
get
{
return false;
}
}
}
3、jquery-1.4.min.js文件不貼代碼了，網上自己下，也可以使用更高版本的jquery.js文件
4、IE和火狐運行截圖如下:
