AJAX乱码处理、同步异步机制及jQuery库封装详解

作者:纸飞机时间:2026-10-27 00:55:30浏览:126

本文详细解析AJAX请求中的乱码问题,对比Tomcat9与Tomcat10的字符集处理差异,并提供GET与POST请求的乱码解决方案。深入讲解AJAX同步与异步的区别、代码实现及适用场景,最后通过手动封装jQuery库,展示如何简化前端Ajax操作并提高开发效率。

AJAX乱码问题

在发送AJAX GET或POST请求时,主要涉及两种情况:

第一,发送到服务器的数据在服务器端获取时是否会出现乱码?

第二,服务器响应给前端的中文内容是否会出现乱码?

以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);
    }
}

测试结果如下:

对于Tomcat10,关于字符集的处理无需程序员干预,不会出现乱码问题。

对于Tomcat9及更早版本:

对于GET请求:从前端接收的数据输出到控制台时不会乱码;但若将接收到的数据重新发送给浏览器并在浏览器中打印,则会出现乱码。

对于POST请求:从前端接收的数据输出到控制台,以及将数据重新发送给浏览器进行输出,两者均会出现乱码。

解决发送给服务器的数据在服务器端接收后控制台打印乱码的问题

request.setCharacterEncoding("UTF-8");

解决将接收到的数据响应给浏览器时出现乱码的问题

response.setContentType("text/html;charset=UTF-8");

AJAX的异步与同步机制

需要明确异步与同步的概念:

AJAX请求1和AJAX请求2同时并发执行,互不等待,即为异步(a不等b,b也不等a)。

若AJAX请求1在发送时必须等待AJAX请求2执行完毕,则为同步(a等待b,或b等待a,只要存在等待即为同步)。

在代码中如何实现异步与同步?

同步:若第三个参数为false,表示“AJAX请求1”不支持异步。这意味着该请求发送后,会阻塞其他AJAX请求的发送,只有当此请求结束后,其他请求才能发送。

xhr1.open("请求方式", "URL", false)

异步:若第三个参数为true,表示“AJAX请求2”支持异步。这意味着该请求发送后,不影响其他AJAX请求的发送。

xhr.open("请求方式", "URL", true) 

异步与同步的演示:

前端代码编写两个AJAX请求,均发送GET请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示ajax同步和异步</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
        // --ajax请求1
        document.getElementById("btn1").onclick = function (){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("div1").innerHTML = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            xhr.open("GET", "/ajax/ajaxrequest8?t=" + new Date().getTime(), true)
            xhr.send()
        }
        // --ajax请求2
        document.getElementById("btn2").onclick = function (){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("div2").innerHTML = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            xhr.open("GET", "/ajax/ajaxrequest9?t=" + new Date().getTime(), true)
            xhr.send()
        }
    }
</script>
<button id="btn1">ajax请求1</button>
<div id="div1"></div>
<button id="btn2">ajax请求2</button>
<div id="div2"></div>
</body>
</html>

后端代码根据两个AJAX发送的不同请求进行编写。

AJAX1的请求处理逻辑。

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;
/**
 * @program: 代码
 * @ClassName: AjaxRequest8Servlet
 * @version: 1.0
 * @description: 测试ajax同步和异步
 **/
@WebServlet("/ajaxrequest8")
public class AjaxRequest8Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            // 睡眠10秒
            Thread.sleep(10 * 1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print("ajax请求1");
    }
}

AJAX2的请求处理逻辑。

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;
/**
 * @program: 代码
 * @ClassName: AjaxRequest8Servlet
 * @version: 1.0
 * @description: 测试ajax同步和异步
 **/
@WebServlet("/ajaxrequest9")
public class AjaxRequest9Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print("ajax请求2");
    }
}

运行效果展示:

为方便测试展示效果,给第一个AJAX1请求设置了10秒的睡眠延迟。

若AJAX1的请求参数为true,说明支持异步。在睡眠10秒期间,仍能发送AJAX2请求,两者互不影响。

