jQuery之ajax技術的詳細介紹

2019-11-20 22:38:16

字體：大中小

來源：轉載

供稿：網友

1：Ajax技術包含以下幾點：
基于Web標準(XHTML + CSS)的展示
使用DOM進行動態顯示和交互
使用XMLHttpRequest進行數據交換和相關操作
使用javascript將所有內容綁定在一起
Ajax的核心是JavaScript的XMLHttpRequest對象，它是一種支持異步請求的技術。簡而言之，使用JS可以控制XMLHttpRequest對象向服務器提出請求并處理響應，
而不影響用戶對頁面的正常訪問。對于XMLHttpRequest對象，不同的瀏覽器提供了不同的支持，IE是將其作為ActiveX控件集成到瀏覽器中的，而其他主流的瀏覽器直接
作為一般的JS對象來創建。

2：JS中的Ajax

XMLHttpRequest對象的屬性及簡要說明

名稱	說明
readyState	通信的狀態，當XMLHttpRequest對象把一個HTTP請求發送到服務器，到接收到服務器響應信息，整個過程將經歷5種狀態，該屬性取值為為0-4
onreadystatechange	設置回調事件處理程序，當readyState屬性的值改變時，會激發此事件
responseText	服務器返回的text/html格式的文檔
responseXML	服務器返回的text/xml格式的文檔
status	描述了HTTP響應short類型的狀態代碼，100表示Continue, 101表示Switching protocols數據交換，200表示執行正常，404表示未找到頁面，500表示內部程序錯誤
statusText	HTTP響應的狀態代碼對應的文本(OK, not found)

readyState屬性代碼

代碼	說明
0	代表未初始化的狀態。創建了一個XMLHttpRequest對象，尚未初始化
1	代表連接狀態，已經調用了open方法，并且已經準備好發送請求
2	代表發送狀態，已經調用了send方法發出請求，尚未得到響應結果
3	代表正在接收狀態，已經接收了HTTP響應的頭部信息，正在接收響應內容
4	代表已加載狀態，此時響應內容已完全被接收

復制代碼代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax</title>
<script src="JS/ajax.js"></script>
<style type="text/css">
 body { padding:20px; }
 #browser{ border:solid 1px #666; width:500px; height:300px; overflow:auto; }
 #content{ width:500px; height:80px; margin:10px 0; }

</style>
</head>
<body>
<input id="Access" type="button" value="Access" />
<br />
<textarea id="content"></textarea>
<div id="browser"></div>
</body>
</html>

ajax.js的內容：

復制代碼代碼如下:

var xmlRequest;
function CreateRequest()
{
 /* 創建XMLHttpRequest對象 */
 if(window.ActiveXObject)
 {
  return new ActiveXObject("Microsoft.XMLHTTP");
 }
 else if(window.XMLHttpRequest)
 {
  return new XMLHttpRequest();
 }
}
function ResponseHandler()
{
 if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
 {
  /* 如果通信成功，并且響應正常，執行以下操作 */

  var reqContent = xmlRequest.responseText;
  document.getElementById("browser").innerHTML = reqContent;
  document.getElementById("content").value = reqContent;
 }
}
function AjaxAccess()
{
 /* 異步請求百度首頁 */

 xmlRequest = CreateRequest();  //創建XMLHttpRequest對象
 xmlRequest.onreadystatechange = ResponseHandler;  //設置回調函數
 xmlRequest.open("GET","http://www.baidu.com");  //初始化請求對象
 xmlRequest.send(null);   //發送請求信息

 /* 觸發事件以后提示正在打開百度首頁 */
 var brow = document.getElementById("browser");
 brow.innerHTML = "<h1>正在打開百度搜索</h1>";
}
window.onload = function()
{
 document.getElementById("Access").onclick = AjaxAccess;  //設置按扭單擊事件
}

3：jQuery中的Ajax
$.ajax(options)方法
options是以“鍵/值”對的形式設置的，用于設置Ajax請求的參數，如請求方式、請求URL、回調函數等。
常用屬性如下：
url: 發送請求的地址
type:請求方式，GET和POST，默認為GET
timeout: 設置請求超時時間，該屬性為數值型，單位為毫秒
data: 發送到服務器的數據，“鍵/值”對形式，該屬性可以是對象或者字符串，如果是對象，則自動轉換為字符串
dataType: 預期服務器返回的數據類型，該屬性為字符串類型。可選值如下： xml、html：返回純文本HTML信息，包含的標簽(script標簽或者style標簽)會在
文本插入DOM的時候執行、 script：返回純文本JS代碼、json、jsonp、text
contentType: 發送信息至服務器時內容編碼類型，該屬性為字符串類型，默認值為"application/x-www-form-urlencoded"，一般不用設置，因為默認值適合大多數應用場合
beforeSend: 請求發送前的事件，該屬性為其設置事件處理程序，可用于發送前修改XMLHttpRequest的參數，如頭信息。

