Ajax知識總結

時間 2019-11-09

標籤 ajax 知識總結欄目 Ajax 简体版

原文原文鏈接

Ajax的目的就是讓頁面「自動」的與後臺實現交互。

一、全部的現代瀏覽器均支持XMLHttpRequest對象。建立XMLHttpRequest用

var xmlRequest=new XMLHttpRequest();

二、服務器請求：

GET請求：

xmlRequest.open("GET","1.servlet",true);

xmlRequest.send();

方法描述

open(method,url,async)

規定請求的類型、URL 以及是否異步處理請求。javascript

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）

send(string)

將請求發送到服務器。html

string：僅用於 POST 請求

POST請求：

xmlRequest.open("post","1.servlet",true);

xmlhttp.setRequestHeader("Content-type"."application/***")

xmlhttp.send("hello");

方法	描述
setRequestHeader(header,value)	向請求添加 HTTP 頭。java header: 規定頭的名稱

方法

描述

setRequestHeader(header,value)

向請求添加 HTTP 頭。java

header: 規定頭的名稱

XMLHttpRequest 對象若是要用於 AJAX 的話，其 open() 方法的 async 參數必須設置爲 true：

當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數：

例子：

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">經過 AJAX 改變內容</button>

</body>
</html>

三、服務器的響應：

屬性描述


responseText	得到字符串形式的響應數據。
responseXML	得到 XML 形式的響應數據。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

四、 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。ajax 0: 請求未初始化 1: 服務器鏈接已創建 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK"瀏覽器 404: 未找到頁面

屬性

描述

onreadystatechange

存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

readyState

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。ajax

0: 請求未初始化
1: 服務器鏈接已創建
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

status

200: "OK"瀏覽器

404: 未找到頁面

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">經過 AJAX 改變內容</button>

</body>
</html>

或者，多個myFunction()時應該這樣作

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">經過 AJAX 改變內容</button>

</body>
</html>

jQuery中的Ajax：

從上面能夠看出，Ajax只須要了解瀏覽器與服務器的GET、POST請求，接收服務器的返回消息responseText和responseXML，以及在接收到消息後須要作什麼事情readystateonchange既能夠了。這些在加jQuery中也有很好的支持。

這是jQuery的語法，只須要這麼一句話就完成了上面的請求，接收消息以及接收消息後作什麼事情。

$( selector).load( URL, data, callback);

必需的 URL 參數規定您但願加載的 URL。服務器

可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。app

可選的 callback 參數是 load() 方法完成後所執行的函數名稱。

例子:

這是示例文件（"demo_test.txt"）的內容：異步

<h2>jQuery and AJAX is FUN!!!</h2>

<p id="p1">This is some text in a paragraph.</p>

$("#div1").load("demo_test.txt");//執行後會將demo_test.txt的內容寫到class爲div1的div中

也能夠把 jQuery 選擇器添加到 URL 參數。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中：

$("#div1").load("demo_test.txt #p1");

可選的 callback 參數規定當 load() 方法完成後所要容許的回調函數。回調函數能夠設置不一樣的參數：async

responseTxt - 包含調用成功時的結果內容
statusTXT - 包含調用的狀態
xhr - 包含 XMLHttpRequest 對象

下面的例子會在 load() 方法完成後顯示一個提示框。若是 load() 方法已成功，則顯示「外部內容加載成功！」，而若是失敗，則顯示錯誤消息：

$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部內容加載成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});

});

但有時候咱們也須要向Ajax中同樣對服務器作GET或者是POST請求，此時就需用jQuery的下面方法了。

$.get( URL, callback);

必需的 URL 參數規定您但願請求的 URL。

可選的 callback 參數是請求成功後所執行的函數名。第一個回調參數是服務器返回的內容，第二個回調參數是請求的狀態碼。

$.post( URL, data, callback);

必需的 URL 參數規定您但願請求的 URL。函數

可選的 data 參數規定連同請求發送的數據。

可選的 callback 參數是請求成功後所執行的函數名。第一個回調參數是服務器返回的內容，第二個回調參數是請求的狀態碼。