探讨jQuery的ajax使用场景(c#)
一：jQuery.ajax语法基础
jQuery.ajax([options])
概述：通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。使用这个方法可以获得更多的灵活性。
数据类型
$.ajax()函数依赖服务器提供的信息来处理返回的数据。通过dataType选项还可以指定其他不同数据处理方式。其中，text和xml类型返回的数据不会经过处理。如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。发送数据到服务器，默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。
使用场景一：
描述:保存数据到服务器，成功时显示信息。jQuery 代码:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
使用场景二：
描述:装入一个 HTML 网页最新版本。jQuery 代码:
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
load(url, [data], [callback])
概述：载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
使用场景一：
描述:加载 feeds.html 文件内容。jQuery 代码:
$("#feeds").load("feeds.html");
jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])
概述：通过远程 HTTP GET或POST 请求载入信息。
这是一个简单的 GET或POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
描述:显示 test.aspx 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。jQuery 代码:
$.get("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.post("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
上面是基本的语法，我们只是先做一个了解，要是你已经熟悉，那么我们将开始一步一步对上面的方法和使用场景进行具体讨论。
二：jQuery.ajax伴随ASP.NET的实战练习
首先创建Default.aspx页面，作为请求发起页面，并会获得返回值。页面的代码Default.aspx是：
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryAjax2._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="js\jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#showinfo').click(function() {
var data = { key1: "刘明丰", key2: "林望" };
$.ajax({
type: "POST",
url: "response.aspx",
data: data,
dataType: "text",
success: function(msg) {
$("#ajax").append(msg);
}
});
$.ajax({
url: "test.htm",
cache: false,
success: function(html) {
$("#resulthtml").append(html);
}
});
$("#load").load("test.htm");
$.get("response.aspx", data, success1, "text");
$.get("TextJson.txt", success3, "json");
$.post("response.aspx", data, success2, "text");
function success1(message) {
$("#get").append(message);
}
function success2(message) {
$("#post").append(message);
}
function success3(siteData) {
var result = "<li>334一号床:" + siteData.key1 + "</li>";
result += "<li>334二号床:" + siteData.key2 + "</li>";
result += "<li>334三号床: " + siteData.key3 + "</li>";
result += "<li>334四号床: " + siteData.key4 + "</li>";
$("#result").html(result);
}
});
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<input type="button" id="showinfo" value="show info"></input>
<ul id="ajax">ajax:</ul>
<ul id="resulthtml">resulthtml:</ul>
<ul id="load">load:</ul>
<ul id="get">get:</ul>
<ul id="post">post:</ul>
<ul id="result"></ul>
</body>
</html>
Default.aspx.cs里面有没写任何代码，默认即可。
请求的接受者这里面有三种角色：response.aspx页面、test.htm静态页面和TextJson.txt。
response.aspx页面：主要是在服务器端获得客户端提交的数据，并返回数据给客户端。
test.htm静态页面：主要是给客户端局部装入一个HTML网页最新版本。
TextJson.txt：是作为数据储存在文件中，让客户端来异步访问的。
response.aspx页面代码，response.aspx是：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>
没有任何html代码，因为主要是在服务器端获得客户端提交的数据，并返回数据给客户端，不需要显示html内容，所以可以不含html标记。
response.aspx.cs页面代码：
代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;
namespace JqueryAjax2
{
public partial class response : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string str = Request["key1"];
Response.Write("success" + str);
}
}
}
在代码中可以看到服务器端获得客户端提交的数据，并返回数据给客户端的方式。
<!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></title>
</head>
<body>
test.html
</body>
</html>
当静态页面被请求后，会作为html的格式返回客户端，使用 $("#resulthtml").append(html);这样的方法来显示test.htm静态页面的内容。
TextJson.txt里面保存着一段文本，是json格式的：
{ "key1": "刘明丰", "key2": "林望", "key3": "陈文杰", "key4": "耿殿佳" }
在被访问后返回的是json格式的数据，在客户端获得json后会自动转换成对象。
好了，jQuery的异步使用场景基本满足我们的需求，自己试试看吧。
相关推荐
-
Javascript 直接调用服务器C#代码 ASP.NET Ajax实例
在MS Ajax中,JS与C#交互的一种方式就是调用WebService,该WebService可以ASMX的也可以是WCF的,不论哪种方式,系统都会自动为开发者生成代理的JS类.实现方法如下: 1. 建立一个网站,并在其中添加一个WCF服务(这里一定要选择Ajax-Enabled WCF Service),如下图所示: 2. IDE会自动为我们生成一个SVC文件,是对外的接口,以及该SVC对应的后台实现类,该类文件会被放在App_Code下,如下图所示: 3.修改该
-
asp.net(c#) MS AJAX的安装
见ASP.NET(www.asp.net)上贴了很久的MS AJAX视频和相关资料,国内却很少有人提起他,今天给大家简单说下我在学习AJAX初期所遇到的最大的困难――安装.仔细看了www.asp.net的AJAX栏目下载了ASP.NET AJAX 1.0 RC高高兴兴拿去安装,装好后打开.NET2005,发现工具栏里边多了一个标签,如下图: 然后在ASP.NET网站上找到了在线的文档,并学习了几个控件的简单应用,感觉还瞒是不错的.然后兴致勃勃的回到ASP.NET网站Learn栏目下观看AJAX视
-
c# AJAX实践VS2005 + RSSToolKit 开发你自己的RSS在线阅读器
Rss 是一种描述和同步网站内容的格式,是目前使用最广泛的XML应用.RSS 搭建了信息迅速传播的一个技术平台,使得每个人都成为潜在的信息提供者.发布一个 Rss 文件后,这个 Rss Feed中包含的信息就能直接被其他站点调用,而且由于这些数据都是标准的XML格式,所以也能在其他的终端和服务中使用. 在之前我们如果要实现博客的RSS订阅,通常都需要手写代码去生产或读取XML.现在有了RSSToolKit,这一切就变得简单了.你可以使用他在五分钟内实现自己的 Rss 在线阅读器.这篇文章将介绍
-
C#中常用的分页存储过程小结
表中主键必须为标识列,[ID] int IDENTITY (1,1)//每次自增一 1.分页方案一:(利用Not In和SELECT TOP分页) 语句形式: 复制代码 代码如下: SELECT TOP 10 * FROM TestTable WHERE (ID NOT IN (SELECT TOP 20 id FROM TestTable ORDER BY id)) ORDER BY ID SELECT TOP 页大小 * FROM TestTable WHERE (ID NOT IN (SE
-
C#拼接SQL语句 用ROW_NUMBER实现的高效分页排序
如果项目中要用到数据库,铁定要用到分页排序.之前在做数据库查询优化的时候,通宵写了以下代码,来拼接分页排序的SQL语句 复制代码 代码如下: /// <summary> /// 单表(视图)获取分页SQL语句 /// </summary> /// <param name="tableName">表名或视图名</param> /// <param name="key">唯一键</param> //
-
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容 我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页 页面中我们放置一个Div容器用来存放返回的内容 <div id="comment"><img src="images/Wait.gif&quo
-
C#基于数据库存储过程的AJAX分页实例
本文实例讲述了C#基于数据库存储过程的AJAX分页实现方法.分享给大家供大家参考.具体如下: 首先我们在数据库(SQL Server)中声明定义存储过程 复制代码 代码如下: use sales --指定数据库 if(exists(select * from sys.objects where name='proc_location_Paging')) --如果这个proc_location_paging存储过程存在则删除 drop proc proc_location_Pagin
-
c#分页读取GB文本文件实例
本文实例讲述了c#分页读取GB文本文件的方法.分享给大家供大家参考.具体如下: 一.应用场景: ① .我在做BI开发测试的时候,有可能面对source文件数GB的情况,如果使用一般的文本编辑器,则会卡死,或要等很久才能显示出来. ② .有时候,我们使用ascii(01)或ascii(02)作为行或列的分隔符,这样的临时文件用于导数据到DB,如果文件导入过程中有错误,需要查看文件 的时候,普通的编辑器不支持换行,则会很恐怖. 为解决这两个需求,我使用c#完成了一个简单的winform的应用程序.
-
div弹出层的ajax登录(Jquery版+c#)
页面初始化,界面如图所示: Server name文本框获取焦点时候,界面如图所示(这里可以改成你登录的验证码): 可以加载SQL Server服务列表,也是我的简易SQL查询分析器评论中静夜妙思给予的方法,非常感谢! 加载列表如下图所示: 可以随意地点击添加到Server name中,登录时截图所示: 文本框验证都写好了!还有Authentication验证方式,windows验证下面Login,Password文本框禁掉!由于时间原因,不上图了 demo.html(全部前台代码,js/css
-
基于jquery的分页控件(C#)
JS代码: Code: 复制代码 代码如下: var _MaxPageSize = 0; var _PageSize = 5; var _IsUpDown = false; function InitPage(funName, currentPageSize, maxPageSize, pageSize, isUpDown) { _FunName = funName; _CurrentPageSize = currentPageSize; _MaxPageSize = maxPageSize;
-
一个很简单的jquery+xml+ajax的无刷新树结构(无css，后台是c#)
复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.Linq; using System.Xml; using System.Xml.Linq; namespace WebApplication3 { public