亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

2：JS中的Ajax

XMLHttpRequest對象的屬性及簡要說明

名稱

說明

readyState

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

onreadystatechange

設(shè)置回調(diào)事件處理程序，當(dāng)readyState屬性的值改變時，會激發(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)部程序錯誤

statusText

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


readyState屬性代碼

代碼

說明

0

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

1

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

2

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

3

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

4

代表已加載狀態(tài)，此時響應(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對象 */
 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()
{
 /* 異步請求百度首頁 */

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

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

function(XMLHttpRequest) {
this;  /*這里this關(guān)鍵字用于訪問.ajax()方法的options參數(shù)對象*/
  }
complete: 請求完成后的事件，無論請求成功與否，都將觸發(fā)該事件。
function(XMLHttpRequet, textStatus) {
this; /*這里this關(guān)鍵字用于訪問.ajax()方法的options參數(shù)對象*/
  }
textStatus參數(shù)返回當(dāng)前請求的執(zhí)行狀態(tài)(succss和error等)
success: 請求執(zhí)行成功時的事件。
function(data, textStatus) {
this;  /*這里this關(guān)鍵字用于訪問.ajax()方法的options參數(shù)對象*/
  }
error: 請求執(zhí)行失敗時的事件
function(XMLHttpRequest, textStatus, errorThrown) {
this;  /*這里this關(guān)鍵字用于訪問.ajax()方法的options參數(shù)對象*/
  }
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ù)你實際情況做相應(yīng)修改 */
  var url = "http://www.sogou.com";
  $("#commentList").load(url);  //加載相應(yīng)內(nèi)容
 }); 
});

5：$.get()方法
是一個全局方法，該方法使用GET方式來進行異步請求，語法格式如下：
復(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方式請求指定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ù)庫，
     * 這里只是模擬，就靜態(tài)添加了
     */
    string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET", ".NET" };
    string[] blogTitle = { "CSS中的padding", "CSS入門", "C#中的類",
                           "C#基礎(chǔ)知識", "C#面向?qū)ο?, "C#設(shè)計模式" };

    string key = Request["key"];  //獲取請求服務(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請求一般對URL長度有一定限制，所以$.get()方法傳遞的數(shù)據(jù)長度也有一定的上限，
而$.post()方法是將參數(shù)作為消息的實體發(fā)送到服務(wù)器的，對數(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>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(){
 /* 異步請求，載入 JSON 數(shù)據(jù) */      
 $.getJSON("http://localhost:2154/Web/PeopleList.aspx",
  function(data){  
   /* 遍歷請求結(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ù)很多的問題，提供了序列化的方法簡化對表單數(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()方法
該方法將頁面表單序列化成一個JSON結(jié)構(gòu)的對象，該對象以"鍵/值"對集合的形式封裝了表單里的所有元素值。
這里注意的是該方法返回的是一個JSON對象，而不是JSON字符串
該JSON對象結(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)選項
在應(yīng)用中，經(jīng)常編寫大量的Ajax方法來實現(xiàn)各種功能，每次都在$.ajax()方法中設(shè)置大量參數(shù)，非常不方便，jQuery提供了$.ajaxSetup()方法，可以設(shè)置
全局的Ajax默認(rèn)參數(shù)項。
$.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);   //請求完成時觸發(fā)該事件
ajaxError(callback);   //請求出現(xiàn)錯誤時觸發(fā)該事件
ajaxSend(callback);  //請求發(fā)送前觸發(fā)該事件
ajaxStart(callback);  //請求開始時觸發(fā)該事件
ajaxStop(callback);  //請求結(jié)束時觸發(fā)該事件
ajaxSuccess(callback);  //請求成功時觸發(fā)該事件
ajaxStart()方法和ajaxStop方法的事件處理程序是一個無參的函數(shù)，其余都可以有3個參數(shù)，語法格式如下：
復(fù)制代碼 代碼如下:

       function(event, XHR, settings) {
               event是觸發(fā)的事件對象
               XHR是XMLHttpRequest對象
              settings是Ajax請求配置參數(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)文章

最新評論