因為Ajax的定義如下：
需要使用到伺服器端，是以，建立一個web項目
建立一個files檔案夾：
在index.jsp中添加如下代碼：
<body>
<button id="button">點選測試ajax</button><b id="b"></b>
</body> 在添加Ajax代碼：
<script type="text/javascript">
window.onload = function() {
var butn = document.getElementById("button");
butn.onclick = function() {
var request = new XMLHttpRequest();
var method="GET";
var url="files/getreturn.html";
request.open(method, url);
request.send(null);
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200)
document.getElementById("b").innerHTML = request.responseText;
}
}
}
</script> 在files檔案夾中建立一個HTML檔案，在裡面寫入如下代碼：
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
這是GET傳回的資訊。 2.第一個例子到這裡就寫完了，使用Ajax調用HTML中的資料，但是現在還不能看到效果，需要把項目添加到伺服器中
在圖中，并沒有我們的項目，是以需要把項目加入到伺服器中：
加入我們的項目後，啟動伺服器：
啟動：
在浏覽器檢視效果：
在浏覽器輸入：http://localhost:8080/test
點選按鈕：
發現url沒有改變，也就是說頁面沒有重新整理，但是在button後面卻重新整理了一部分，這就是Ajax的方法，實作局部重新整理
3.Ajax調用js檔案中的資料：
在files檔案夾下建立一個js檔案，寫入如下代碼：
{"person":{
"name":"bill",
"value":"how are you"
}
} 儲存之後發現有錯，解決方法：
選中js檔案，右鍵->MyEclipse->Exclude From Validation,等下就OK了
在js檔案中寫入如下代碼：
{"person":{
"name":"bill",
"value":"how are you"
}
} 在index.jsp中寫下如下代碼：
<body>
<button id="button">點選測試ajax</button><b id="b"></b><br>
<button id="button" οnclick="clk()">點選測試ajax與js</button><b id = "b1"></b>
</body> 在index.jsp中添加代碼：
function clk(){
var reqst = new XMLHttpRequest();
var method = "GET";
var url = "files/myjs.js";
reqst.open(method, url);
reqst.send(null);
reqst.onreadystatechange = function() {
if(reqst.readyState == 4 && reqst.status == 200)
{
var result = reqst.responseText;
var obj = eval（"(" + result + ")");
document.getElementById("b1").innerHTML ="name:" + obj.person.name + " value:" +obj.person.value;
}
}
} 4.OK，在浏覽器上重新整理界面：
點選第二個button：
兩個button都進行測試：
5.現在該寫Ajax在XML中擷取資料：
在files檔案夾下建立XML檔案：
寫入如下代碼：
<?xml version="1.0" encoding="UTF-8"?>
<details>
<name>Jeremy Keith</name>
<value>你好啊</value>
</details> 在index.jsp中添加如下代碼：
<button οnclick="ckk()">點選測試ajax與xml</button><b id = "b2"></b> 在index.jsp中添加如下代碼：
function ckk(){
var request = new XMLHttpRequest();
var method = "GET";
var url = "files/MyXml.xml";
request.open(method, url);
request.send(null);
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200){
var result = request.responseXML;
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var v = result.getElementsByTagName("value")[0].firstChild.nodeValue;
document.getElementById("b2").innerHTML = "name:"+name+" value:"+v;
}
}
} 6.現在來進行測試：
點選點三個button：
點選三個button：
至此，這個小項目就完成了，