<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax-javascript寫法</title>
<script src="../js/jquery-3.1.1.min.js"></script>
</head>
<body>
顯示通過ajax獲取的內容：<div id="one"></div>
顯示通過ajax獲取xml的內容：<div id="xml"></div>
顯示通過ajax獲取json的內容：<div id="json"></div>
<button onclick="get()">獲取文本格式的ajax</button>
<button onclick="getXml()">獲取xml文本格式的ajax</button>
<button onclick="getJson()">獲取xml文本格式的json</button>
<script>
//獲取ajax文本內容的方法
function get() {
//創建和后端數據交互的XML對象
var xml=new XMLHttpRequest();
//第一個參數是提交方式，get/post兩者，大小寫均可；
xml.open("GET","http://localhost:8080/jquery/servlet/MyServlet",true);
//響應后台數據的回調函數
xml.onreadystatechange=function () {
/*
status有兩個值
200:表示連接到了服務器
404表示沒有連接到
*/
console.log("判斷是否連接到服務器"+xml.status);
console.log("判斷是否處理了請求"+xml.readyState);
/*
0:請求未初始化
1：服務器連接已經建立
2：請求已經接收
3：請求處理中
4：請求完成，響應就緒
*/
if(xml.status==200&&xml.readyState==4){
//獲取文本格式的數據
var is = xml.responseText;
document.getElementById("one").innerHTML=is;
}
}
//發送請求的方法
xml.send();
}
function getXml() {
//創建和后端數據交互的XML對象
var xml=new XMLHttpRequest();
//第一個參數是提交方式，get/post兩者，大小寫均可；
xml.open("GET","1.xml",true);
//響應后台數據的回調函數
xml.onreadystatechange=function () {
/*
status有兩個值
200:表示連接到了服務器
404表示沒有連接到
*/
console.log("判斷是否連接到服務器"+xml.status);
console.log("判斷是否處理了請求"+xml.readyState);
/*
0:請求未初始化
1：服務器連接已經建立
2：請求已經接收
3：請求處理中
4：請求完成，響應就緒
*/
if(xml.status==200&&xml.readyState==4){
//獲取XML文本格式的數據
var is = xml.responseXML;
//獲取長度
var length = is.documentElement.getElementsByTagName("node").length;
for(var i=0;i<length;i++){
var name = is.documentElement.getElementsByTagName("name")[i].childNodes[0].nodeValue;
var age = is.documentElement.getElementsByTagName("age")[i].childNodes[0].nodeValue;
// console.log(name);
var id= is.documentElement.getElementsByTagName("name")[0].getAttributeNode("id").value;
console.log(id);
document.getElementById("xml").innerHTML +="name is:"+name+"age is:"+age;
}
}
}
//發送請求的方法
xml.send();
}
function getJson() {
//創建和后端數據交互的XML對象
var xml=new XMLHttpRequest();
//第一個參數是提交方式，get/post兩者，大小寫均可；
xml.open("GET","1.json",true);
//響應后台數據的回調函數
xml.onreadystatechange=function () {
/*
status有兩個值
200:表示連接到了服務器
404表示沒有連接到
*/
console.log("判斷是否連接到服務器"+xml.status);
console.log("判斷是否處理了請求"+xml.readyState);
/*
0:請求未初始化
1：服務器連接已經建立
2：請求已經接收
3：請求處理中
4：請求完成，響應就緒
*/
if(xml.status==200&&xml.readyState==4){
//獲取json格式
var json = xml.response;
//轉換json格式
var is = eval(json);//去掉引號
console.log(is);
for (var i=0;i<is.length;i++){
document.getElementById("json").innerHTML += "name:"+is[i].name+"age:"+is[i].age+"address:"+is[i].address;
}
}
}
//發送請求的方法
xml.send();
}
</script>
</body>
</html>
