AJAX【基于XML的数据交换 、AJAX乱码问题 、AJAX的异步与同步 、AJAX代码封装】

AJAX

    • 基于XML的数据交换
    • AJAX乱码问题
    • AJAX的异步与同步
    • AJAX代码封装


基于XML的数据交换

  • 注意:如果服务器端响应XML的话,响应的内容类型需要写成:

    response.setContentType("text/xml;charset=UTF-8");
    
  • xml和JSON都是常用的数据交换格式

    • XML体积大,解析麻烦。较少用。
    • JSON体积小,解析简单,较常用。
  • 基于XML的数据交换,前端代码

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用XML完成数据交换title>
    head>
    <body>
    <script type="text/javascript">
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                // 1.创建XMLHTTPRequest对象
                var xhr = new XMLHttpRequest();
                // 2.注册回调函数
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            // 服务器端响应了一个XML字符串,这里怎么接收呢?
                            // 使用XMLHTTPRequest对象的responseXML属性,接收返回之后,可以自动封装成document对象(文档对象)
                            var xmlDoc = this.responseXML
                            //console.log(xmlDoc)
                            // 获取所有的元素,返回了多个对象,应该是数组。
                            var students = xmlDoc.getElementsByTagName("student")
                            //console.log(students[0].nodeName)
                            var html = "";
                            for (var i = 0; i < students.length; i++) {
                                var student = students[i]
                                // 获取元素下的所有子元素
                                html += ""
                                html += ""+(i+1)+""
                                var nameOrAge = student.childNodes
                                for (var j = 0; j < nameOrAge.length; j++) {
                                    var node = nameOrAge[j]
                                    if (node.nodeName == "name") {
                                        //console.log("name = " + node.textContent)
                                        html += ""+node.textContent+""
                                    }
                                    if (node.nodeName == "age") {
                                        //console.log("age = " + node.textContent)
                                        html += ""+node.textContent+""
                                    }
                                }
                                html += ""
                            }
                            document.getElementById("stutbody").innerHTML = html
                        }else{
                            alert(this.status)
                        }
                    }
                }
                // 3.开启通道
                xhr.open("GET", "/ajax/ajaxrequest6?t=" + new Date().getTime(), true)
                // 4.发送请求
                xhr.send()
            }
        }
    script>
    <button id="btn">显示学生列表button>
    <table width="500px" border="1px">
        <thead>
        <tr>
            <th>序号th>
            <th>姓名th>
            <th>年龄th>
        tr>
        thead>
        <tbody id="stutbody">
        
        tbody>
    table>
    body>
    html>
    
  • 基于XML的数据交换,后端java程序:

    package com.bjpowernode.ajax.servlet;
    
    import jakarta.servlet.ServletException;
    import jakarta.servlet.annotation.WebServlet;
    import jakarta.servlet.http.HttpServlet;
    import jakarta.servlet.http.HttpServletRequest;
    import jakarta.servlet.http.HttpServletResponse;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    /**
     * @program: 代码
     * @ClassName: AjaxRequest6Servlet
     * @version: 1.0
     * @description: 服务器端返回XML字符串
     * @author: bjpowernode
     * @create: 2022-05-15 11:48
     **/
    @WebServlet("/ajaxrequest6")
    public class AjaxRequest6Servlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            // 注意:响应的内容类型是XML。
            response.setContentType("text/xml;charset=UTF-8");
            PrintWriter out = response.getWriter();
    
            /*
            
                
                    zhangsan
                    20
                
                
                    lisi
                    22
                
            
             */
    
            StringBuilder xml = new StringBuilder();
            xml.append("");
            xml.append("");
            xml.append("zhangsan");
            xml.append("20");
            xml.append("");
            xml.append("");
            xml.append("lisi");
            xml.append("22");
            xml.append("");
            xml.append("");
    
            out.print(xml);
        }
    }
    
    

