AJAX 绠€浠婞/h1>
AJAX 鏄紑鍙戣€呯殑姊︽兂锛屽洜涓烘偍鑳藉锛欬/p>
- 涓嶅埛鏂伴〉闈㈡洿鏂扮綉椤袋/li>
- 鍦ㄩ〉闈㈠姞杞藉悗浠庢湇鍔″櫒璇锋眰鏁版嵁
- 鍦ㄩ〉闈㈠姞杞藉悗浠庢湇鍔″櫒鎺ユ敹鏁版嵁
- 鍦ㄥ悗鍙板悜鏈嶅姟鍣ㄥ彂閫佹暟鎹?/li>
AJAX 瀹炰緥瑙ｉ噴
HTML 椤甸潰
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>璁 AJAX 鏇存敼杩欐鏂囨湰</h2>
<button type="button" onclick="loadDoc()">鏇存敼鏂囨湰</button>
</div>
</body>
</html>
杩欏紶 HTML 椤甸潰鍖呭惈涓€涓 <div> 鍜屼竴涓 <button>銆侟/p>
<div> 鐢ㄤ簬鏄剧ず鏉ヨ嚜鏈嶅姟鍣ㄧ殑淇℃伅銆侟/p>
<button> 璋冪敤鍑芥暟锛堝綋瀹冭鐐瑰嚮锛夈€侟/p>
璇ュ嚱鏁颁粠 web 鏈嶅姟鍣ㄨ姹傛暟鎹苟鏄剧ず瀹冿細
Function loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
浠€涔堟槸 AJAX锛烖/h2>
AJAX = Asynchronous JavaScript And XML.
AJAX 骞堕潪缂栫▼璇█銆侟/p>
AJAX 浠呬粎缁勫悎浜嗭細
- 娴忚鍣ㄥ唴寤虹殑 XMLHttpRequest 瀵硅薄锛堜粠 web 鏈嶅姟鍣ㄨ姹傛暟鎹級
- JavaScript 鍜 HTML DOM锛堟樉绀烘垨浣跨敤鏁版嵁锛堻/li>
Ajax 鏄竴涓护浜鸿瀵肩殑鍚嶇О銆侫jax 搴旂敤绋嬪簭鍙兘浣跨敤 XML 鏉ヤ紶杈撴暟鎹紝浣嗗皢鏁版嵁浣滀负绾枃鏈垨 JSON 鏂囨湰浼犺緭涔熷悓鏍峰父瑙併€侟/p>
Ajax 鍏佽閫氳繃涓庡満鏅悗闈㈢殑 Web 鏈嶅姟鍣ㄤ氦鎹㈡暟鎹潵寮傛鏇存柊缃戦〉銆傝繖鎰忓懗鐫€鍙互鏇存柊缃戦〉鐨勯儴鍒嗭紝鑰屼笉闇€瑕侀噸鏂板姞杞芥暣涓〉闈€侟/p>
AJAX 濡備綍宸ヤ綔
- 缃戦〉涓彂鐢熶竴涓簨浠讹紙椤甸潰鍔犺浇銆佹寜閽偣鍑伙級
- 鐢 JavaScript 鍒涘缓 XMLHttpRequest 瀵硅薄
- XMLHttpRequest 瀵硅薄鍚 web 鏈嶅姟鍣ㄥ彂閫佽姹侟/li>
- 鏈嶅姟鍣ㄥ鐞嗚璇锋眰
- 鏈嶅姟鍣ㄥ皢鍝嶅簲鍙戦€佸洖缃戦〉
- 鐢 JavaScript 璇诲彇鍝嶅簲
- 鐢 JavaScript 鎵ц姝ｇ‘鐨勫姩浣滐紙姣斿鏇存柊椤甸潰锛堻/li>
AJAX 鏄紑鍙戣€呯殑姊︽兂锛屽洜涓烘偍鑳藉锛欬/p>
- 涓嶅埛鏂伴〉闈㈡洿鏂扮綉椤袋/li>
- 鍦ㄩ〉闈㈠姞杞藉悗浠庢湇鍔″櫒璇锋眰鏁版嵁
- 鍦ㄩ〉闈㈠姞杞藉悗浠庢湇鍔″櫒鎺ユ敹鏁版嵁
- 鍦ㄥ悗鍙板悜鏈嶅姟鍣ㄥ彂閫佹暟鎹?/li>
AJAX 瀹炰緥瑙ｉ噴
HTML 椤甸潰
<!DOCTYPE html> <html> <body> <div id="demo"> <h2>璁 AJAX 鏇存敼杩欐鏂囨湰</h2> <button type="button" onclick="loadDoc()">鏇存敼鏂囨湰</button> </div> </body> </html>
杩欏紶 HTML 椤甸潰鍖呭惈涓€涓 <div> 鍜屼竴涓 <button>銆侟/p>
<div> 鐢ㄤ簬鏄剧ず鏉ヨ嚜鏈嶅姟鍣ㄧ殑淇℃伅銆侟/p>
<button> 璋冪敤鍑芥暟锛堝綋瀹冭鐐瑰嚮锛夈€侟/p>
璇ュ嚱鏁颁粠 web 鏈嶅姟鍣ㄨ姹傛暟鎹苟鏄剧ず瀹冿細
Function loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
浠€涔堟槸 AJAX锛烖/h2>
AJAX = Asynchronous JavaScript And XML.
AJAX 骞堕潪缂栫▼璇█銆侟/p>
AJAX 浠呬粎缁勫悎浜嗭細
- 娴忚鍣ㄥ唴寤虹殑 XMLHttpRequest 瀵硅薄锛堜粠 web 鏈嶅姟鍣ㄨ姹傛暟鎹級
- JavaScript 鍜 HTML DOM锛堟樉绀烘垨浣跨敤鏁版嵁锛堻/li>
Ajax 鏄竴涓护浜鸿瀵肩殑鍚嶇О銆侫jax 搴旂敤绋嬪簭鍙兘浣跨敤 XML 鏉ヤ紶杈撴暟鎹紝浣嗗皢鏁版嵁浣滀负绾枃鏈垨 JSON 鏂囨湰浼犺緭涔熷悓鏍峰父瑙併€侟/p>
Ajax 鍏佽閫氳繃涓庡満鏅悗闈㈢殑 Web 鏈嶅姟鍣ㄤ氦鎹㈡暟鎹潵寮傛鏇存柊缃戦〉銆傝繖鎰忓懗鐫€鍙互鏇存柊缃戦〉鐨勯儴鍒嗭紝鑰屼笉闇€瑕侀噸鏂板姞杞芥暣涓〉闈€侟/p>
AJAX 濡備綍宸ヤ綔
- 缃戦〉涓彂鐢熶竴涓簨浠讹紙椤甸潰鍔犺浇銆佹寜閽偣鍑伙級
- 鐢 JavaScript 鍒涘缓 XMLHttpRequest 瀵硅薄
- XMLHttpRequest 瀵硅薄鍚 web 鏈嶅姟鍣ㄥ彂閫佽姹侟/li>
- 鏈嶅姟鍣ㄥ鐞嗚璇锋眰
- 鏈嶅姟鍣ㄥ皢鍝嶅簲鍙戦€佸洖缃戦〉
- 鐢 JavaScript 璇诲彇鍝嶅簲
- 鐢 JavaScript 鎵ц姝ｇ‘鐨勫姩浣滐紙姣斿鏇存柊椤甸潰锛堻/li>