AJAX、Axios、JSON快速学习笔记（建议收藏）

系统管理员 2023-10-04 19:38 8阅读 0赞

#### AJAX快速学习笔记 ####

*  AJAX
 *   *  AJAX概念
     *  AJAX快速入门
 *  Axios
 *   *  Axios异步框架
     *  Axios快速入门
     *  Axios请求方式别名
 *  JSON
 *   *  JSON基础语法
     *  JSON数据和Java对象转换

--------------------

## AJAX ##

### AJAX概念 ###

*  概念：AJAX (**A**synchronous **J**avaScript **A**nd **X**ML):异步的JavaScript和XML
 *  AJAX作用：
    
    1.  与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据：使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了
    2.  异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用校验，等等…
 *  同步和异步  
    ![在这里插入图片描述][8a6c18d408d64b77b2990982d424d7e0.png]

--------------------

### AJAX快速入门 ###

1.  服务端编写AjaxServlet，并使用response输出字符串
2.  客户端**创建XMLHttpRequest对象**:用于和服务器交换数据

var xmlhttp;
    if (window.XMLHttpRequest){
        
    	//code for IE7+, Firefox, Chrome, Opera, Safari
    	xmlhttp = new XMLHttpRequest();
    }else {
        
    	//code for lE6,IE5
    	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

1.  客户端**向服务器发送请求**

xmlhttp.open("GET,"url");
    xmlhttp.send();//发送请求

1.  客户端**获取服务器响应数据**

xmlhttp.onreadystatechange = function(){
        
    	if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
        
    		alert(xmlhttp.responseText);
    	}
    }

--------------------

## Axios ##

### Axios异步框架 ###

Axios 对原生的AJAX进行封装，简化书写

--------------------

### Axios快速入门 ###

1.  引入axios的js文件

1.  使用axios发送请求，并获取响应结果

axios({
        
    	method:"get",
    	url:"http:llocalhost:8080lajax-demo1/aJAXDemo1?username=zhangsan"
    }).then(function (resp){
        
    	alert(resp.data);
    })

axios({
        
    	method:"post",
    	url:"http:/l/localhost:8080/ajax-demo1/aJAXDemo1",
    	data:"username=zhangsan"
    }).then(function (resp){
        
    alert(resp.data);
    });

--------------------

### Axios请求方式别名 ###

![在这里插入图片描述][8506f165b5024144bef804d525867855.png]

*  发送get请求

axios.get(“url")
    	.then(function (resp){
        
    		alert(resp.data);
    });

*  发送post请求

axios.post("url","参数")
    	.then(function (resp){
        
    	alert(resp.data);
    });

--------------------

## JSON ##

*  概念: **J**ava**S**cript **O**bject **N**otation。JavaScript 对象表示法
 *  由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输  
    ![在这里插入图片描述][e72928eee3544f4e9807533e88e86672.png]

--------------------

### JSON基础语法 ###

*  定义:

var 变量名 = {
        "key1": value1,
    			 "key2": value2,
    			 ...
    			 };

> 示例:

var json = {
        "name: "zhangsan",
    			"age": 23,
    			"addr":["北京","上海"","西安"]
    			};

*  获取数据:

变量名.key

json.name

*  value的数据类型为:
    
     *  数字（整数或浮点数)
     *  字符串（在双引号中)
     *  逻辑值 (true或false)
     *  数组 (在方括号中)
     *  对象（在花括号中)
     *  null

--------------------

### JSON数据和Java对象转换 ###

*  请求数据:JSON字符串转为Java对象
 *  响应数据:Java对象转为JSON字符串  
    ![在这里插入图片描述][dfb98779820a40659510a7ecb9bd3ced.png]

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

*  使用:

1.  导入坐标

<dependency>
    	<groupld>com.alibaba</groupld>	
    	<artifactld>fastjson</artifactld>	
    	<version>1.2.62</version>
    </dependency>

1.  Java对象转JSON

String jsonStr = JSON.toJSONString(obj);

1.  JSON字符串转Java对象

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

--------------------

[8a6c18d408d64b77b2990982d424d7e0.png]: https://img-blog.csdnimg.cn/8a6c18d408d64b77b2990982d424d7e0.png
[8506f165b5024144bef804d525867855.png]: https://img-blog.csdnimg.cn/8506f165b5024144bef804d525867855.png
[e72928eee3544f4e9807533e88e86672.png]: https://img-blog.csdnimg.cn/e72928eee3544f4e9807533e88e86672.png
[dfb98779820a40659510a7ecb9bd3ced.png]: https://img-blog.csdnimg.cn/dfb98779820a40659510a7ecb9bd3ced.png