若AJAX1的请求参数为false,说明是同步。在睡眠10秒期间,整个屏幕相当于被锁定,无法发送AJAX2请求,必须等待睡眠结束、AJAX1请求完成后,才能发送AJAX2请求。

同步的使用场景(大部分情况下使用AJAX异步方式,同步较少使用):

例如用户注册场景。

用户名需要发送AJAX请求进行校验。

邮箱地址也需要发送AJAX请求进行校验。

其他字段也可能需要发送AJAX请求进行校验。

最终点击注册按钮时,也是发送AJAX请求进行注册。

显然,注册的AJAX请求和校验的AJAX请求不能异步,必须等待所有校验AJAX请求结束后,注册的AJAX请求才能发送。

AJAX乱码问题

AJAX代码封装

jQuery库的初次封装:根据ID获取元素。

AJAX请求相关的代码具有相似性,存在大量重复代码。因此,可以将这些重复代码封装为一个工具类。发送AJAX请求时,直接调用该工具类中的相关函数即可。

接下来,手动封装一个工具类,可视为一个JS库。将该JS库命名为jQuery(封装的jQuery仅为前端库,与后端Java无关,旨在方便Web前端代码编写,提高Web前端开发效率)。

源码原型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("mybtn").onclick = function () {
                document.getElementById("div").innerHTML = "<font color='red'>欢迎登陆</font>"
            }
        }
    </script>
<body>
    <button id="mybtn">显示信息</button>
    <div id="div">
    </div>
</body>
</html>

进行优化:优化通过ID获取对象的方法。

设计思路借鉴CSS语法:可通过ID选择器 #id 获取元素,也可通过类选择器 .class 获取元素。

发现通过ID获取对象的代码过长,不妨封装到一个函数中。封装一个函数替代原来的 document.getElementById,返回该对象。做一个标记 #,只有带有此标记的才会调用 document.getElementById 获取对象;参数传入时需调用 substring 函数进行截串,去掉 # 号。

对于函数名嫌长的问题,可赋值给一个符号:$ = jQuery。

<script type="text/javascript">      
        // 再次进行更改
        function jQuery(selector) { // selector只是一个变量
            // 获取到第一个字符是不是#
            if (selector.charAt(0) == "#") {
                // 定义变量获得这个对象
                var domObj = document.getElementById(selector.substring(1));
                // 返回的dom对象
                return domObj
            }
        }
        // 给函数名赋值
        $ = jQuery
        window.onload = function () {
           $("#mybtn").onclick = function () {
                $("#div").innerHTML = "<font color='red'>欢迎登陆</font>"
            }
        }
    </script>

再次进行优化:页面加载。

封装函数,替代 window.onload;封装页面加载完毕后执行的回调函数。

<script type="text/javascript">
        function jQuery(selector) { // selector只是一个变量
            // 如果传过来的是一个字符串string
            if (typeof selector == "string") {
                // 获取到第一个字符是不是#
                if (selector.charAt(0) == "#") {
                    // 直接使全局变量
                    var domObj = document.getElementById(selector.substring(1));
                    // 返回的dom对象
                    return domObj
                }
            }
            // 如果传过来的是一个函数:页面加载完毕,注册回调函数
            if (typeof selector == "function") {
                window.onload = selector;
            }
        }
        // 给函数名赋值
        $ = jQuery
        // 把函数直接传进去
        // $(function(){})的作用是:页面加载完毕,就执行里面的回调函数
        // 把整个函数当做参数直接传进去
        $(function () {
            $("#mybtn").onclick = function () {
                $("#div").innerHTML = "<font color='red'>欢迎登陆</font>"
            }
        })
    </script>

继续优化。

首先回顾JavaScript中类的定义、对象的创建、属性的访问、方法的访问。

类的创建实际上与函数的定义相同,若使用 new 则表示这是一个类;若未使用 new 则表示这是一个函数。

注意:最重要的是 prototype 属性,可用于扩展类的属性或方法,语法格式如下:类.prototype.属性/方法 = function(){}。

