文章目錄
- 一、關于Ajax
-
- 1.1 概述
- 1.2 全局重新整理與異步重新整理
- 二、XMLHttpRequest對象
-
- 2.1 XMLHttpRequest中的相關方法與屬性
- 2.2 XMLHttpRequest使用步驟
- 三、Ajax案例
-
- 3.1 計算bmi值
一、關于Ajax
1.1 概述
ajax:Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
- ajax是用來做局部重新整理的。局部重新整理使用的核心對象是異步對象（XMLHttpRequest）這個異步對象是存在浏覽器記憶體中的 ，使用javascript文法建立和使用XMLHttpRequest對象。
1.2 全局重新整理與異步重新整理
- 全局重新整理： 整個浏覽器被新的資料覆寫。 在網絡中傳輸大量的資料。 浏覽器需要加載，渲染頁面。
- 局部重新整理：在浏覽器器的内部，發起請求，擷取資料，改變頁面中的部分内容。其餘的頁面無需加載和渲染。 網絡中資料傳輸量少， 給使用者的感受好。
- ajax是一種做局部重新整理的新方法（2003左右），不是一種語言。 ajax包含的技術主要有javascript,dom,css, xml等等。核心是javascript 和 xml
javascript：負責建立異步對象， 發送請求， 更新頁面的dom對象。 ajax請求需要伺服器端的資料。
xml： 網絡中的傳輸的資料格式。 使用json替換了xml
二、XMLHttpRequest對象
2.1 XMLHttpRequest中的相關方法與屬性
- 常用方法
| 方法名 | 說明 |
|---|---|
| open(method,URL,async) | 建立與伺服器的連接配接 method參數指定請求的HTTP方法,典型的值是GET或POST URL參數指定請求的位址 async參數指定是否使用異步請求，其值為true或false(預設是true) |
| setRequestHeader(header,value) | 設定請求的頭資訊 |
| send(content) | 發送請求 content參數指定請求的參數 |
- 常用屬性
| 屬性名 | 說明 |
|---|---|
| onreadystatechange | 指定響應請求的回調函數 |
| readystate | XMLHttpRequest執行請求和響應過程的狀态資訊 |
| status | HTTP請求響應的狀态碼 |
| responseText | HTTP請求響應的文本内容 |
2.2 XMLHttpRequest使用步驟
1.建立異步對象 var xmlHttp = new XMLHttpRequest();
2.給異步對象綁定事件。：當異步對象發起請求，擷取了資料都會觸發這個事件。這個事件需要指定一個函數， 在函數中處理狀态的變化。onreadystatechange
- 異步對象的屬性readyState 表示異步對象請求的狀态變化
- 回調：當請求的狀态變化時，異步對象會自動調用onreadystatechange事件對應的函數
| 狀态值 | 說明 |
|---|---|
XMLHttpRequest對象沒有完成初始化, | |
| 1 | XMLHttpRequest對象開始發送請求 |
| 2 | XMLHttpRequest對象的請求發送 |
| 3 | XMLHttpRequest對象開始讀取響應，還沒有結束，從伺服器端擷取了資料，此時3， 注意3是異步對象内部使用， 擷取了原始的資料 |
| 4 | XMLHttpRequest對象讀取響應結束，異步對象把接收的資料處理完成後。 此時開發人員在4的時候處理資料 |
xmlHttp.onreadystatechange= function(){
處理請求的狀态變化。
if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){
//可以處理伺服器端的資料，更新目前頁面
var data = xmlHttp.responseText;
document.getElementById("name").value= data;
}
}
3.初始異步請求對象,異步的方法open()
xmlHttp.open(請求方式get|post, "伺服器端的通路位址", 同步|異步請求（預設是true，異步請求）)
4.使用異步對象發送請求xmlHttp.send()
- 擷取伺服器傳回的資料時，使用異步對象的屬性 responseText，例如：
xmlHttp.responseText
三、Ajax案例
3.1 計算bmi值
- index.jsp
<html>
<head>
<title>JSP - Hello World</title>
</head>
<body>
<div>
<!--此處沒有使用Ajax-->
身高（米）：<input type="text" id="height">
體重（公斤）：<input type="text" id="weight">
<button type="button" value="bmi" onclick="doAjax()">送出</button>
<div id="data">等待資料更新...</div>
</div>
<script>
function doAjax(){
//1.建立異步對象
var xmlHttp = new XMLHttpRequest();
//2.綁定事件
xmlHttp.onreadystatechange = function (){
//處理伺服器傳回的資料，更新目前頁面
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
// alert("readyState屬性值 = " + xmlHttp.responseText)
var data = xmlHttp.responseText;
//更新頁面資料
document.getElementById("data").innerText = data;
}
}
//3.初始請求資料
//擷取dom對象的value值
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
var param = "&weight=" + weight + "&height=" + height;
alert("param: " + param);
xmlHttp.open("get","bmiAjax?" + param,true);
//4.發送請求
xmlHttp.send();
}
</script>
</body>
</html>
- BmiServlet.java
@WebServlet("/bmiAjax")
public class BmiServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("接收到Ajax的請求");
String weight = req.getParameter("weight");
String height = req.getParameter("height");
//計算bmi
Float fWeight = Float.valueOf(weight);
Float fHeight = Float.valueOf(height);
float bmi = fWeight / (fHeight * fHeight);
String msg = "您的bmi是：" + bmi;
resp.setContentType("text/html;charset=utf-8");
PrintWriter printWriter = resp.getWriter();
printWriter.println(msg);
printWriter.flush();
printWriter.close();
}
}
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)