AJAX&JSON基础入门与提升

一时失言乱红尘 2022-12-19 06:17 189阅读 0赞

> 身材不好就去锻炼，没钱就努力去赚。别把窘境迁怒于别人，唯一可以抱怨的，只有不够努力的自己。你好，我是梦阳辰！快来和我一起学习吧！

### 文章目录 ###

*  01.AJAX
 *  02.JSON

# 01.AJAX #

**1.概念**  
ASynchronous Javascript And XML异步的Javascript和XML1，异步和同步:客户端和服务器端相互通信的基础上  
客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。  
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页(不使用Ajax)如果需要更新内容，必须重载整个网页页面。  
**2.实现方式：**  
1.原生的JS实现方式（了解即可）

//1.创建核心对象
    var xmlhttp; if (window.XMLHttpRequest)
    { 
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    { 
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.建立连接
    xmlhttp.open("GET","ajaxServlet?uername=tom",true);
    第二个参数为:url，get方式请求参数在url后面拼接。
    post在send方法中。
    第三个参数为:true表示异步，flase表示同步。
    //3.发送请求
    xmlhttp.send(); //4.接收并处理来自服务器的响应结果。 //判断，当服务器响应成功后再获取。 mlhttp.onreadystatechange=function()
    { 
    //就绪状态readyState是否为4，判断响应状态码是否为200 if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {     //获取服务器响应结果
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }

**2.jquer实现方式。**  
引入jquery.js文件。

1.$.ajax()
    
    2.$.get()
    3.$.post()

# 02.JSON #

**1.什么是JSON**  
JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式，目前使用特别广泛。

采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JS语言中，一切都是对象。因此，任何JS支持的类型都可以通过JSON来表示，例如字符串、数字、对象、数组等。看看他的要求和语法格式:

**对象表示为键值对**

**数据由逗号分隔**

**花括号保存对象**

**方括号保存数组**

数组（在方括号中)"persons":[{ },{ }] 还可以嵌套：{ “persons":[{ },{ }]}
    对象(在花括号中)"address" :{ province”":“陕西”...}

JSON键值对是用来保存JS对象的一种方式，和JS对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号""包裹,使用冒号:分隔,然后紧接着值:

{ "name":"mengyangchen"}
    { "age":"18"}

JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。  
![在这里插入图片描述][20201105201636903.png_pic_center]  
**JSON和JS对象互转**  
要实现从JSON字符串转换为JS对象，使用JSON.parse()方法:

var obj = 35ON.parse(' { "a": "Hello", "b":"world"}');
    //结果是（a: 'Hello'，b: 'World')

要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法:

var json = 3SON.stringify({ a: 'Hello', b: ‘world');
    //结果是‘("a":"Hello"，"b":""orld" ),

**获取数据：**  
1.json对象.键名

2.json对象\[“键名”\]

3.数组对象\[索引\]  
**JSON数据和Java对象的相互转换**  
JSON解析器  
常见的解析器：Jsonlib,Gson,fastjson,jackson.

**1.json转为java对象。**  
使用步骤：  
1.导入jackson的相关jar包。  
2.创建jackson核心对象ObjectMapper.  
3.调用ObjectMapper的相关方法进行转换。

readValue(json字符串数据，Class)

**2.java对象转换成json。**  
使用步骤：  
1.导入jackson的相关jar包。  
2.创建jackson核心对象ObjectMapper.  
3.调用ObjectMapper的相关方法进行转换。

writevalue(参数1,obj):  
**参数1∶**  
File :将obj对象转换为sON字符串，并保存到指定的文件中

writer∶将obj对象转换为3sON字符串，并将json数据填充到字符输出流中

outputstream : 将obj对象转换为SON字符串，并将json数据填充到字节输出流中

writevalueAsString(obj):将对象转为json字符串。  
**注解：**  
1.@JsonIgnor:排除属性  
2.@JsonFormat：属性值格式化。

> 一时的忍耐是为了更广阔的自由，一时的纪律约束是为了更大的成功。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 1]

[20201105201636903.png_pic_center]: /images/20221120/c27fec67f00746efa32fe4a10cd3d06f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/2020110811275195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020110811275123.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f,size_16,color_FFFFFF,t_70#pic_center