jQuery中的ajax应用
2010-07-13 13:37
323 查看
jQuery给我们提供了ajax()方法，其中可以解析不同的返回格式，下面介绍其中3种格式的解析：
aspx页面
ashx1代码
ashx2代码
ashx3代码
到了.net framework3.5有支持json的类，但我用的还是2.0，所以自己编写了一个转换方法。
还有一种jsonp格式的demo，下次有时间补上
aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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方法测试Demo</title>
<mce:script type="text/javascript" src="js/jquery-1.3.2.js" mce_src="js/jquery-1.3.2.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$(".wishtabdiv1 li").hover(function() {
$.ajax({
type: "get", //通过get方式
url: "AjaxTab1.ashx", //目标的url是AjaxTab.ashx
timeout: 3000,
data:{type:$(this).get(0).title} , //3秒后超时
beforeSend: function(XMLHttpRequest) { //发送前
$("#wishtab1").html("<img alt='loading' width='80px' src="images/loading.jpg" mce_src="images/loading.jpg" />");
},
success: function(data) { //成功获取后
$("#wishtab1").get(0).innerHTML = data;
if ($("#wishtab1").get(0).innerHTML == '') {
$("#wishtab1").html('暂无相关新闻');
}
},
error: function(XMLHttpRequest, errormsg) {
$("#wishtab1").html('<input type="button" value="服务器繁忙，请稍候再试"/>');
}
});
});
});
$(document).ready(function() {
$(".wishtabdiv2 li").hover(function() {
$.ajax({
type: "get", //通过get方式
url: "AjaxTab2.ashx", //目标的url是AjaxTab.ashx
timeout: 3000, //3秒后超时
data: { type: $(this).get(0).title },
dataType: "xml",
beforeSend: function(XMLHttpRequest) { //发送前
$("#wishtab2").html("<img alt='loading' width='80px' src="images/loading.jpg" mce_src="images/loading.jpg" />");
},
success: function(xml) { //成功获取后
$("#wishtab2").html("");
$(xml).find('title').each(function() {
$("#wishtab2").get(0).innerHTML += ($(this).text() + "<br/>");
});
},
error: function(XMLHttpRequest, errormsg) {
$("#wishtab2").html('<input type="button" value="服务器繁忙，请稍候再试"/>');
}
});
});
});
$(document).ready(function() {
$(".wishtabdiv3 li").hover(function() {
$.ajax({
type: "get", //通过get方式
url: "AjaxTab3.ashx", //目标的url是AjaxTab.ashx
timeout: 3000,
dataType: "json",
data: { type: $(this).get(0).title }, //3秒后超时
beforeSend: function(XMLHttpRequest) { //发送前
$("#wishtab3").html("<img alt='loading' width='80px' src="images/loading.jpg" mce_src="images/loading.jpg" />");
},
success: function(json) { //成功获取后
$("#wishtab3").html("");
var news = json.News;
$.each(news, function(i, n) {
$("#wishtab3").get(0).innerHTML += n.title + "<br />";
});
},
error: function(XMLHttpRequest, errormsg) {
$("#wishtab3").html('<input type="button" value="服务器繁忙，请稍候再试"/>');
}
});
});
});
// --></mce:script>
<mce:style type="text/css"><!--
body
{
width:100%;
}
.wishjquerytab1,.wishjquerytab2,.wishjquerytab3
{
width:100%;
}
.wishtabdiv1,.wishtabdiv2,.wishtabdiv3
{
width:100%;
margin:0 auto;
}
.wishjquerytab1 li,.wishjquerytab2 li,.wishjquerytab3 li
{
list-style-type:none;
float:left;
margin:2px 2px 2px 2px;
border:solid 1px black;
}
.wishactive1,.wishactive2,.wishactive3
{
background-color:Green;
}
--></mce:style><style type="text/css" mce_bogus="1"> body
{
width:100%;
}
.wishjquerytab1,.wishjquerytab2,.wishjquerytab3
{
width:100%;
}
.wishtabdiv1,.wishtabdiv2,.wishtabdiv3
{
width:100%;
margin:0 auto;
}
.wishjquerytab1 li,.wishjquerytab2 li,.wishjquerytab3 li
{
list-style-type:none;
float:left;
margin:2px 2px 2px 2px;
border:solid 1px black;
}
.wishactive1,.wishactive2,.wishactive3
{
background-color:Green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
回传text文本流实例<br />
<div class="wishjquerytab1">
<div class="wishtabdiv1">
<ul>
<li title="0">
焦点
</li>
<li title="1">
体育
</li>
<li title="2">
经济
</li>
<li title="3">
娱乐
</li>
<li title="4">
社会
</li>
</ul>
</div>
<div class="wishcontent1">
<div id="wishtab1">
<asp:Button ID="btnTest" runat="server" Text="Test" />
</div>
</div>
</div>
<hr />
回传XML实例<br />
<div class="wishjquerytab2">
<div class="wishtabdiv2">
<ul>
<li title="0">
焦点
</li>
<li title="1">
体育
</li>
<li title="2">
经济
</li>
<li title="3">
娱乐
</li>
<li title="4">
社会
</li>
</ul>
</div>
<div class="wishcontent2">
<div id="wishtab2">
<asp:Button ID="Button1" runat="server" Text="Test" />
</div>
</div>
</div>
<hr />
回传JSON实例<br />
<div class="wishjquerytab3">
<div class="wishtabdiv3">
<ul>
<li title="0">
焦点
</li>
<li title="1">
体育
</li>
<li title="2">
经济
</li>
<li title="3">
娱乐
</li>
<li title="4">
社会
</li>
</ul>
</div>
<div class="wishcontent3">
<div id="wishtab3">
<asp:Button ID="Button2" runat="server" Text="Test" />
</div>
</div>
</div>
</form>
</body>
</html>ashx1代码
<%@ WebHandler Language="C#" Class="AjaxTab" %>
using System;
using System.Data;
using System.Web;
public class AjaxTab : IHttpHandler {
public void ProcessRequest (HttpContext httpcontext) {
httpcontext.Response.ContentType = "text/plain";
int key = -1;
int.TryParse(httpcontext.Request.QueryString["type"].ToString(),out key);
DataSet ds = SqlHelp.GetDateSetSource(key);
System.Text.StringBuilder sb = new System.Text.StringBuilder();
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
sb.Append("<div>"+ds.Tables[0].Rows[i][1].ToString()+"</div>");
}
httpcontext.Response.Write(sb);
}
public bool IsReusable
{
get
{
return false;
}
}
}ashx2代码
<%@ WebHandler Language="C#" Class="AjaxTab" %>
using System;
using System.Data;
using System.Web;
public class AjaxTab : IHttpHandler {
public void ProcessRequest (HttpContext httpcontext) {
httpcontext.Response.ContentType = "text/xml";
int key = -1;
int.TryParse(httpcontext.Request.QueryString["type"].ToString(),out key);
DataSet ds = SqlHelp.GetDateSetSource(key);
httpcontext.Response.Write(TranXml(ds));
}
public bool IsReusable {
get {
return false;
}
}
/// <summary>
/// dataset转换成xml
/// </summary>
/// <param name="ds"></param>
/// <returns></returns>
public string TranXml(DataSet ds)
{
string strXml = ds.GetXml();
return strXml;
}
}ashx3代码
<%@ WebHandler Language="C#" Class="AjaxTab" %>
using System;
using System.Data;
using System.Web;
using System.Text;
public class AjaxTab : IHttpHandler {
public void ProcessRequest (HttpContext httpcontext) {
httpcontext.Response.ContentType = "application/json;charset=UTF-8";
int key = -1;
int.TryParse(httpcontext.Request.QueryString["type"].ToString(),out key);
DataSet ds = SqlHelp.GetDateSetSource(key);
httpcontext.Response.Write(TranJson(ds));
}
public bool IsReusable {
get {
return false;
}
}
/// <summary>
/// dataset转换成Json
/// </summary>
/// <param name="ds"></param>
/// <returns></returns>
public string TranJson(DataSet ds)
{
StringBuilder json = new StringBuilder();
json.Append("{");
foreach (DataTable dt in ds.Tables)
{
json.Append("/"" + "News" + "/":[");
foreach (DataRow dr in dt.Rows)
{
for (int i = 0; i < dt.Columns.Count; i++)
{
if (i == 0)
{
json.Append("{/"" + dt.Columns[i].ColumnName + "/":/"" + Convert.ToString(dr[i]) + "/",");
}
else if (i == dt.Columns.Count - 1)
{
json.Append("/"" + dt.Columns[i].ColumnName + "/":/"" + Convert.ToString(dr[i]) + "/"},");
}
else
{
json.Append("/"" + dt.Columns[i].ColumnName + "/":/"" + Convert.ToString(dr[i]) + "/",");
}
}
}
json.Remove(json.Length - 1, 1);
json.Append("],");
}
json.Remove(json.Length - 1, 1);
json.Append("}");
return json.ToString();
}
}到了.net framework3.5有支持json的类，但我用的还是2.0，所以自己编写了一个转换方法。
还有一种jsonp格式的demo，下次有时间补上
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery $.ajax入门应用二
- jQuery的AJAX之load()应用实例
- 《jquery权威指南》读书笔记之第六章--Ajax在jquery中的应用
- .net jquery ajax应用(后台)
- jQuery中ajax异步请求应用
- jquery与ajax的应用
- jQuery的ajax的form提交方法应用
- jQuery Form 表单提交插件-----ajaxSubmit() 的应用
- jquery 与ajax 的应用
- 使用Asp.net MVC, Jquery, Jquery UI构建基于Ajax的RIA应用.
- jquery与ajax的应用
- 《锋利的jQuery》读书笔记 第6章 jQuery与Ajax的应用
- 第八章 jQuery与Ajax应用
- 关于jQuery的ajax初级应用
- jQuery&Ajax应用
- JQuery+AJAX异步刷新的一个基础应用（检验用户名是否已存在）
- jquery 的ajax应用
- jQuery.ajax的简单应用实例 附实例下载
- jQuery中的Ajax应用<思维导图>
- playframework中ajax的应用例子(jQuery)