欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery之a(chǎn)jax技術(shù)的詳細(xì)介紹

 更新時(shí)間：2013年06月19日 17:25:59   作者：  
本篇文章是對(duì)jQuery中的ajax技術(shù)進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
1：Ajax技術(shù)包含以下幾點(diǎn)：
基于Web標(biāo)準(zhǔn)(XHTML + CSS)的展示
使用DOM進(jìn)行動(dòng)態(tài)顯示和交互
使用XMLHttpRequest進(jìn)行數(shù)據(jù)交換和相關(guān)操作
使用javascript將所有內(nèi)容綁定在一起
Ajax的核心是JavaScript的XMLHttpRequest對(duì)象，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，使用JS可以控制XMLHttpRequest對(duì)象向服務(wù)器提出請(qǐng)求并處理響應(yīng)，
而不影響用戶對(duì)頁面的正常訪問。對(duì)于XMLHttpRequest對(duì)象，不同的瀏覽器提供了不同的支持，IE是將其作為ActiveX控件集成到瀏覽器中的，而其他主流的瀏覽器直接
作為一般的JS對(duì)象來創(chuàng)建。

2：JS中的Ajax

XMLHttpRequest對(duì)象的屬性及簡(jiǎn)要說明

名稱

說明

readyState

通信的狀態(tài)，當(dāng)XMLHttpRequest對(duì)象把一個(gè)HTTP請(qǐng)求發(fā)送到服務(wù)器，到接收到服務(wù)器響應(yīng)信息，整個(gè)過程將經(jīng)歷5種狀態(tài)，該屬性取值為為0-4

onreadystatechange

設(shè)置回調(diào)事件處理程序，當(dāng)readyState屬性的值改變時(shí)，會(huì)激發(fā)此事件

responseText

服務(wù)器返回的text/html格式的文檔

responseXML

服務(wù)器返回的text/xml格式的文檔

status

描述了HTTP響應(yīng)short類型的狀態(tài)代碼，100表示Continue, 101表示Switching protocols數(shù)據(jù)交換，200表示執(zhí)行正常，404表示未找到頁面，500表示內(nèi)部程序錯(cuò)誤

statusText

HTTP響應(yīng)的狀態(tài)代碼對(duì)應(yīng)的文本(OK, not found)


readyState屬性代碼

代碼

說明

0

代表未初始化的狀態(tài)。創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，尚未初始化

1

代表連接狀態(tài)，已經(jīng)調(diào)用了open方法，并且已經(jīng)準(zhǔn)備好發(fā)送請(qǐng)求

2

代表發(fā)送狀態(tài)，已經(jīng)調(diào)用了send方法發(fā)出請(qǐng)求，尚未得到響應(yīng)結(jié)果

3

代表正在接收狀態(tài)，已經(jīng)接收了HTTP響應(yīng)的頭部信息，正在接收響應(yīng)內(nèi)容

4

代表已加載狀態(tài)，此時(shí)響應(yīng)內(nèi)容已完全被接收


復(fù)制代碼 代碼如下:

<!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的內(nèi)容：
復(fù)制代碼 代碼如下:

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

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

 xmlRequest = CreateRequest();  //創(chuàng)建XMLHttpRequest對(duì)象
 xmlRequest.onreadystatechange = ResponseHandler;  //設(shè)置回調(diào)函數(shù)
 xmlRequest.open("GET","http://www.baidu.com");  //初始化請(qǐng)求對(duì)象
 xmlRequest.send(null);   //發(fā)送請(qǐng)求信息

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


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

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

復(fù)制代碼 代碼如下:

$(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]);
復(fù)制代碼 代碼如下:

<!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>回復(fù)列表</h2>
<input type="button" id="refresh" value="刷新列表" />
<div id="commentList"></div>
</body>
</html>

Load.js       
復(fù)制代碼 代碼如下:

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

5：$.get()方法
是一個(gè)全局方法，該方法使用GET方式來進(jìn)行異步請(qǐng)求，語法格式如下：
復(fù)制代碼 代碼如下:

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

復(fù)制代碼 代碼如下:

<!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
復(fù)制代碼 代碼如下:

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

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

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

BlogList.aspx
復(fù)制代碼 代碼如下:

