jQuery之ajax技术

1锛?Ajax????????浠ヤ????癸?

? ? ??轰?Web????(XHTML + CSS)??灞?绀?

? ? 浣跨??OM杩?琛??ㄦ???剧ず??浜や?

? ? 浣跨??MLHttpRequest杩?琛??版??浜ゆ?㈠???稿?虫??浣?

? ? 浣跨??avascript灏???????瀹圭?瀹??ㄤ?璧?

Ajax???稿???JavaScript??XMLHttpRequest瀵硅薄锛?瀹???涓?绉?????寮?姝ヨ?锋?????????绠???瑷?涔?锛?浣跨??S??浠ユ?у??MLHttpRequest瀵硅薄?????″?ㄦ???鸿?锋?骞跺?????搴?锛?

??涓?褰卞???ㄦ?峰?归〉?㈢??姝ｅ父璁块????瀵逛?XMLHttpRequest瀵硅薄锛?涓?????娴?瑙??ㄦ??渚?浜?涓?????????锛?IE??灏??朵?涓?ctiveX?т欢?????版?瑙??ㄤ腑??锛????朵?涓绘???娴?瑙??ㄧ?存??

浣?涓轰?????JS瀵硅薄?ュ??寤恒??

2锛?JS涓???Ajax

? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?XMLHttpRequest瀵硅薄??灞??у??绠?瑕?璇存??

??绉?	璇存??
readyState	??淇＄???舵??锛?褰?XMLHttpRequest瀵硅薄??涓?涓?HTTP璇锋??????版???″????版?ユ?跺?版???″?ㄥ??搴?淇℃??锛??翠釜杩?绋?灏?缁???5绉??舵??锛?璇ュ??у???间负涓?-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灞??т唬??

浠ｇ??	璇存??
浠ｈ〃????濮??????舵??????寤轰?涓?涓?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()
{
  /* ??寤?MLHttpRequest瀵硅薄 */
  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();  //??寤?MLHttpRequest瀵硅薄
  xmlRequest.onreadystatechange = ResponseHandler;  //璁剧疆??璋??芥??  xmlRequest.open("GET","http://www.baidu.com");  //??濮???璇锋?瀵硅薄
  xmlRequest.send(null);    //????璇锋?淇℃??
  
  /* 瑙???浜?浠朵互????绀烘?ｅ?ㄦ??寮??惧害棣?椤?*/
  var brow = document.getElementById("browser");
  brow.innerHTML = "<h1>姝ｅ?ㄦ??寮??惧害??绱?lt;/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??绛?浼???

? ? ????????OM???跺???ц????script锛?杩???绾?????JS浠ｇ????json??jsonp??text

contentType:

? ? 搴??ㄥ?哄??

?beforeSend: 璇锋?????????浜?浠讹?璇ュ??т负?惰?剧疆浜?浠跺???绋?搴?锛????ㄤ???????淇???MLHttpRequest?????帮?濡?澶翠俊????

? ? ? ? ? ? ? ? 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>姝ｅ?ㄦ??寮???????绱?lt;/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>??澶???琛?lt;/h2>
<input type="button" id="refresh" value="?锋?板??琛? />
<div id="commentList"></div>

</body>
</html>

Load.js

$(document).ready(function(){
  $("#refresh").click(function(){
    /* 瑕?璁块????椤甸??RL锛??规??浣?瀹??????靛???稿?淇???*/
    var url = "http://www.sogou.com";
    $("#commentList").load(url);  //??杞界?稿???瀹?  });  
});

5锛?$.get()?规?

? ? ? ??涓?涓??ㄥ??规?锛?璇ユ?规?浣跨??ET?瑰??ヨ?琛?寮?姝ヨ?锋?锛?璇?娉??煎?濡?涓?锛?

? ? ? ? ?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(){
    
    /* 浣跨??et?瑰?璇锋???瀹?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()?规???浠?ET?瑰???浜ょ???版??锛??????????颁俊???藉?杩藉????RL???????Web璇锋?涓???瀵?RL?垮害??涓?瀹????讹???浠?.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>浣跨??etScript()?规?寮?姝ュ??杞?avaScript??浠?lt;/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 慰nsubmit="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">??lt;/option>
        <option value="false">濂?lt;/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瀛?绗?覆

? ? ?璇?SON瀵硅薄缁???濡?涓?锛?

[
            {"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");
  });  
});

???

jQuery之ajax技术

继续阅读

SpringMVC之ajax异步交互

SpringMvc与前端交互的数据转递（ajax）一、text类型数据二、json类型数据

PHP基础入门，简单实现前端后端交互<?php?>、echo变量及区分单双引号创建数组、echo、print_r()、var_dump()区别二维数组常见数据类型及调用函数自定义函数http协议常用请求方式及在php中的用法网页和服务器简单交互案例

jqGrid的使用笔记：5. 事件

JSON的三种解析方式JSON的三种解析方式一、什么是JSON？二、JSON解析之传统的JSON解析三、JSON解析之GSON三、JSON解析之FastJSON总结：

django短信验证码的后端实现

jQuery实现百度搜索框

前后端分离之跨域问题

2010年终总结--技术篇

可变参数宏， Variadic Macros

不用iconv函数实现UTF-8编码转换GB2312的PHP函数

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

JQuery--dom捕获html元素

jquery_126_demo

无组件上传图片到数据库中，最完整解决方案