URL ： test.aspx— 后台处理程序
Type ： get,post---- 数据发送方式
DataType:json----- 接收数据方式
Data:params------- 要传递的数据
Success ： update_page----- 回传函数
jQuery的Ajax实例！
实例一-Json：
$(function(){
$('#btnload').click(function(){
$.ajax({
type: "POST",
url: "test.aspx",
contentType: "application/json",
dataType: "json",
success: function(msg){
alert(msg.name);
$("#dt").append(msg);
},
error:function(msg){
alert( "Error: " + msg );
}
});
});
});
test.aspx页面
public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("{/"name/":/"xp/",/"sex/":/"1/"}");
Response.End();
}
}
结果:alert提示:xp
实例二-字符串：
$(function(){
$('#btnload').click(function(){
$.ajax({
type: "POST",
url: "test.aspx",
contentType: "application/html",
dataType: "html",
success: function(msg){
alert(msg);
$("#dt").append(msg);
},
error:function(msg){
alert( "Error: " + msg );
}
});
});
});
test.aspx页面
public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("sth.");
Response.End();
}
}
结果:alert提示:sth.
jQuery Ajax之load()方法
load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中。它的语法结构为：
load( url [, data][, callback] )
load()方法参数解释见下表：
参数名称 类 型 说 明
url String 请求HTML页面的URL地址
data（可选） Object 发送至服务器的key/value数据
callback（可选） Function 请求完成时的回调函数，无论请求成功或失败
1、 载入HTML文档
首先创建一个名为test.html的HTML文件，为后台Ajax载入做准备。代码如下：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="comment">
已有评论：
</div>
<div class="comment">
<h6>张三：</h6>
<p class="para">沙发。</p>
</div>
<div class="comment">
<h6>李四：</h6>
<p class="para">板凳。</p>
</div>
<div class="comment">
<h6>王五：</h6>
<p class="para">地板。</p>
</div>
</body>
</html>
然后新建一个空白页面，在上面添加两个元素：<button>按钮用来触发Ajax事件，id为“resText”的元素用来显示追加 的HTML内容。接下来就是编写jQuery代码了。等DOM元素加载完毕，通过单击id为“send”的按钮来调用laod()方法，然后将 test.html的内容加载到id为“resText”的元素里。那么代码如下：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jquery-1.3.2.js" ></script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div id="resText"></div>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#send").click(function(){
$("#resText").load("test.html");
});
});
// --></script>
</body>
</html>
当按钮被单击后，出现如下图的界面：
显然，load()方法完成了原本很繁琐的工作。开发人员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件的URL作为参数传递给load()方法即可。
2、 筛选载入的HTML文档
上个例子是将test.html页面的内容都加载到id为“resText”的元素里。如果只需要加载test.html页面内的某些元素，那么可以 使用load()方法的URL参数来达到目的。通过为URL参数指定选择符，可以很方便地从加载过来的HTML文档里筛选出所需要的内容。
load()方法的URL参数的语法结构为：“url selector”。注意，URL和选择器之间有一个空格。
例如只需要加载test.html页面中class为“para”的内容，可以使用以下代码来完成：
$("#resText").load("test.html .para");
运行效果则如下图：
3、 传递方式
load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST方式。
复制代码 代码如下:
//无参数传递，则是GET方式
$("#resText").load("test.php",function(){
//......
});
//有参数传递，则是POST方式
$("#resText").load("test.php",{name:"xht555",age:"24"},function(){
//......
});
4、 回调参数
对于必须在加载完成后才能继续的操作，load()方法提供了回调函数（callback），该函数有三个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，jQuery代码如下：
复制代码 代码如下:
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//responseText:请求返回的内容
//textStatus:请求状态：success、error、notmodified、timeout这4种
//XMLHttpRequest:XMLHttpRequest对象
});
注意：在load()方法中，无论Ajax请求是否成功，只要当请求完成（complete）后，回调函数（callback）就被触发。
当我们不通过重新加载页面，用Ajax访问服务器的时候，有两个选择可以将请求信息传送到服务器上。这两个选择分别是GET和POST。
在把请求信息发送到服务器上以加载新的页面时，这两个选择有两个不同之处。第一个区别是你是请求了信息的一小部分而不是整个页面。第二个区别也是最 明显的区别是由于Ajax请求不会出现在地址栏中，因此当发送请求时，在访问者的屏幕上是看不出什么异同的。使用GET生成调用不会暴露域和它们的值，使 用POST也不会暴露。因此，我们要怎样在这两者之间作出选择呢?
初学者可能犯的一个错误是对于大多数的调用都使用GET命令，仅仅因为这一命令相对而言更容易编写。GET与POST调用之间最显著的差异是当发出 加载新页面请求时，GET调用对于同样数量的数据有着相同的限制。唯一的区别是你处理的少量的Ajax请求数据，而你并不想通过这种长度运行的限制来完成 页面的加载。初学者可能会在少数情况下，如他们确实需要传送更多信息时，使用POST。
当我们有大量数据要传送时最好的办法是一次发出多个只传递少量信息的Ajax调用时。如果你正用一个Ajax调用发送大量数据，那么最好是结束这种做法，因为这样做并不能节约时间。
因此，需要传送大量数据能成为我们在GET和POST之间犹豫不决的理由吗?这两个方法都是为不同的目的而设计的，两者的不同也在于其使用目的。这一说法不仅适用于GET和POST的使用，也适用于其他的方法。
GET的目的就如同其名字一样是用于获取信息的。它旨在显示出页面上你要阅读的信息。浏览器会缓冲GET请求的执行结果，如果同样的GET请求再次 发出，浏览器就会显示缓冲的结果而不是重新运行整个请求。这一流程不同于浏览器的处理过程，但是它是有意设计成这样以使GET调用更有效率。GET调用会 检索要显示在页面中的数据，数据不会在服务器上被更改，因此重新请求相同数据的时候会得到相同的结果。
POST方法应该用于你需要更新服务器信息的地方。如某调用要更改保存在服务器上的数据，而从两个同样的POST调用返回的结果或许会完全不同，因 为第二个POST调用的值与第一个的值不相同，这是由于第一个调用已经更新了其中一些值。POST调用通常会从服务器上获取响应而不是保持前一个响应的缓 冲。
因此，不要用数据的量来决定是要选择GET还是POST，而应该按照目的在两者间作出选择。如果调用是要检索服务器上的数据则使用GET。如果要检 索的值会随时间和更新进程的改变而改变则要在GET调用中添加一个当前时间参数，这样后面的调用才不会使用先前的不正确的缓冲。如果调用是向服务器上发送 任意数据，就可以使用POST。
事实上，我们不应该不仅仅只将这个标准作为选择怎样使用GET和POST调用的标准，在处理页面处理形式的时候也可以将它作为取舍这两个调用的标准。
角色 管理员 积分 1677 声望 饱读诗书 注册时间 2009-10-18 |
发表于2010-01-27 14:52
#5
1:GET访问 浏览器 认为 是等幂的
在无世界里，你一定要......
引用
回复
|
|
角色 管理员 积分 1677 声望 饱读诗书 注册时间 2009-10-18 |
发表于2010-02-04 16:30
#6
jQuery Ajax调用页面某一个方法： $("#btnAjax").click(function() Default2.aspx.cs的代码： protected void Page_Load(object sender, EventArgs e) public void GetDate()
在无世界里，你一定要......
引用
回复
|
|
角色 管理员 积分 1677 声望 饱读诗书 注册时间 2009-10-18 |
发表于2010-02-04 17:45
#7
jQuery Ajax调用Page(aspx)页面的webMethod实例： $("#btnAjax").click(function() Default2.aspx.cs内的代码： |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
