標籤：src XML 套件 .com 資料交換 建立 改變 簡化 http get
什麼是 AJAX ？
AJAX = 非同步 JavaScript 和 XML。
AJAX 是一種用於建立快速動態網頁的技術。
通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
有很多使用 AJAX 的應用程式案例：新浪微博、Google 地圖、開心網等等。
ajax代碼講解（html分頁檔）：
<!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>
<title>lkyAjax</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tj").click(function () {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); //建立XMLHttpRequest對象；
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () { //onreadystatechage函數，每當readyState屬性改變時改變時就會調用該函數。
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //readyState=0時：請求未初始化；=1時：伺服器串連已建立；
//=2時：請求已接受；=3時：請求處理中；=4時：請求已完成，且響應已就緒；
//status=400時ok；=404時未找到頁面；
$("#showName").val(xmlhttp.responseText); //responseText獲得字串形式的響應資料。。還有一種響應形式responseXML返回的是xml
}
}
xmlhttp.open("GET", "0000.ashx?actionS=Ajax", false); //如果傳入參數為中文必須使用encodeURI（“中國”）不然會出現亂碼。。
//opwn(method,url,async);method為：get或post；url為處理頁面的url；async為true或false：true代表非同步執行；false代表同步執行；
xmlhttp.send(); //send（string）將請求發向伺服器、、string僅限於post請求；
});
});
//Jqurey簡化後
$(function () {
$("#JAtj").click(function () {
htmlvar = $.ajax({ url: "0000.ashx?actionS=Jquery", async: true });
// $("#Text1").val(htmlvar.responseText);
$("#myDiv").load("0000.ashx?actionS=Jqueryd&&d=" + Math.random());
});
});
</script>
</head>
<body>
<div id="myDiv"></div>
<input type="text" id="showName"/>
<input type="text" id="Text1"/>
<input type="submit" value=" 點我下 " id="tj"/>
<input type="submit" value=" JqueryAjax盡情點吧 " id="JAtj"/>
</body>
</html>
note：
1.與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
2.不推薦使用 async=false，但是對於一些小型的請求，也是可以的。
請記住，JavaScript 會等到伺服器響應就緒才繼續執行。如果伺服器繁忙或緩慢，應用程式會掛起或停止。
注釋：當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面即可：
xmlhttp.open("GET","test1.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
一般處理常式分頁檔
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Ajax大練兵{ /// <summary> /// _0000 的摘要說明 /// </summary> public class _0000 : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string name = context.Request["actionS"]; //擷取參數值 context.Response.Write("我叫：" + name); //處理後寫入頁面 context.Response.End(); } public bool IsReusable { get { return false; } } }}
jQuery Ajax 操作函數
jQuery 庫擁有完整的 Ajax 相容套件。其中的函數和方法允許我們在不重新整理瀏覽器的情況下從伺服器載入資料。
| 函數 | 描述 |
|---|---|
| jQuery.ajax() | 執行非同步 HTTP (Ajax) 請求。 |
| .ajaxComplete() | 當 Ajax 請求完成時註冊要調用的處理常式。這是一個 Ajax 事件。 |
| .ajaxError() | 當 Ajax 請求完成且出現錯誤時註冊要調用的處理常式。這是一個 Ajax 事件。 |
| .ajaxSend() | 在 Ajax 請求發送之前顯示一條訊息。 |
| jQuery.ajaxSetup() | 設定將來的 Ajax 請求的預設值。 |
| .ajaxStart() | 當首個 Ajax 請求完成開始時註冊要調用的處理常式。這是一個 Ajax 事件。 |
| .ajaxStop() | 當所有 Ajax 請求完成時註冊要調用的處理常式。這是一個 Ajax 事件。 |
| .ajaxSuccess() | 當 Ajax 請求成功完成時顯示一條訊息。 |
| jQuery.get() | 使用 HTTP GET 請求從伺服器載入資料。 |
| jQuery.getJSON() | 使用 HTTP GET 請求從伺服器載入 JSON 編碼資料。 |
| jQuery.getScript() | 使用 HTTP GET 請求從伺服器載入 JavaScript 檔案，然後執行該檔案。 |
| .load() | 從伺服器載入資料，然後把返回到 HTML 放入匹配元素。 |
| jQuery.param() | 建立數組或對象的序列化表示，適合在 URL 查詢字串或 Ajax 請求中使用。 |
| jQuery.post() | 使用 HTTP POST 請求從伺服器載入資料。 |
| .serialize() | 將表單內容序列化為字串。 |
| .serializeArray() | 序列化表單元素，返回 JSON 資料結構資料。 |
Ajax 學習筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
