一: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="https://www.jb51.net/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" value="show info"></input>
<ul>ajax:</ul>
<ul>resulthtml:</ul>
<ul>load:</ul>
<ul>get:</ul>
<ul>post:</ul>
<ul></ul>
</body>
</html>
Default.aspx.cs里面有没写任何代码,默认即可。
请求的接受者这里面有三种角色:response.aspx页面、test.htm静态页面和TextJson.txt。