ajax http請求如何使用？ ajax如何請求伺服器？ （附實例解析）
- 寻∝梦原創
- 2018-09-10 11:21:322514瀏覽
本篇文章主要的講述了關於ajax的基礎知識，ajax的歷史情況介紹，還有ajax的基礎使用情況，現在讓我們一起來看這篇文章吧
AJAX 基礎
AJAX 指非同步JavaScript 及XML （Asynchronous JavaScript And XML ）。
AJAX 是一種在 2005 年由 Google 推廣開來的程式設計模式。
AJAX 不是一種新的程式語言，而是一種使用現有標準的新方法。
透過 AJAX ，你可以創建更好、更快、更友善的 WEB 應用程式。
AJAX 是基於 JavaScript 和 HTTP 請求（HTTP requests ）。
AJAX 簡介
AJAX 指非同步 JavaScript 及 XML （Asynchronous JavaScript And XML ）。
您應該具備的基礎知識
在繼續學習之前，您需要對下面的知識有基本的了解：
* HTML / XHTML
* JavaScript
如果您希望先學習這些項目，請在我們的首頁訪問這些教程。
AJAX = 非同步 JavaScript 和 XML （ Asynchronous JavaScript and XML ）
AJAX 不是一種新的程式語言，而是一種用於創建更好更快以及互動性更強的 Web 應用程式的技術。
透過 AJAX ，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 物件來直接與伺服器進行通訊。透過這個
對象，您的 JavaScript Web 伺服器交換資料。可在不重載頁面的情況與
AJAX 在瀏覽器與 Web 伺服器之間使用非同步資料傳輸（HTTP 請求），這樣就可使網頁從伺服器請求少量的信息，而
不是整個頁面。
AJAX 可使網際網路應用程式更小、更快，更友善。
AJAX 是一種獨立於 Web 伺服器軟體的瀏覽器技術。
AJAX 基於Web 標準
AJAX 基於下列Web 標準：
* JavaScript
* XML
* HTML
* CSS
在AJAX 中使用良好的Web 標準標準定義，並由所有的主流瀏覽器支援。 AJAX 應用程式獨立於瀏覽器和平台。
AJAX 事關更優秀的應用程式
Web 應用程式較桌面應用程式有許多優點；它們能夠涉及廣大的用戶，它們更易於安裝和維護，也更容易開發。
不過，因特網應用程式並不像傳統的桌面應用程式那樣完善且友好。
透過 AJAX ，因特網應用程式可以變得更完善，更友善。 （想看更多就到PHP中文網AJAX開發手冊欄位學習）
AJAX Http 請求
A JAX 使用Http 請求
在傳統的JavaScript 程式設計中，假如您希望從伺服器上的檔案或資料庫中得到任何的信息，或者向伺服器發送訊息
的話，就必須利用一個HTML 表單向伺服器GET 或POST 資料。而使用者則需要點選「 提交」 按鈕來傳送/ 取得信件
息，等待伺服器的回應，然後一張新的頁面會載入結果。
由於每當使用者提交輸入後伺服器都會返回一張新的頁面，傳統的 web 應用程式變得運行緩慢，且越來越不友善。
透過利用 AJAX ，您的 JavaScript 會透過 JavaScript 的 XMLHttpRequest 對象，直接與伺服器來通訊。
透過使用 HTTP 請求，web 頁可向伺服器進行請求，並得到來自伺服器的回應，而不載入頁面。使用者可以停留在同
一個頁面，他或她不會注意到腳本在後台請求過頁面，或向伺服器發送過資料。
XMLHttpRequest 物件
透過使用 XMLHttpRequest 對象，web 開發者可以做到在頁面已載入後從伺服器更新頁面！
在 2005 年 AJAX 被 Google 推廣開來（Google Suggest ）。
Google 建議使用XMLHttpRequest 物件來建立一種動態性極強的web 介面：當您開始在Google 的搜尋方塊中輸入
查詢時，JavaScript 會向某個伺服器發出這些字詞，然後伺服器會傳回一系列的搜尋建議。
XMLHttpRequest 物件獲得下列瀏覽器的支援：Internet Explorer 5.0 、Safari 1.2 、Mozilla 1.0 / Firefox、Opera 8 以及 Netscape 7 。
您的第一個 AJAX 應用程式
為了讓您理解 AJAX 的工作原理，我們將建立一個小型的 AJAX 應用程式。
首先，我們需要一個帶有兩個文字方塊的 HTML 表單：使用者名稱和時間。使用者名稱文字方塊由使用者填寫，而時間文字方塊則使用
AJAX 進行填寫。
此 HTML 檔案名稱為 "testAjax.htm" （請注意這個 HTML 表單沒有提交按鈕！）：
<html> <body> <form name="myForm"> 用户: <input type="text" name="username" /> 时间: <input type="text" name="time" /> </form> </body> </html>
AJAX 瀏覽器支援
AJAX - 瀏覽器支援
AJAX 的要點是 XMLHttpRequest 物件。
不同的瀏覽器建立 XMLHttpRequest 物件的方法是有差異的。
IE 瀏覽器使用 ActiveXObject ，而其他的瀏覽器則使用名為 XMLHttpRequest 的 JavaScript 內建物件。
如需針對不同的瀏覽器來建立此對象，我們要使用一條 "try and catch" 語句。您可以在我們的 JavaScript 教學
中閱讀更多有關 try 和 catch 語句 的內容。
讓我們用這段建立XMLHttpRequest 物件的JavaScript 來更新一下我們的"testAjax.htm" 檔案：
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
return false;
}
}
}
}
</script>
<form name="myForm">
用户: <input type="text" name="username" />
时间: <input type="text" name="time" />
</form></body>
</html>範例解釋：
首先聲明一個保存XMLHttpRequest 物件的xmlHttp 變數。
然後使用 XMLHttp=new XMLHttpRequest() 來建立此物件。這條語句針對 Firefox 、Opera 以及 Safari 瀏覽器。
假如失敗，則嘗試針對Internet Explorer 6.0 的xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") ，假如也不
成功，則嘗試針對Internet Explorer 5.5 的xmlHttp=new ActiveXObject("Microsoft.XMLHTTP" ) 。
假如這三種方法都不起作用，那麼這個用戶所使用的瀏覽器已經太過時了，他或她會看到一個聲明此瀏覽器不支援
AJAX 的提示。
註解：上面這些瀏覽器客製的程式碼很長，而且很複雜。不過，每當您希望建立 XMLHttpRequest 物件時，這些程式碼就會派上用場，因此您可以在任何需要使用的時間拷貝貼上這些程式碼。上面這些程式碼相容於所有的主流瀏覽器：
Internet Explorer 、Opera 、Firefox 以及 Safari 。
AJAX - XMLHttpRequest 物件AJAX - 更多有關 XMLHttpRequest 物件的知識
在向伺服器發送資料之前，我們有必要解釋一下 XMLHttpRequest 物件的三個重要的屬性。
onreadystatechange 屬性
onreadystatechange 屬性存有處理伺服器回應的函數。下面的程式碼定義一個空的函數，可同時對
onreadystatechange 屬性進行設定：
xmlHttp.onreadystatechange=function()
{
// 我們需要在這裡寫一些程式碼
}
readyState 屬性
readyState 屬性存有伺服器回應的狀態資訊。每當 readyState 改變時，onreadystatechange 函數就會被執行。
這是readyState 屬性可能的值：
狀態描述
0
請求未初始化（在呼叫open() 之前）
1
請求已提出（呼叫send() 之前）
2
請求已發送（這裡通常可以從回應得到內容頭部）
3
請求處理中（回應中通常有部分資料可用，但是伺服器還沒有完成回應）
4
請求已完成（可以存取伺服器回應並使用它）
我們要為這個onreadystatechange 函數新增一個If 語句，來測試我們的回應是否已完成（表示可取得資料）
：
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
//從伺服器的res {
//從伺服器的res #}
responseText 屬性
可以透過responseText 屬性來取回由伺服器傳回的資料。
在我們的程式碼中，我們將把時間文字方塊的值設為等於responseText ：
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
AJAX - 請求伺服器
##AJAX }}
#要想把請求傳送到伺服器，我們就需要使用open() 方法和send() 方法。
open() 方法需要三個參數。第一個參數定義發送請求所使用的方法（GET 還是 POST ）。第二個參數規定伺服器端
腳本的 URL 。第三個參數規定應對請求進行非同步地處理。
send() 方法可將請求送到伺服器。如果我們假設HTML 檔案和ASP 檔案位於相同的目錄，那麼程式碼是這樣的：
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
現在，我們必須決定何時執行AJAX 函數。當使用者在使用者名稱文字方塊中鍵入某些內容時，我們會令函數「 在幕後」
執行。
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();"/>
时间: <input type="text" name="time" />
</form>
</body>
</html>
AJAX - 伺服器端的腳本現在，我們要建立可顯示目前伺服器時間的腳本。
responseText 屬性會儲存從伺服器傳回的資料。在這裡，我們希望傳回目前的時間。這是 "time.asp" 的程式碼：
#
<%response.expires=-1 response.write(time)%>
注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被
缓存。
运行您的 AJAX 应用程序
请在下面的文本框中键入一些文本，然后单击时间文本框：
用户 : 时间 :
时间文本框可在不加载页面的情况下从 "time.asp" 获得服务器的时间！
本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。
以上是ajax http請求如何使用？ ajax如何請求伺服器？ （附實例解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！