復制代碼代碼如下:

function(XMLHttpRequest) {
this;  /*這里this關鍵字用于訪問.ajax()方法的options參數對象*/
  } 
complete: 請求完成后的事件，無論請求成功與否，都將觸發該事件。
function(XMLHttpRequet, textStatus) {
this; /*這里this關鍵字用于訪問.ajax()方法的options參數對象*/
  }
textStatus參數返回當前請求的執行狀態(succss和error等)
success: 請求執行成功時的事件。
function(data, textStatus) {
this;  /*這里this關鍵字用于訪問.ajax()方法的options參數對象*/
  } 
error: 請求執行失敗時的事件
function(XMLHttpRequest, textStatus, errorThrown) {
this;  /*這里this關鍵字用于訪問.ajax()方法的options參數對象*/
  }
global: 是否觸發全局Ajax事件，該屬性為Boolean類型，默認值為false

復制代碼代碼如下:

$(document).ready(function(){
 $("#Access").click(function(){
  var xmlReq = $.ajax({
      type:'GET',
      url:'http://www.sougou.com',
      success:function(reqContent)
      {
       $("#browser").html(reqContent);
       $("#content").text(reqContent);
      }});
  $("#browser").html("<h1>正在打開搜狗搜索</h1>");
 });
});

4：load方法
load(url, [data], [callback]);

復制代碼代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Load</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Load.js"></script>
<style type="text/css">
 body { padding:20px; }
 #commentList{ border:solid 2px #888; width:500px; overflow:auto; }
 #commentList p{ border-bottom:solid 1px #ddd; margin-bottom:30px; padding-bottom:15px; font-size:13px; }
 #commentList div{ background:#eee; }
 #commentList h3{ color:#888; padding:10px 0 0 0; }

</style>
</head>
<body>
<h2>回復列表</h2>
<input type="button" id="refresh" value="刷新列表" />
<div id="commentList"></div>
</body>
</html>

Load.js

復制代碼代碼如下:

$(document).ready(function(){
 $("#refresh").click(function(){
  /* 要訪問的頁面URL，根據你實際情況做相應修改 */
  var url = "http://www.sogou.com";
  $("#commentList").load(url);  //加載相應內容
 }); 
});

5：$.get()方法
是一個全局方法，該方法使用GET方式來進行異步請求，語法格式如下：

復制代碼代碼如下:

         var xmlReq = $.get(url, [data], [callback], [type]);
         $.get("www.baidu.com", 
             {
                  user: 'zhangsan'
             }
             );
         callback: function(data, textStatus) {}

復制代碼代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Get</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Get.js"></script>
<style type="text/css">
body{ padding:30px 80px; font-size:14px; }
#blogList{ width:240px; height:120px; margin:10px 0; padding:8px; border:solid 1px #777; font-size:13px; }
#blogList span{ display:inline-block; width:50px; text-align:right; margin-right:20px; color:#999; }
</style>
</head>
<body>
分類：
<select id="blogClass">
<option selected="selected" value="">所有</option>
<option>CSS</option>
<option>.NET</option>
</select>
<input type="button" id="Search" value="Search" />
<div id="blogList"></div>
</body>
</html>

Get.js

復制代碼代碼如下:

$(document).ready(function(){
 $("#Search").click(function(){

  /* 使用Get方式請求指定URL */
  $.get("http://localhost:2154/Web/BlogList.aspx",
  {
   key : $("#blogClass").val()
  },
  function(data){
   $("#blogList").html(data);
  });
 });

 $("#Search").click();  //觸發一次單擊事件
});

BlogList.aspx

復制代碼代碼如下:

<%@ Page Language="C#" %>
<%
    /* 
     * 分別向數組里添加一些數據，
     * 這些數據一般來自數據庫，
     * 這里只是模擬，就靜態添加了
     */
    string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET", ".NET" };
    string[] blogTitle = { "CSS中的padding", "CSS入門", "C#中的類", 
                           "C#基礎知識", "C#面向對象", "C#設計模式" };

    string key = Request["key"];  //獲取請求服務器的關鍵字
    /*
     * 遍歷數組集合
     */
    for (int i = 0; i < blogClass.Length; i++)
    {
        /*
         * 如果關鍵字為空，顯示所有的記錄
         * 如果關鍵字等于分類名稱，顯示該分類下的記錄
         */
        if (key == null || key == string.Empty || key == blogClass[i])
        {
            %>
            <div>
            <span><%= blogClass[i]%></span><%= blogTitle[i]%>
            </div>
            <%
        }
    }    
