jQuery之ajax技術的詳細介紹_jquery

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	代表已加载状态，此时响应内容已完全被接收

複製代碼代碼如下：

UBL "-/ DTD XHTML 1.0 過渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Ajax


head>

;


<br><div id="瀏覽器"></div>

< ;/body>

ajax.js的內容：複製程式碼

程式碼如下：


var xmlRequest

var xmlRequest{
 /*建立XMLHttpRequest物件*/
 if( window.ActiveXObject)
 {
  return new ActiveXObject(".XML]; > else if(window.XMLHttpRequest)
 {
  return new XMLHttpRequest();
 }
}
Statefunction ResponseHandler() {
  /* 如果通訊成功，且回應正常，執行以下操作*/

  var reqContent = xmlRequest.responseText;
  var reqContent = xmlRequest.responseText;
  var reqContent = xmlRequest.responseText;  document.getElementById("content"). value = reqContent;
 }
}
function AjaxAccess()
{
 xmlRequest = CreateRequest();  //建立XMLHttpRequest物件
 xmlRequest.onreadystatechange = ResponseHandler;  //設定回調函數
://www.baidu.com");  //初始化請求物件
 xmlRequest.send(null);   //傳送請求資訊

 /* 觸發事件後續提示正在開啟百度首頁*/
 var brow = document.getElementById("browser");
 brow.innerHTML = "

;正在開啟百度搜尋

";
}
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訊息，包含的標籤(腳本標籤或樣式標籤)會在

文字插入DOM的時候執行、 script：傳回純文字JS程式碼、json、jsonp、text contentType:發送訊息至伺服器時內容編碼類型，此屬性為字串類型，預設值為"application/x-www-form-urlencoded"，一般不用設置，因為預設值適合大多數應用場合beforeSend: 請求發送前的事件，該屬性介面設定事件處理程序，可用於發送前修改XMLHttpRequest的參數，如頭資訊。

複製程式碼 程式碼如下：

function(XMLHttpRequest) {
this;  /*這裡this關鍵字用於訪問.ajax()方法的options參數物件*/
  }
complete:  }

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',       $ ("#browser").html(reqContent);
       $("#content").text(reqContent);
      } h1>正在開啟搜狗搜尋");
 });
});

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

複製程式碼複製程式碼

程式碼>

鍥炶