AJAX亂碼與異步同步以及封裝jQuery庫(kù)實(shí)現(xiàn)步驟詳解
1、ajax亂碼問(wèn)題
（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亂碼問(wèn)題</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
}
}
}
// 打開(kāi)通道
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
}
}
}
// 打開(kāi)通道
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è)試亂碼問(wèn)題</button><br>
<button id="btn2">發(fā)送ajax post請(qǐng)求，測(cè)試亂碼問(wèn)題</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亂碼問(wèn)題
**/
@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來(lái)說(shuō)，關(guān)于字符集，我們程序員不需要干涉，不會(huì)出現(xiàn)亂碼。
對(duì)于tomcat9和之前的版本來(lái)說(shuō)：
①對(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ì)亂碼！
學(xué)習(xí)AJAX