成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁技術(shù)文章
文章詳情頁

AJAX亂碼與異步同步以及封裝jQuery庫實(shí)現(xiàn)步驟詳解

瀏覽：137日期：2022-06-11 18:59:03
目錄
  • 1、AJAX亂碼問題
  • 2、AJAX的異步與同步
  • 3、AJAX代碼封裝
  • 4、手動(dòng)封裝一個(gè)jQuery庫

1、AJAX亂碼問題

（1）發(fā)送ajax get 或者 ajax post請(qǐng)求時(shí)下面兩種情況？

①發(fā)送數(shù)據(jù)到服務(wù)器，服務(wù)器獲取的數(shù)據(jù)是否亂碼？

②服務(wù)器響應(yīng)給前端的中文，會(huì)不會(huì)亂碼？

（2）以Tomcat9為例：

①前端代碼：填數(shù)據(jù)，發(fā)送到服務(wù)器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測(cè)試AJAX亂碼問題</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
// -----------------------------------------------ajax get
document.getElementById("btn1").onclick = function(){
    // 創(chuàng)建對(duì)象
    var xhr = new XMLHttpRequest();
    // 注冊(cè)回調(diào)函數(shù)
    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)
    // 發(fā)送請(qǐng)求
    xhr.send()
}
// -----------------------------------------------ajax post
document.getElementById("btn2").onclick = function(){
    // 創(chuàng)建對(duì)象
    var xhr = new XMLHttpRequest();
    // 注冊(cè)回調(diào)函數(shù)
    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
    // 發(fā)送請(qǐng)求
    xhr.send("username=" + username)
}
    }
</script>
<input type="text" id="username"><br>
<button id="btn1">發(fā)送ajax get請(qǐng)求，測(cè)試亂碼問題</button><br>
<button id="btn2">發(fā)送ajax post請(qǐng)求，測(cè)試亂碼問題</button><br>
<div id="mydiv"></div>
</body>
</html>

②后端代碼：先獲取數(shù)據(jù)，然后在把數(shù)據(jù)響應(yīng)給服務(wù)器

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: 測(cè)試ajax亂碼問題
 **/
@WebServlet("/ajaxrequest7")
public class AjaxRequest7Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
// 接收的中文會(huì)不會(huì)亂碼----不會(huì)
String username = request.getParameter("username");
System.out.println(username);
// 響應(yīng)中文會(huì)有亂碼嗎？----會(huì)
 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 {
// 接收的中文會(huì)不會(huì)亂碼----會(huì)
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
System.out.println(username);
// 響應(yīng)中文會(huì)有亂碼嗎？---會(huì)
 response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(username);
    }
}

（3）測(cè)試結(jié)果：

對(duì)于tomcat10來說，關(guān)于字符集，我們程序員不需要干涉，不會(huì)出現(xiàn)亂碼。

對(duì)于tomcat9和之前的版本來說：

①對(duì)于GET請(qǐng)求：接收前端的數(shù)據(jù)輸出到控制臺(tái)不會(huì)亂碼；把接收到的數(shù)據(jù)重新發(fā)給瀏覽器，輸出打印到瀏覽器會(huì)亂碼！

②對(duì)于POST請(qǐng)求：接收前端的數(shù)據(jù)輸出到控制臺(tái)和把接收到的數(shù)據(jù)重新發(fā)給瀏覽器進(jìn)行輸出兩者都會(huì)亂碼！

標(biāo)簽： Ajax