注意:对于静态方法的调用,虽然也使用“类名.静态方法”,但前提是先new对象,否则仍会当作普通函数调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回顾javascript中的类的定义,对象的创建。属性的访问,方法的访问。</title>
</head>
<body>
<script type="text/javascript">
    // 1、在JS当中定义类
 /*   这种创建类的方式也可以
    User = function (usercode,username) {
    }*/
    function  User(usercode,username) {
        // 属性
        this.usercode = usercode;
        this.username = username;
        // 实例方法
        this.doSome = function () {
            alert(username+"doSome......");
        }
        // 静态方法
        User.doOther = function () {
            alert(username+"doOther......")
        }
    }
    //2、创建对象
    // User(); 直接这样调用,你只是把它当做一个普通的函数去执行,不会创建对象,在堆中没有这个对象。
    // new User(); 这样调用的话,其实就是调用该类的构造方法,创建对象,并且在堆中分配空间。
    var user = new User("111","zhangsan");
    // 访问属性
    alert(user.usercode+" , "+user.username);
    // 调用实例方法
    user.doSome();
    // 调用静态方法
    User.doOther();
    //3、后期新增一个fly方法,使用prototype属性
    User.prototype.fly = function () {
        alert("飞翔.............")
    }
    // 调用扩展的方法
    user.fly();
</script>
</body>
</html>

继续进行改造:将 onclick 和 innerHTML 封装为 click() 和 html() 函数,务必封装彻底。

先封装 innerHTML 属性。

将 innerHTML 属性封装为一个 html 方法,传入参数即可。

需明确是哪个对象调用。对于 html 方法,肯定封装在jQuery对象内,因此只有该对象才能调用;而下面的 $("#mydiv") 原来返回的是 domobj 对象,因此需修改,返回 new jQuery。

并封装好 html 方法,传入一个字符串,将该字符串传给 domObj.innerHTML。但问题在于,原来写的 domObj 对象是局部变量,外部无法调用,因此需去掉 var 变为全局变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function jQuery(selector) {
        // 如果是字符串
        if (typeof selector == "string") {
            // 看开头是不是#
            if (selector.charAt(0) == "#") {
                //截掉#,然后传进去
                // 去掉var改为全局变量
                domObj = document.getElementById(selector.substring(1));
                // 返回一个jQuery对象,下面才能正常调用html方法
                return new jQuery();
            }
        }
        // 如果是一个函数:页面加载完毕,注册回调函数
        if (typeof selector == "function") {
            window.onload = selector
        }
        // 封装html方法,代替domObj.innerHTML = ""
        this.html = function (htmlStr) {
            domObj.innerHTML = htmlStr
        }
    }
    // 把函数名赋给一个变量
    $ = jQuery;
    $(function () {
        $("#mybtn").onclick = function () {
            // 此时会有一个问题,domObj下没有html方法
            // 所以在jQuery中封装一个html方法,返回一个jQuery即可
            $("#mydiv").html("<font color='red'>Hello</font>");
        }
    })
</script>
<button id="mybtn">显示信息</button>
<div id="mydiv">
</div>
</body>
</html>

在封装 onclick 属性。

既然返回的是jQuery属性,那么 $("#mybtn").onclick 肯定会有问题,只有 domObj 对象才有 onclick 属性,因此需对 onclick 属性进行封装,封装要彻底。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <script type="text/javascript">
        function jQuery(selector) {
        // 如果是字符串
        if (typeof selector == "string") {
            // 看开头是不是#
            if (selector.charAt(0) == "#") {
                //截掉#,然后传进去
                // 去掉var改为全局变量
                domObj = document.getElementById(selector.substring(1));
                // 返回一个jQuery对象,下面才能正常调用html方法
                return new jQuery();
            }
        }
        // 如果是一个函数:页面加载完毕,注册回调函数
        if (typeof selector == "function") {
            window.onload = selector
        }
        // 封装html方法,代替domObj.innerHTML = ""
        this.html = function (htmlStr) {
            domObj.innerHTML = htmlStr
        }
        // 封装onclick方法,直接传一个函数,代替:domObj.onclick = function(){}
        this.click = function (fun) {
            domObj.onclick = fun
        }
    }
    // 把函数名赋给一个变量
    $ = jQuery;
    $(function () {
        // 把整个函数直接传过去
        $("#mybtn").click(function () {
            // 此时会有一个问题,domObj下没有html方法
            // 所以在jQuery中封装一个html方法,返回一个jQuery即可
            $("#mydiv").html("<font color='red'>Hello</font>");
        })
    })
    </script>
