文章詳情頁
AJAX亂碼與異步同步以及封裝jQuery庫實現步驟詳解
瀏覽：353日期：2022-06-11 18:59:03
目錄
- 1、AJAX亂碼問題
- 2、AJAX的異步與同步
- 3、AJAX代碼封裝
- 4、手動封裝一個jQuery庫
1、AJAX亂碼問題
（1）發送ajax get 或者 ajax post請求時下面兩種情況？
①發送數據到服務器，服務器獲取的數據是否亂碼？
②服務器響應給前端的中文，會不會亂碼？
（2）以Tomcat9為例：
①前端代碼：填數據，發送到服務器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試AJAX亂碼問題</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
// -----------------------------------------------ajax get
document.getElementById("btn1").onclick = function(){
// 創建對象
var xhr = new XMLHttpRequest();
// 注冊回調函數
xhr.onreadystatechange = function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("mydiv").innerHTML = this.responseText
}
}
}
// 打開通道
var username = document.getElementById("username").value
xhr.open("GET", "/ajax/ajaxrequest7?username="+username+"&t=" + new Date().getTime(), true)
// 發送請求
xhr.send()
}
// -----------------------------------------------ajax post
document.getElementById("btn2").onclick = function(){
// 創建對象
var xhr = new XMLHttpRequest();
// 注冊回調函數
xhr.onreadystatechange = function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("mydiv").innerHTML = this.responseText
}
}
}
// 打開通道
xhr.open("POST", "/ajax/ajaxrequest7", true)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
var username = document.getElementById("username").value
// 發送請求
xhr.send("username=" + username)
}
}
</script>
<input type="text" id="username"><br>
<button id="btn1">發送ajax get請求，測試亂碼問題</button><br>
<button id="btn2">發送ajax post請求，測試亂碼問題</button><br>
<div id="mydiv"></div>
</body>
</html>
②后端代碼：先獲取數據，然后在把數據響應給服務器
package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @program: 代碼
* @ClassName: AjaxRequest7Servlet
* @version: 1.0
* @description: 測試ajax亂碼問題
**/
@WebServlet("/ajaxrequest7")
public class AjaxRequest7Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 接收的中文會不會亂碼----不會
String username = request.getParameter("username");
System.out.println(username);
// 響應中文會有亂碼嗎？----會
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(username);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 接收的中文會不會亂碼----會
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
System.out.println(username);
// 響應中文會有亂碼嗎？---會
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(username);
}
}
（3）測試結果：
對于tomcat10來說，關于字符集，我們程序員不需要干涉，不會出現亂碼。
對于tomcat9和之前的版本來說：
①對于GET請求：接收前端的數據輸出到控制臺不會亂碼；把接收到的數據重新發給瀏覽器，輸出打印到瀏覽器會亂碼！
②對于POST請求：接收前端的數據輸出到控制臺和把接收到的數據重新發給瀏覽器進行輸出兩者都會亂碼！
標簽：
Ajax
排行榜
網公網安備