Java Web(十一)Ajax&Axios&JSON

作者：浅辄

2022-11-15
吉林
本文字数：1387 字
阅读完需：约 5 分钟

Ajax&Axios&JSON

概念:AJAX(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML
AJAX 作用:1.与服务器进行数据交换：通过 AJAX 可以给服务器发送请求，并获取服务器响应的数据
使用了 AJAX 和服务器进行通信，就可以使用 HTML+AJAX 来替换 JSP 页面了
2.异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等.

一.AJAX

1.同步异步

1.1 同步

1.2 异步

2.快速入门

编写 AjaxServlet,并使用 response 输出字符串
创建 XMLHttpRequest 对象：用于和服务器交换数据

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

复制代码

向服务器发送请求

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

复制代码

获取服务器响应数据

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

复制代码

二.AXIOS

1.Axios 异步框架

Axios 对原生的 AJAX 进行封装，简化书写
官网：https://www.axios-http.cn

2.快速入门

2.1 引入 axios 的 js 文件

<script src="js/axios-0.18.0.js"></script>

复制代码

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

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

复制代码

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

复制代码

3.Axios 请求方式别名

为了方便起见，Axos 已经为所有支持的请求方法提供了别名，
axios.get(url[,config])axios.delete(url[,config])axios.head(url[,config])axios.options(url[,config])axios.post(url[,data[,config]])axios.put(url[,data[,config]])axios.patch(url[,data[,config]])

发送 get 请求

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

复制代码

发送 psot 请求

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

复制代码

三.JSON

概念：JavaScript Object Notation。JavaScript 对象表示法

1.JSON 基础语法

定义:

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

复制代码

value 的数据类型为:

数字（整数或浮点数）字符串（在双引号中）逻辑值(true 或 false)数组（在方括号中）对象（在花括号中）null

实例:

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

复制代码

获取数据:

  变量名.key

复制代码

  json.name

复制代码

2.JSON 数据和 Java 对象转换

请求数据：JSON 字符串转为 Java 对象
响应数据：Java 对象转为 JSON 字符串
Fastjson 是阿里巴巴提供的一个 Java 语言编写的高性能功能完善的 JSON 库，是目前 Java 语言中最快的 JSON 库，可以实现 Java 对象和 SON 字符串的相互转换。
使用 1.导入坐标

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

复制代码

2.Java 对象转 JSON

  String jsonStr = JSON.toJSONString(obj);

复制代码

3.JSON 字符转转 Java 对象

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

复制代码

发布于: 刚刚阅读数: 3

浅辄

关注

大丈夫生于天地之间,岂能郁郁久居人之下 2022-11-08 加入

阿里云技术博主认证

发布

暂无评论

创作场景

Java Web(十一)Ajax&Axios&JSON

Ajax&Axios&JSON

一.AJAX

1.同步异步

1.1 同步

1.2 异步

2.快速入门

二.AXIOS

1.Axios 异步框架

2.快速入门

2.1 引入 axios 的 js 文件

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

3.Axios 请求方式别名

三.JSON

1.JSON 基础语法

2.JSON 数据和 Java 对象转换

浅辄

评论