%>

6：$.post()方法
var xmlReq = $.post(url, [data], [callback], [type]);
$.get()方法是以GET方式提交的數據，所有的參數信息都將追加到URL后面，而Web請求一般對URL長度有一定限制，所以$.get()方法傳遞的數據長度也有一定的上限，
而$.post()方法是將參數作為消息的實體發送到服務器的，對數據無長度上的影響。

復制代碼代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Post</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Post.js"></script>
<style type="text/css">
body{ padding:20px 80px; font-size:14px; }
#login{ width:240px; height:160px; margin:10px 0; padding:8px; border:solid 1px #777; font-size:13px; }
#login h4{ color:#666; margin:5px 0; font-size:18px; }
#login span{ font-size:15px; line-height:40px; font-weight:700; }
input,button{ margin:15px 0 0 0; line-height:14px;  }
input{ height:15px; }
</style>
</head>
<body>
<div id="login">
 <h4>用戶登錄</h4>
 Username:<input name="username" />
    <br />
    Password:<input name="password" type="password" />
    <br />
    <button id="submit">Submit</button>
</div>
</body>
</html>

Post.js

復制代碼代碼如下:

$(document).ready(function(){
 $("#submit").click(function(){
  $.post("http://localhost:2154/Web/Login.aspx",
  {
   username : $("input[name='username']").val(),
   password : $("input[name='password']").val()
  },
  function(data){
   $("#login").html(data);
  });
 });
});

Login.aspx

復制代碼代碼如下:

<%@ Page Language="C#" %>
<span>歡迎你  <font color="red"><%= Request.Form["username"] %></font>
<br />
你的身份是  <font color="red">管理員</font>
<br />
  <button>修改資料</button>
  <button>注銷登錄</button>
</span>

7：$.getJSON()方法
var xmlReq = $.getJSON(url, [data], [callback]);

復制代碼代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/getJSON.js"></script>
<style type="text/css">
body{ padding:20px; }
#peoples{ background:#999; border:solid 2px #333; width:300px; }
#peoples td{ padding:5px; }
#peoples thead{ background:#555; color:#FFF; font-weight:700; font-size:16px; }
#peoples tbody{ font-size:13px;background:#fff; }
</style>
</head>
<body>
<table id="peoples" cellspacing="1">
<thead>
<tr><td>Name</td><td>Age</td><td>Sex</td></tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>

getJSON.js

復制代碼代碼如下:

$(document).ready(function(){
 /* 異步請求，載入 JSON 數據 */       
 $.getJSON("http://localhost:2154/Web/PeopleList.aspx",
  function(data){  
   /* 遍歷請求結果 */
   $.each(data,
    function(index, p){
     var html = "<tr><td>" + p.name + "</td><td>" + p.age + 
     "</td><td>" + (p.isMale ? "male" : "female") + "</td></tr>"
     $("#peoples>tbody").append(html);
    });
  });
});

PeopleList.aspx

復制代碼代碼如下:

<%@ Page Language="C#" %>
[{
 "name" : "David li",
 "age" : 61,
 "isMale" : true
},{
 "name" : "Michael Clinton",
 "age" : 53,
 "isMale" : true
},{
 "name" : "Brook Ann",
 "age" : 23,
 "isMale" : false
},{
 "name" : "Mary Johnson",
 "age" : 35,
 "isMale" : false
},{
 "name" : "Elizabeth Jones",
 "age" : 33,
 "isMale" : false
},{
 "name" : "James Smith",
 "age" : 25,
 "isMale" : true
}]

8：$.getScript()方法
var xmlReq = $.getScript(url, [callback]);

復制代碼代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>getScript</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/getScript.js"></script>
<style type="text/css">
body{ padding:30px; }
</style>
</head>
<body>
<h1>使用getScript()方法異步加載JavaScript文件</h1>
<input type="button" value="Button" id="input" />
</body>
</html>

getScript.js

復制代碼代碼如下:

$(document).ready(function(){
 $("#input").click(function(){
  $.getScript("Test.js", function(data){
   showMsg();
  });
 });
});

Test.js

復制代碼代碼如下:

function showMsg(){
 alert("This is Message"); 
}

9：序列化表單數據
jQuery為了解決參數很多的問題，提供了序列化的方法簡化對表單數據的收集和格式化。

