Technorati 標籤: ajax
一、Ajax 簡介
Ajax = 異步的 javascript 和 xml;
Ajax是一種用於快速創建動態網頁的技術。原理圖如下:
二、Demo
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <title>ajax</title>
6: <script type="text/javascript">
7:
8:
9: function loadDoc() {
10: var xmlhttp;
11: if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
12: xmlhttp = new XMLHttpRequest();
13: } else {// code for IE6, IE5
14: xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
15: }
16: xmlhttp.onreadystatechange = function() {
17: if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
18: document.getElementById("text").innerHTML = xmlhttp.responseText;
19: }
20: }
21: xmlhttp.open("get", "/ajaxTest/text.txt", true);
22: xmlhttp.send();
23: }
24:
25: </script>
26: </head>
27:
28: <body>
29: <div id="text">Ajax can change these text<
30: <button onclick="loadDoc()" value="change">change</button>
31: </body>
32: </html>
33:
34: //text.txt 內容可以自己隨意編寫,只需保證其在路徑下就行了。