<body>
    <button id="mybtn">显示信息</button>
    <div id="div">
    </div>
</body>
</html>

将jQuery单独写到js文件中使用时引入库。

在web目录下创建一个js目录,将前面封装好的代码放入一个.js文件,并扔进js目录下;使用之前,需先将其引入。

AJAX乱码问题

function jQuery(selector){
    if (typeof selector == "string") {
        if (selector.charAt(0) == "#") {
            domObj = document.getElementById(selector.substring(1))
            return new jQuery()
        }
    }
    if (typeof selector == "function") {
        window.onload = selector
    }
    this.html = function(htmlStr){
        domObj.innerHTML = htmlStr
    }
    this.click = function(fun){
        domObj.onclick = fun
    }
    this.focus = function (fun){
        domObj.onfocus = fun
    }
    this.blur = function(fun) {
        domObj.onblur = fun
    }
    this.change = function (fun){
        domObj.onchange = fun
    }
    this.val = function(v){
        if (v == undefined) {
            return domObj.value
        }else{
            domObj.value = v
        }
    }
 

使用封装好的函数进行调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试自己编写的jQuery</title>
</head>
<body>
    <!--使用jQuery库,需要先引进来-->
    <script type="text/javascript" src="js/jQuery-1.0.0.js"></script>
    <script type="text/javascript">
         // 常规写法
         window.onload = function(){
            document.getElementById("btn").onclick = function () {
                alert("hello1")
            }
        }
        // 使用我们自己写的库
        $(function () {
            $("#btn").click(function () {
                //alert("hello2");
                // 获取文本框的内容
                alert($("#username").val())
                // 修改文本框的value
                $("#username").val("张三")
                // 设置div的内容
                $("#mydiv").html("<font color='red'>你好</font>")
            })
        })
    </script>
    <button id="btn">hello</button><br>
    用户名:<input type="text" id="username"><br>
    <div id="mydiv"></div>
</body>
</html>

手动封装一个jQuery库。

将整个Ajax请求的步骤封装到jQuery-1.0.0.js中。

仅针对传入的数据为JSON格式的数据进行封装。

原型代码:

前端代码部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将AJAX代码进行封装,封装到jQuery库当中</title>
</head>
<body>
    <!--原码-->
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                // 创建对象
                var xhr = new XMLHttpRequest();
                // 注册回调函数
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            // 只针对JSON格式的数据
                            var jsonObj = JSON.parse(this.responseText);
                            // 把数据放入到div里
                            document.getElementById("mydiv").innerHTML = jsonObj.username
                        }else {
                            alert(this.status)
                        }
                    }
                }
                // 打开通道
                xhr.open("POST","/ajax/ajaxrequest10",true)
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                // 发送请求
                var username = document.getElementById("username").value;
                xhr.send("username="+username);
            }
        }
    </script>
    <button id="btn">发送ajax请求</button><br>
    用户名:<input type="text" id="username"><br>
    <div id="mydiv"></div><br>
</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;
/**
 * @Package:com.bjpowernode.javaweb.ajax
 * @Project:ajax
 */
@WebServlet("/ajaxrequest10")
public class AjaxRequest10Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        // 获取前端提交的数据
        String username = request.getParameter("username");
        // 以JSON格式数据提交
        out.print(" {\"username\" : \""+username+"\"}");
    }
}

发现原型代码重复较多,不够简练,因此下面进行封装。

使用封装好的jQuery-1.0.0.js:

该库封装好后,调用前需先使用src属性引入,例如:

<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js">

手动封装一个jQuery库。