<%@ Page Language="C#" %>
<%
    /*
     * 分別向數(shù)組里添加一些數(shù)據(jù)，
     * 這些數(shù)據(jù)一般來自數(shù)據(jù)庫(kù)，
     * 這里只是模擬，就靜態(tài)添加了
     */
    string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET", ".NET" };
    string[] blogTitle = { "CSS中的padding", "CSS入門", "C#中的類",
                           "C#基礎(chǔ)知識(shí)", "C#面向?qū)ο?, "C#設(shè)計(jì)模式" };

    string key = Request["key"];  //獲取請(qǐng)求服務(wù)器的關(guān)鍵字
    /*
     * 遍歷數(shù)組集合
     */
    for (int i = 0; i < blogClass.Length; i++)
    {
        /*
         * 如果關(guān)鍵字為空，顯示所有的記錄
         * 如果關(guān)鍵字等于分類名稱，顯示該分類下的記錄
         */
        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方式提交的數(shù)據(jù)，所有的參數(shù)信息都將追加到URL后面，而Web請(qǐng)求一般對(duì)URL長(zhǎng)度有一定限制，所以$.get()方法傳遞的數(shù)據(jù)長(zhǎng)度也有一定的上限，
而$.post()方法是將參數(shù)作為消息的實(shí)體發(fā)送到服務(wù)器的，對(duì)數(shù)據(jù)無長(zhǎng)度上的影響。
復(fù)制代碼 代碼如下:

<!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 
復(fù)制代碼 代碼如下:

$(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 
復(fù)制代碼 代碼如下:

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

7：$.getJSON()方法
var xmlReq = $.getJSON(url, [data], [callback]);
復(fù)制代碼 代碼如下:

<!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 
復(fù)制代碼 代碼如下:

$(document).ready(function(){
 /* 異步請(qǐng)求，載入 JSON 數(shù)據(jù) */      
 $.getJSON("http://localhost:2154/Web/PeopleList.aspx",
  function(data){  
   /* 遍歷請(qǐng)求結(jié)果 */
   $.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 
復(fù)制代碼 代碼如下:

<%@ 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]);
復(fù)制代碼 代碼如下:

<!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 
復(fù)制代碼 代碼如下:

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

Test.js 
復(fù)制代碼 代碼如下:

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

9：序列化表單數(shù)據(jù)
jQuery為了解決參數(shù)很多的問題，提供了序列化的方法簡(jiǎn)化對(duì)表單數(shù)據(jù)的收集和格式化。
復(fù)制代碼 代碼如下:

<!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 
復(fù)制代碼 代碼如下:

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

Register.aspx 
復(fù)制代碼 代碼如下:

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

10：serializeArray()方法
該方法將頁面表單序列化成一個(gè)JSON結(jié)構(gòu)的對(duì)象，該對(duì)象以"鍵/值"對(duì)集合的形式封裝了表單里的所有元素值。
這里注意的是該方法返回的是一個(gè)JSON對(duì)象，而不是JSON字符串
該JSON對(duì)象結(jié)構(gòu)如下：
復(fù)制代碼 代碼如下:

       [
           {"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：設(shè)置全局Ajax默認(rèn)選項(xiàng)
在應(yīng)用中，經(jīng)常編寫大量的Ajax方法來實(shí)現(xiàn)各種功能，每次都在$.ajax()方法中設(shè)置大量參數(shù)，非常不方便，jQuery提供了$.ajaxSetup()方法，可以設(shè)置
全局的Ajax默認(rèn)參數(shù)項(xiàng)。
$.ajaxSetup([options]);
復(fù)制代碼 代碼如下:

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

12：jQuery全局事件
ajaxComplete(callback);   //請(qǐng)求完成時(shí)觸發(fā)該事件
ajaxError(callback);   //請(qǐng)求出現(xiàn)錯(cuò)誤時(shí)觸發(fā)該事件
ajaxSend(callback);  //請(qǐng)求發(fā)送前觸發(fā)該事件
ajaxStart(callback);  //請(qǐng)求開始時(shí)觸發(fā)該事件
ajaxStop(callback);  //請(qǐng)求結(jié)束時(shí)觸發(fā)該事件
ajaxSuccess(callback);  //請(qǐng)求成功時(shí)觸發(fā)該事件
ajaxStart()方法和ajaxStop方法的事件處理程序是一個(gè)無參的函數(shù)，其余都可以有3個(gè)參數(shù)，語法格式如下：
復(fù)制代碼 代碼如下:

       function(event, XHR, settings) {
               event是觸發(fā)的事件對(duì)象
               XHR是XMLHttpRequest對(duì)象
              settings是Ajax請(qǐng)求配置參數(shù)
         }

復(fù)制代碼 代碼如下:

<!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 
復(fù)制代碼 代碼如下:

$(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");
 }); 
});

   

相關(guān)文章

最新評(píng)論