復制代碼代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>serialize</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/serialize.js"></script>
<style type="text/css">
body{ padding:20px; }
</style>
</head>
<body>
<table>
<tbody>
<form onsubmit="return false;" >
<tr><td>Username:</td><td><input name="username" /></td></tr>
<tr><td>Age:</td><td><input name="age" /></td></tr>
<tr><td>Sex:</td><td>
 <select name="isMale">
     <option value="true">男</option>
        <option value="false">女</option>
    </select></td></tr>
<tr><td>Email:</td><td><input name="email" /></td></tr>
<tr><td>Details:</td><td><textarea name="details"></textarea></td></tr>
<tr><td></td><td><button name="btnSubmit">Submit</button></td></tr>
</form>
</tbody>
</table>
</body>
</html>

serialize.js

復制代碼代碼如下:

$(document).ready(function(){
 $("button[name='btnSubmit']").click(function(){ 
  $.post("http://localhost:2154/Web/Register.aspx",
   $("form").serialize(),  //序列化表單數據
   function(data){
    $("table tbody").append("<tr><td colspan=2>" + data + "</td></tr>");
   });
  });
});

Register.aspx

復制代碼代碼如下:

<%@ Page Language="C#" %>
Username:<%= Request["username"] %>
<br />
Age:<%= Request["age"] %>
<br />
IsMale:<%= Request["isMale"]%>
<br />
Email:<%= Request["email"]%>
<br />
Details:<%= Request["details"]%>

10：serializeArray()方法
該方法將頁面表單序列化成一個JSON結構的對象，該對象以"鍵/值"對集合的形式封裝了表單里的所有元素值。
這里注意的是該方法返回的是一個JSON對象，而不是JSON字符串
該JSON對象結構如下：

復制代碼代碼如下:

       [
           {"name": "name1" , "value":  "value1"},
           {"name": "name2" , "value":  "value2"},
           {"name": "name3" , "value":  "value3"}
       ]
     var jsonData = $("form").serializeArray();
     var textName = jsonData[0].name;
     var textValue = jsonData[0].value;

11：設置全局Ajax默認選項
在應用中，經常編寫大量的Ajax方法來實現各種功能，每次都在$.ajax()方法中設置大量參數，非常不方便，jQuery提供了$.ajaxSetup()方法，可以設置
全局的Ajax默認參數項。
$.ajaxSetup([options]);

復制代碼代碼如下:

$.ajaxSetup({
     url: 'Test.html',
     type: 'POST',
     global: false,  //禁止觸發全局事件
     dataType: 'json',
     error: function(xhr, textStatus, errorThrown) {
           alert(textStatus);
      }
     });

12：jQuery全局事件
ajaxComplete(callback); //請求完成時觸發該事件
ajaxError(callback); //請求出現錯誤時觸發該事件
ajaxSend(callback); //請求發送前觸發該事件
ajaxStart(callback); //請求開始時觸發該事件
ajaxStop(callback); //請求結束時觸發該事件
ajaxSuccess(callback); //請求成功時觸發該事件
ajaxStart()方法和ajaxStop方法的事件處理程序是一個無參的函數，其余都可以有3個參數，語法格式如下：

復制代碼代碼如下:

       function(event, XHR, settings) {
               event是觸發的事件對象
               XHR是XMLHttpRequest對象
              settings是Ajax請求配置參數
         }

復制代碼代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxGlobalEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/AjaxGlobalEvent.js"></script>
<style type="text/css">
body{ padding:20px; }
textarea{ width:350px; height:120px; }
#loading{ background-color:#eee; border:solid 1px #999; margin:5px 0 10px; padding:5px; font-size:13px; }
</style>
</head>
<body>
<div id="show"></div>
<button name="btnLoad">Load</button>
</body>
</html>

AjaxGlobalEvent.js

復制代碼代碼如下:

$(document).ready(function(){
 $("#show").ajaxStart(function(){
  $(this).append("<p>Run ajaxStart</p>");
 });
 $("#show").ajaxStop(function(){
  $(this).append("<p>Run ajaxStop</p>");
 });

 $("#show").ajaxComplete(function(){
  $(this).append("<p>Run ajaxComplete</p>");
 });

 $("#show").ajaxError(function(){
  $(this).append("<p>Run ajaxError</p>");
 });

 $("#show").ajaxSend(function(){
  $(this).append("<p>Run ajaxSend</p>");
 });

 $("#show").ajaxSuccess(function(){
  $(this).append("<p>Run ajaxSuccess</p>");
 });
 $("button[name='btnLoad']").click(function(){ 
  $.get("http://www.sohu.com");
 }); 
});