JavaWeb筆記-23-ajax傳送請求的三則示例（傳送get、傳送post、響應xml、）
阿新 • • 發佈：2018-11-03
一、傳送get請求案例
<script type="text/javascript">
//建立XMLHttpRequest物件的函式
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch(e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return 二、傳送POST請求
應用：如果傳送請求時需要帶有引數，一般都用POST請求
1）open: 開啟與伺服器的連線
xmlHttp.open("POST","URL",是否非同步)
2）設定Content-Type請求頭：
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
3）send: 傳送請求時指定請求體
xmlHttp.send("username=zhangSan&password=123");
三、響應內容為xml資料案例
響應內容為xml資料
伺服器端：
設定響應頭：ContentType，其值為：text/xml;charset=utf-8
客戶端：
var doc = xmlHttp.responseXML;//得到的是Document物件！
window.onload = function() {//文件載入完畢後執行
var btn = document.getElementById("btn");
btn.onclick = function() {//給按鈕的點選事件註冊監聽
/*
ajax四步操作，得到伺服器的響應
把響應結果顯示到h1元素中
*/
/*
1. 得到非同步物件
*/
var xmlHttp = createXMLHttpRequest();
/*
2. 開啟與伺服器的連線
* 指定請求方式
* 指定請求的URL
* 指定是否為非同步請求
*/
xmlHttp.open("GET", "<c:url value='/BServlet'/>", true);
/*
3. 傳送請求
*/
xmlHttp.send(null);//GET請求沒有請求體，但也要給出null，不然FireFox可能會不能傳送！
/*
4. 給非同步物件的onreadystatechange事件註冊監聽器
*/
xmlHttp.onreadystatechange = function() {//當xmlHttp的狀態發生變化時執行
// 雙重判斷：xmlHttp的狀態為4（伺服器響應結束），以及伺服器響應的狀態碼為200（響應成功）
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// 獲取伺服器的響應結果（xml）
var doc = xmlHttp.responseXML;
// 查詢文件下名為student的所有元素，得到陣列，再取下標0元素
var ele = doc.getElementsByTagName("student")[0];
var number = ele.getAttribute("number");//獲取元素名為number的屬性值
var name;
var age;
var sex;
//獲取元素內容
// 處理瀏覽器的差異
if(window.addEventListener) {
name = ele.getElementsByTagName("name")[0].textContent;//其他瀏覽器
} else {
name = ele.getElementsByTagName("name")[0].text;//IE支援
}
if(window.addEventListener) {
age = ele.getElementsByTagName("age")[0].textContent;//其他瀏覽器
} else {
age = ele.getElementsByTagName("age")[0].text;//IE支援
}
if(window.addEventListener) {
sex = ele.getElementsByTagName("sex")[0].textContent;//其他瀏覽器
} else {
sex = ele.getElementsByTagName("sex")[0].text;//IE支援
}
var text = number + ", " + name + ", " + age + ", " + sex;
document.getElementById("h1").innerHTML = text;
}
};
};
};
//servlet程式碼
public class BServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String xml = "<students>" +
"<student number='ITCAST_1001'>" +
"<name>zhangSan</name>" +
"<age>18</age>" +
"<sex>male</sex>" +
"</student>" +
"</students>";
response.setContentType("text/xml;charset=utf-8");
response.getWriter().print(xml);
}
}