AJAX技术详解：实现原理、jQuery应用与JSON数据交互-优快云博客

本文链接：https://blog.youkuaiyun.com/aaaarrrrrr/article/details/110927882

本文详细介绍了AJAX技术的工作原理，包括原生JavaScript和jQuery的实现方式，以及JSON数据的存储、交换和与服务器交互的过程。还涉及了如何使用Gson和Jackson进行JSON数据的Java对象转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX

1.AJAX是一种无需加载整个网页的情况下，能够更新部分网页的技术，通过Ajax可以使网页实现异步更新。
在这里插入图片描述

实现方式

1.原生js实现(了解)

 <script>
        function func() {
        //   发送异步请求，
        //    1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        //    2.建立连接
        /*
        参数：
        1.请求方式get,post
        2.请求的url路径
           1.get方式：请求参数在url后面连接，send方法为空参
           2.post方式：请求参数在send方法中定义 url后面不需要拼接参数
        3.同步或异步的请求 true：为异步，false:为同步
         */
            xmlhttp.open("GET","test1.txt",true);
        //    3.发送请求
            xmlhttp.send();

        //    4.接受并处理来自服务器的相应结果
        //    获取方式：xmlhttp.responseText
        //    什么时候获取？当服务器响应式成功后在获取

            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange
            xmlhttp.onreadystatechange=function()
            {
                //判断 readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //获取服务器的响应结果
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }

        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="func()">
</body>

2.jQuery实现方式

1.$,ajax()
	1.语法:$.ajax({键值对})；

 $.ajax({
                url:"ajaxServlet", //亲请求路径
                type:"POST" ,//默认为GET
                // data:"username=jack&age=23" //请求参数
               data:{"username":"name","age":23},
                success:function () {
                    alert("jack")
                },//相应成功后回调函数
                error:function () {

                },//表示如果请求响应出现错误，会执行的回调函数
                dataType:"text" //设置接受到的响应数据的格式
            })

2.$.get()发送get请求
	1.语法：$.get(url,[data],[callback],[type])
	//url:请求路径
	//data:请求参数
	//callback:回调函数
	//type:响应结果的类型

3.$.post()

json

var p = {
"name":"张三"，”age":21,"gender":"男"
}

1.现存储和交换于多用于存储和交换信息的语法
进行数据的传输
2.JSON 语法是 JavaScript 对象表示法语法的子集。

基本语法

数据在名称/值对中
1、值的类型：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null
数据由逗号分隔
花括号保存对象
方括号保存数组

获取数据

1.json对象.键名
2.json对象[“键名”]
3.数组对象[索引]

1.readvalue(json字符串数据，Class)

json数据和Java对象的相互转换

( 常见的json解析器：Jsonlib,Gson,Fastjson,jackson)

1.json转换为java对象

1.1使用步骤

1.导入jackson的相关jar包
2.创建jackson的核心对象 objectMapper
3.调用objectMapper的相关方法进行转化

2.java对象转换为Json

2.1.使用步骤