AJAX乱码与异步同步以及封装jQuery库实现步骤详解-学习AJAX-JavaScript编程-硕编程

首页 » JavaScript编程 » 学习AJAX

AJAX乱码与异步同步以及封装jQuery库实现步骤详解

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