[JavaScript知识库] 原生ajax_axios框架

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 原生ajax_axios框架_json传输字符串 -> 正文阅读

[JavaScript知识库]原生ajax_axios框架_json传输字符串

文章目录

AJAX技术

原生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框架

使用流程

<!--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字符串的相互转换。

使用流程：
Maven中导入坐标
<dependency>
    <groupId>com.alibaba</groupId>								<artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>
Java对象转JSON
String jsonStr = JSON.toJSONString(obj);
JSON字符串转Pojo对象
User user = JSON.parseObject(jsonStr, User.class);
JSON字符串转Map对象
Map<String,Object> map=JSON.parseObject(jsonStr,Map.class);
JSON字符串转List对象
List list=JSON.parseObject(jsonStr,List.class);

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