用JavaScript實現漢字與Unicode的相互轉換
概述
AJAX,即Asynchronous JavaScript and XML(非同步的 JavaScript 和 XML)。Ajax通過在後臺與伺服器進行少量資料交換,可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。
為什麼使用Ajax?
在之前的開發,每當使用者向伺服器傳送請求,哪怕只是需要更新一點點的區域性內容,伺服器都會將整個頁面進行重新整理。其缺點是:
- 效能會有所降低
- 使用者的操作頁面會中斷(整個頁面被重新整理了)
XMLHttpRequest物件
使用Ajax進行客戶端與服務端的非同步通訊的一個關鍵物件就是XMLHttpRequest
工作原理(來自java3y-Ajax入門):
傳統的web前端與後端的互動中,瀏覽器直接訪問Tomcat的Servlet來獲取資料。Servlet通過轉發把資料傳送給瀏覽器。
當使用AJAX之後,瀏覽器是先把請求傳送到XMLHttpRequest非同步物件之中,非同步物件對請求進行封裝,然後再與傳送給伺服器。伺服器並不是以轉發的方式響應,而是以流的方式把資料返回給瀏覽器。
XMLHttpRequest非同步物件會不停監聽伺服器狀態的變化,得到伺服器返回的資料,就寫到瀏覽器上【因為不是轉發的方式,所以是無重新整理就能夠獲取伺服器端的資料】
XMLHttpRequest的建立
並不是所有的瀏覽器都支援XMLHttpRequest物件,如下:
var xmlhttp;
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{//IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest物件的屬性
- onreadystatechange:請求狀態改變的事件觸發器,每當readyState的屬性改變時,就會呼叫該函式。 一般用於指定回撥函式
- readyState:存有的XMLHttpRequest的狀態從0到4發生變化。
- 0:請求未初始化 。此時XMLHttpRequest物件已被建立,但還沒有呼叫open方法。
- 1:請求已建立。呼叫了open方法,建立了http請求,但還沒有呼叫send方法,即還沒有傳送請求。
- 2:請求已傳送。請求已經被髮送,但還沒用到達伺服器。
- 3:請求處理中。請求已傳送到伺服器,伺服器正在處理請求並返回響應資料。
- 4:請求已完成,並已接收全部響應資料。
- reponseText:以文字形式返回響應。
- responseXML:以XML格式返回響應。可以使用JavaScript的DOM API操作返回的xml內容。
- status:將狀態返回為數字(例如,“Not Found”為404,“OK”為200)
- statusText:以字串形式返回狀態(例如,“Not Found”或“OK”)
XMLHttpRequest物件的方法
重要方法如下:標粗體的方法為常用方法。
-
void open(method,URL,async)
:根據請求形式和utl建立HTTP請求,async指定是否非同步,true為非同步,false為同步。 -
void open(method,URL,async,userName,password)
:userName和password是在http認證的時候會用到的。 -
setRequestHeader(label,value)
:設定請求體資訊。使用post方式傳送請求時,需設定如下請求頭:xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-
void send(content)
:傳送請求給伺服器。- 若是傳送post請求,要傳送的引數資訊需通過send方法傳送。
- 對於get請求,content可以不寫或為null。引數的傳送通過url即可。
-
abort():取消當前請求。
-
getAllResponseHeaders():以字串形式返回完整的HTTP標頭集。
-
getResponseHeader(headerName) :返回指定HTTP標頭的值。
簡單示例
該示例伺服器端使用servlet。
示例內容:點選按鈕,傳送Ajax請求,並把從伺服器獲取到的文字插入到當前頁面。
伺服器端的Servlet:
public class OneServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("OneServlet.doGet");
//客戶端使用了post方式的請求,引數資料將會被request物件解析,需要設定其字符集,避免亂碼
req.setCharacterEncoding("utf-8");
String username = req.getParameter("username");
String age = req.getParameter("age");
System.out.println("從客戶端傳送來的資料:");
System.out.println("username = " + username);
System.out.println("age = " + age);
resp.setContentType("text/html;charset=UTF-8");
resp.getWriter().write("這是通過Ajax從伺服器端獲取的文字資料。。。");
}
}
OneServlet的web.xml配置:
<servlet>
<servlet-name>one</servlet-name>
<servlet-class>com.servlet.OneServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>one</servlet-name>
<url-pattern>/one</url-pattern>
</servlet-mapping>
index.html:
- 點選按鈕時,會呼叫getTextByAjax函式,在該函式中傳送Ajax請求。並設定回撥函式為setResponseText,當請求完成時獲取接收到的資料,把資料輸出到
<p>
標籤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<script>
let xmlHttpRequest;
function getTextByAjax() {
//根據瀏覽器版本建立XMLHttpRequest物件
if(window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}else
{
xmlHttpRequest=nexw ActiveXObject("Microsoft.XMLHTTP");
}
//建立http請求
xmlHttpRequest.open("POST", "one" ,true);
//傳送post請求,需要設定該請求頭資訊(使用get方式則可以省略)
xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//設定回撥函式,當readyState改變時呼叫該函式
xmlHttpRequest.onreadystatechange = setResponseText;
//發生請求,使用的是post方式,引數資訊需通過send方法傳送
xmlHttpRequest.send("username=張三&age=25");
}
function setResponseText() {
//readyStatus未4表示請求已完成,且響應已就緒;status為200則表示請求完成且響應資料接收完畢
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
//獲取伺服器端返回的文字資料
let text = xmlHttpRequest.responseText;
//將文字資料輸出在標籤中
document.getElementById("demo").innerHTML = text;
}
}
</script>
</head>
<body>
<h1>點選按鈕發生Ajax請求</h1>
<button onclick="getTextByAjax()">button</button>
<p id="demo" ></p>
</body>
</html>
執行tomcat,點選按鈕,可看到從伺服器傳送的文字資訊
且伺服器端接收到客戶端傳送的資料:
參考
https://www.w3cschool.cn/ajax/ajax-xmlhttprequest-create.html