AJAX乱码问题

  • 测试内容:

    • 发送ajax get请求
      • 发送数据到服务器,服务器获取的数据是否乱码?
      • 服务器响应给前端的中文,会不会乱码?
    • 发送ajax post请求
      • 发送数据到服务器,服务器获取的数据是否乱码?
      • 服务器响应给前端的中文,会不会乱码?
  • 包括还要测试tomcat服务器的版本:

    • tomcat10和tomcat9都要进行测试。
  • 测试结果:

    • 对于tomcat10来说,关于字符集,我们程序员不需要干涉,不会出现乱码。

    • 对于tomcat9来说呢?

      • 响应中文的时候,会出现乱码,怎么解决?

        response.setContentType("text/html;charset=UTF-8");
        
      • 发送ajax post请求的时候,发送给服务器的数据,服务器接收之后乱码,怎么解决?

        request.setCharacterEncoding("UTF-8");
        

AJAX的异步与同步

  • 什么是异步?什么是同步?

    • ajax请求1和ajax请求2,同时并发,谁也不用等谁,这就是异步。(a不等b,b也不等a)
    • 如果ajax请求1在发送的时候需要等待ajax请求2结束之后才能发送,那么这就是同步。(a等待b,或者b等待a,只要发生等待,就是同步。)
  • 异步和同步在代码上如何实现?

    // 假设这个是ajax请求1
    // 如果第三个参数是false:这个就表示“ajax请求1”不支持异步,也就是说ajax请求1发送之后,会影响其他ajax请求的发送,只有当我这个请求结束之后,你们其他的ajax请求才能发送。
    // false表示,不支持异步。我这个请求发了之后,你们其他的请求都要靠边站。都等着。你们别动呢,等我结束了你们再说。
    xhr1.open("请求方式", "URL", false)
    xhr1.send()
    
    // 假设这个是ajax请求2
    // 如果第三个参数是true:这个就表示“ajax请求2”支持异步请求,也就是说ajax请求2发送之后,不影响其他ajax请求的发送。
    xhr2.open("请求方式", "URL", true) 
    xhr2.send()
    
  • 什么情况下用同步?(大部分情况下我们都是使用ajax异步方式,同步很少用。)

    • 举一个例子
      • 用户注册
        • 用户名需要发送ajax请求进行校验
        • 邮箱地址也需要发送ajax请求校验
        • 其他的也可能需要发送ajax请求。。。
        • 并且最终注册按钮的时候,也是发送ajax请求进行注册。
        • 那么显然,注册的Ajax请求和校验的ajax请求不能异步,必须等待所有的校验ajax请求结束之后,注册的ajax请求才能发。

AJAX代码封装

  • AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。

  • 接下来,手动封装一个工具类,这个工具类我们可以把它看做是一个JS的库。我们把这个JS库起一个名字,叫做jQuery。(我这里封装的jQuery只是一个前端的库,和后端的java没有关系,只是为了方便web前端代码的编写,提高WEB前端的开发效率)

  • 手动开发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){
            // 1.
            var xhr = new XMLHttpRequest();
            // 2.
            xhr.onreadystatechange = function(){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 我们这个工具类在封装的时候,先不考虑那么多,假设服务器返回的都是json格式的字符串。
                        var jsonObj = JSON.parse(this.responseText)
                        // 调用函数
                        jsonArgs.success(jsonObj)
                    }
                }
            }
    
            if (jsonArgs.type.toUpperCase() == "POST") {
                // 3.
                xhr.open("POST", jsonArgs.url, jsonArgs.async)
                // 4.
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
                xhr.send(jsonArgs.data)
            }
    
            if (jsonArgs.type.toUpperCase() == "GET") {
                xhr.open("GET", jsonArgs.url + "?" + jsonArgs.data, jsonArgs.async)
                xhr.send()
            }
    
        }
    }
    $ = jQuery
    
    // 这里有个细节,执行这个目的是为了让静态方法ajax生效。
    new jQuery()
    
    
    
  • 使用以上库,怎么用?

    <script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js">script>
    <script type="text/javascript">
        $(function(){
            $("#btn1").click(function(){
                $.ajax({
                    type : "POST",
                    url : "/ajax/ajaxrequest11",
                    data : "username=" + $("#username").val(),
                    async : true,
                    success : function(json){
                        $("#div1").html(json.uname)
                    }
                })
            })
        })
    script>
    

你可能感兴趣的:(Javascript,ajax)