AJAX 学习笔记[七] AJAX 与JQuery 框架

来源：互联网发布：java if else 缩写编辑：程序博客网时间：2024/05/16 12:41

A 使用JQuery 的load( ) 方法

使用load( ) 方法发送异步数据，返回的数据不需要用户考虑是文本还是XML，JQuery 都会自动进行处理。示例如下：

客户端（14-1.html ）：

<html>
<head>
<title>jQuery简化Ajax步骤</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startRequest(){
    $("#target").load("14-1.aspx");
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>

服务器端（14-1.aspx ）：

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    Response.Write("异步测试成功，很高兴");
%>

注意：如果服务器端返回的是XML 格式的数据，在客户端也会自动实现正确显示。

B 使用JQuery 的 $.get( ) 和$.post( ) 方法

客户端（14-5.html ）：

<html>
<head>
<title>GET VS. POST</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
    var firstName = encodeURI($("#firstName").val());
    var birthday = encodeURI($("#birthday").val());
    //组合成对象的形式
    var queryString = {firstName:firstName,birthday:birthday};
    return queryString;
}
function doRequestUsingGET(){
    $.get("14-5.aspx",createQueryString(),
        //发送GET请求
        function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    );
}
function doRequestUsingPOST(){
    $.post("14-5.aspx",createQueryString(),
        //发送POST请求
        function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    );
}
</script>
</head>

<body>
<h2>输入姓名和生日</h2>
<form>
    <input type="text" id="firstName" /><br>
    <input type="text" id="birthday" />
</form>
<form>
    <input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
    <input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

服务器端（14-5.aspx ）：

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    if(Request.HttpMethod == "POST")
        Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
    else if(Request.HttpMethod == "GET")
        Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
%>

C 使用JQuery 的 $.ajax( )方法

客户端（14-6.html ）：

<html>
<head>
<title>$.ajax()方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
    //必须两次编码才能解决中文问题
    var firstName = encodeURI(encodeURI($("#firstName").val()));
    var birthday = encodeURI(encodeURI($("#birthday").val()));
    //组合成对象的形式
    var queryString = "firstName="+firstName+"&birthday="+birthday;
    return queryString;
}
function doRequestUsingGET(){
    $.ajax({
        type: "GET",
        url: "14-5.aspx",
        data: createQueryString(),
        success: function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    });
}
function doRequestUsingPOST(){
    $.ajax({
        type: "POST",
        url: "14-5.aspx",
        data: createQueryString(),
        success: function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    });
}
</script>
</head>

<body>
<h2>输入姓名和生日</h2>
<form>
    <input type="text" id="firstName" /><br>
    <input type="text" id="birthday" />
</form>
<form>
    <input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
    <input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

服务器端（14-5.aspx ）：

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    if(Request.HttpMethod == "POST")
        Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
    else if(Request.HttpMethod == "GET")
        Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
%>

$.ajax( options )方法的参数非常地多，涉及Ajax 的方方面面，需要自己多多参考和实践。

注意：如果需要传递中文数据，必须进行两次encodeURI( ) 编码。