原生ajax_axios框架_json传输字符串

AJAX技术

相关概念

简述：AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和XML。

作用：

• 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据。
• 后台发送：浏览器的请求是后台js发送给服务器的，js会创建单独的线程发送异步请求，这个线程不会影响浏览器的线程运行。
• 局部刷新：浏览器接收到结果以后进行页面局部刷新

原生AJAX

let xmlhttp = new XMLHttpRequest()
xmlhttp.open("GET",“url");
xmlhttp.send();//发送请求
xmlhttp.onreadystatechange = function () {
    //readyState 响应，存有XMLHttpRequest的状态。从0到4发生变化。
    //分别为0请求未初始化、1服务器连接已建立、2请求已接收、3请求处理中、4请求完成且响应已就绪
    //status为HTTP响应状态码
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200{
        alert(xmlhttp.responseText);
	}
};

AXIOS框架

相关概念

概述：Axios 是一个基于promise网络请求库，作用于node.js和浏览器中。在服务端它使用原生 node.js的http模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

使用流程

<!--1. 引入axios的js文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
<!--2. 使用axios发送GET请求，并获取响应结果-->
<script>
	axios({
        method: "GET",
        url: "http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(resp => {
        // resp.data: 响应数据
        alert(resp.data);
    });
</script>
<!--3.使用axios发送POST请求，并获取响应结果-->
<script>
axios({
    method: "POST",
    url: "http://localhost:8080/ajax-demo/axiosServlet",
    data: "username=zhangsan"
}).then(resp => {
    alert(resp.data);
});   
</script>

请求别名

方法名	作用
get(url)	发起GET方式请求
post(url,请求参数)	发起POST方式请求

axios.get("url?key1=value1&key2=value2...")
	.then(resp => {
   	 	alert(resp.data);
	});

axios.post("url", "key1=value1&key2=value2... ")
    .then(resp => {    
    	alert(resp.data);
	});

请求配置

axios({
    method: "POST",    //请求方式
    url: "axiosServlet",    //服务器URL
    baseURL: 'https://localhost:8080/demo1/',    //baseURL将自动加在url前(相对路径时)
 	headers: {'X-Requested-With': 'XMLHttpRequest'},    // 自定义请求头
    params: {ID: 12345},    //params是与请求一起发送的URL参数
    data: "username=zhangsan",    //data是作为请求体被发送的数据
    timeout: 1000,    //请求超时毫秒数，默认值是0(永不超时)
    responseType: 'json',    //responseType表示浏览器将要响应的数据类型，默认值json
    
})

响应结构

response = {
  data: {},    //data由服务器提供的响应
  status: 200,    //status来自服务器响应的HTTP状态码
  statusText: 'OK',    //statusText来自服务器响应的HTTP状态信息
  headers: {},    
  //headers是服务器响应头,名称都是小写，而且可以使用方括号语法访问。
  //如：response.headers['content-type']。
  config: {},    //config是axios请求的配置信息
  request: {}    //request是生成此响应的请求
}

数据格式

注意：默认情况下，axios将 JavaScript 对象序列化为JSON 。 要以application/x-www-form-urlencoded格式发送数据，您可以使用以下选项之一：

//第一种，请注意不是所有的浏览器都支持URLSearchParams 
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

//第二种，请求体直接以字符串形式书写
axios({
    method: "POST",
    url: "http://localhost:8080/ajax-demo/axiosServlet",
    data: "username=zhangsan&password=123"
})

JSON概述

概念：JavaScript Object Notation。JavaScript对象表示法，简单理解JSON是把JS对象变成字符串由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

格式：

//js对象
{
 name: "LXL",
	age: 21,
 address: "广东广州"
}
//JSON字符串
'{
	"name": "LXL",
	"age": 21,
	"address": "广东广州"
}'

JSON与JS对象

JSON.parse(obj_json); //可以将json字符串转换成json对象 
JSON.stringify(obj); //可以将json对象转换成json对符串 
//注：ie8(兼容模式),ie7和ie6没有JSON对象
//推荐采用JSON官方的方式，引入json.js。

$.parseJSON(obj_json); 
//jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 

JSON与Java对象

JSON转换工具概述：JSON的转换工具是通过Java封装好的一些jar工具包，直接将Java对象或集合转换成JSON格式的字符串，也可以将 JSON格式的字符串转成Java对象。

常见JSON工具：

工具名称	说明
Jsonlib	Java类库，需导入较多jar包
Gson	Google提供的简易JSON转换工具
Fastjson	alibaba提供的高性能JSON转换工具
Jackson	免费开源的JSON转换工具，SpringMVC默认使用

Fastjson概述：阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。

使用流程：

1. Maven中导入坐标

   <dependency>
       <groupId>com.alibaba</groupId>								<artifactId>fastjson</artifactId>
       <version>1.2.62</version>
   </dependency>
   

2. Java对象转JSON

   String jsonStr = JSON.toJSONString(obj);
   

3. JSON字符串转Pojo对象

   User user = JSON.parseObject(jsonStr, User.class);
   

4. JSON字符串转Map对象

   Map<String,Object> map=JSON.parseObject(jsonStr,Map.class);
   

5. JSON字符串转List对象

   List list=JSON.parseObject(jsonStr,List.class);
   
   List<Integer> list=JSON.parseArray(jsonStr,Integer.class);
   //仅适用于数组类型转为的JSON字符串
   

这篇好文章是转载于：学新通技术网