function jQuery(selector){
    if (typeof selector == "string") {
        if (selector.charAt(0) == "#") {
            domObj = document.getElementById(selector.substring(1))
            return new jQuery()
        }
    }
    if (typeof selector == "function") {
        window.onload = selector
    }
    this.html = function(htmlStr){
        domObj.innerHTML = htmlStr
    }
    this.click = function(fun){
        domObj.onclick = fun
    }
    this.focus = function (fun){
        domObj.onfocus = fun
    }
    this.blur = function(fun) {
        domObj.onblur = fun
    }
    this.change = function (fun){
        domObj.onchange = fun
    }
    this.val = function(v){
        if (v == undefined) {
            return domObj.value
        }else{
            domObj.value = v
        }
    }
    // 静态的方法,发送ajax请求
    /**
     * 分析:使用ajax函数发送ajax请求的时候,需要程序员给我们传过来什么?
     *      请求的方式(type):GET/POST
     *      请求的URL(url):url
     *      请求时提交的数据(data):data
     *      请求时发送异步请求还是同步请求(async):true表示异步,false表示同步。
     */
    jQuery.ajax = function(jsonArgs){ // 接收前端代码传过来的json数据
        // 创建对象
        var xhr = new XMLHttpRequest();
        // 注册回调函数
        xhr.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    // 只针对JSON格式的数据,这个是服务器响应回来的JSON格式代码
                    var jsonObj = JSON.parse(this.responseText);
                    // 把数据放入到div里
                    // 调用函数
                    jsonArgs.success(jsonObj)
                }else {
                    alert(this.status)
                }
            }
        }
        // 打开通道,看是那种请求方式
        if (jsonArgs.type.toUpperCase() == "POST") {// 如果是POST请求
            xhr.open("POST",jsonArgs.url,jsonArgs.async)
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 发送请求
            xhr.send(jsonArgs.data);
        }
        if (jsonArgs.type.toUpperCase() == "GET") {// 如果是GET请求
            xhr.open("GET",jsonArgs.url+"?"+jsonArgs.data,jsonArgs.async)
            // 发送请求
            xhr.send();
        }
    }
}
$ = jQuery
// 细节:执行这个目的是为了让上面的静态方法ajax生效。
new jQuery()
 

前端代码:前端在编写Ajax四步时与之前不同,直接调用jQuery库中封装好的函数并传入JSON数据即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将AJAX代码进行封装,封装到jQuery库当中</title>
</head>
<body>
<!--原码-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            // 调用jQuery的工具类中的ajax方法来发送ajax请求
            /*var username = document.getElementById("username").value
            $.ajax({
                type : "POST",
                url : "/ajax/request10",
                data : "username=" + username,
                async : true,
                // 程序响应回来之后,对于客户端来说要拿到响应的数据,然后解析这个数据,展示到页面上。
                success : function(json){
                    document.getElementById("mydiv").innerHTML = json.uname
                }
            })*/
             // 进一步优化
             $.ajax({
                type : "POST",
                url : "/ajax/request10",
                data : "username=" + $("#username").val(),
                async : true,
                // 程序响应回来之后,对于客户端来说要拿到响应的数据,然后解析这个数据,展示到页面上。
                success : function(json){
                    $("#mydiv").html( json.uname)
                }
            })
             
 
        })
    })
</script>
<button id="btn">发送ajax请求</button>
<br>
用户名:<input type="text" id="username"><br>
<div id="mydiv"></div>
<br>
</body>
</html>

后端代码:得到前端发送的数据后,也响应回去一个JSON格式的数据。

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;
/**
 * @Package:com.bjpowernode.javaweb.ajax
 * @Project:ajax
 * @name:AjaxRequest10Servlet
 */
@WebServlet("/request10")
public class AjaxRequest10Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应的类型
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        // 获得前端提交的数据
        String username = request.getParameter("username");
        // 响应给浏览器
       out.print("{\"uname\" : \""+username+"\"}");
    }
}

到此这篇关于AJAX乱码与异步同步以及封装jQuery库实现步骤详解的文章就介绍到这了,更多相关AJAX乱码内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章