AJAX和JSON的论述

最新推荐文章于 2024-05-18 18:01:48 发布

张屿禾

最新推荐文章于 2024-05-18 18:01:48 发布

阅读量136

点赞数

文章标签：服务器 javascript ajax json

本文链接：https://blog.csdn.net/LM_Hh/article/details/128041091

版权

AJAX

1.1概念：

ASynchronous JavaScript And XML 异步的Javascript和XML
- 客户端和服务器端相互通信的基础上
- 客户端必须等待服务器的响应。在等待的期间客户端不能做其他操作
- 客户端必须要等待服务器的响应。在服务器处理请求的过程中，客户端可以进行其他的操作

Ajax是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

提升用户的体验

实现方式：

原生实现js的方式：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <script>
     //定义方法
     function fun() {
         //发送异步请求
         //1.创建核心对象
         var xmlHttp;
         if (window.XMLHttpRequest) {
             xmlHttp = new XMLHttpRequest();
         } else {
             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         //2建立连接
         /*
         *
          open(method, url, async)
            规定请求的类型
             method：请求的类型：GET 还是 POST
             * get 方式：  请求参数在url后拼接，send为空参
             *   post方式：请求参数在send方法中自定义
             url：服务器（文件）位置
             async：true（异步）或 false（同步）
         * */
         xmlHttp.open("GET", "ajaxServlet?username=tom", true);
         //3发送请求
         xmlHttp.send();
         //4接受并处理来自服务器的响应结果
             //获取方式：xmlHttp.responseText;
         //什么时候获取？当服务器响应成功后在获取
 
         //当xmlHttp对象的就绪状态改变时，触发事件  onreadystatechange
 
         xhttp.onreadystatechange = function () {
             if (this.readyState == 4 && this.status == 200) {
                //获取服务器的响应结果
               var responseText= xmlHttp.responseText;
               alert(responseText);
             }
         }
     }
 </script>
 <body>
 <input type="button" value="发送异步请求" οnclick="fun();" >
 <input type="text">
 </body>
 </html>

JQuery实现方式：

$.ajax( )

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <script src="js/jquery-2.1.0.min.js"></script>
 <script>
   //定义方法
   function fun() {
     //使用$.ajax()发送异步请求
     $.ajax({
       url:"ajaxServlet",//请求路径
       type:"POST",//请求方式
       // data:"username=li&age=17",//请求参数
       data:{"username":"li","age":17},
       success:function (data) {
         alert(data)
       },//响应成功后的函数回调
             dataType:"text" //设置接受到的响应数据格式
     })
   }
 </script>
 <body>
 <input type="button" value="发送异步请求" οnclick="fun();" >
 <input type="text">
 </body>
 </html>

$.get( )

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <script src="js/jquery-2.1.0.min.js"></script>
 <script>
   //定义方法
   function fun() {
     //使用$.ajax()发送异步请求
 $.get("ajaxServlet",{username:"li"},function (data){
     alert(data);
 },"text")
 
   }
 </script>
 <body>
 <input type="button" value="发送异步请求" οnclick="fun();" >
 <input type="text">
 </body>
 </html>

$.post( )

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <script src="js/jquery-2.1.0.min.js"></script>
 <script>
   //定义方法
   function fun() {
     //使用$.ajax()发送异步请求
 $.post("ajaxServlet",{username:"li"},function (data){
     alert(data);
 },"text")
 
   }
 </script>
 <body>
 <input type="button" value="发送异步请求" οnclick="fun();" >
 <input type="text">
 </body>
 </html>

$.ajax()

$.ajax({键值对})

属性	说明
url	请求路径
type	请求方式
data	请求参数
success:function(){}	响应成功后的回调函数
error:function (){}	出错后的回调函数

$.get()

语法	$.get(url,[data],[callback],[type])
属性	说明
url	请求路径
data	请求参数
callback	回调函数
type	响应结果的类型

$.post()

语法	$.post(url,[data],[callback],[type])
属性	说明
url	请求路径
data	请求参数
callback	回调函数
type	响应结果的类型

JSON：

概念：

Javascript Object Notation Javascript对象表示法

 -    Person()  p=new Person(  );
 -        p.setName("li");
 -        p.setAge(17);
 -        p.setGender(女);

var p={"name":"li","age":17,"Gender","女"}
- json现在多用于存储和交换文本信息
- 进行数据传输
- JSON比XML更小，更快，更容易解析

语法：

基本规则

数据在名称/值对中：json数据是由键值对构成的

值的取值类型：
语法：

语法	基本规则
数据在名称/值对中	json数据是由键值对构成的
值得取值类型：
数字	（整数或浮点数）
字符串	（在双引号中）
逻辑值	（true或false）
数组	（在方括号中）{“persons”:[{},{}]}
对象	（在花括号中）{“address”:{“province”:“南京”…}}
null

数据由逗号分隔	多个键值对由逗号分隔
花括号保存对象	使用{}定义json格式
方括号保存数组	[]
获取数据：
json对象	.键名
json对象	[“键名”]
数组对象	[索引]

遍历：
```
 for (let i = 0; i < ps.length; i++) {
   let p=  ps[i];
     for (var personKey in p) {
         alert(personKey+":"+p[personKey])
     }
 }
```
JAVA对象转换JSON

使用步骤
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
  1. 转换方法：
    - writerValue(参数1,obj):
      - 参数1:
        
        writeValue(参数1,obj): 参数1： File:将obj对象转换为JSON字符串，并保存到指定的文件中 Writer:将obj对象转换为JSON字符串，并将json数据填充到字符输出流中 OutputStream:将obj对象转换为JSON字符串，并将JSon数据填充到字节输出流中
        
        writeValueAsString(obj):将对象转为json字符串
  2. 注解：
    1. @JsonIgnore:排除属性
    2. @JsonFormat: 属性值要格式化 @JsonFormat(pattern = "yyyy-MM-dd")
  3. 复杂java对象转换
    1. List:数组
    2. Map:对象格式一致