Java Web(十一)Ajax&Axios&JSON

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 对象：用于和服务器交换数据

代码语言：javascript复制

  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");
  }

向服务器发送请求

代码语言：javascript复制

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

获取服务器响应数据

代码语言：javascript复制

  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 文件

代码语言：javascript复制

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

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

代码语言：javascript复制

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

代码语言：javascript复制

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 请求

代码语言：javascript复制

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

发送 psot 请求

代码语言：javascript复制

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

三.JSON

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

1.JSON 基础语法

定义:

代码语言：javascript复制

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

value 的数据类型为:

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

实例:

代码语言：javascript复制

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

获取数据:

代码语言：javascript复制

  变量名.key

代码语言：javascript复制

  json.name

2.JSON 数据和 Java 对象转换

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

代码语言：javascript复制

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

2.Java 对象转 JSON

代码语言：javascript复制

  String jsonStr = JSON.toJSONString(obj);

3.JSON 字符转转 Java 对象

代码语言：javascript复制

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

json java ajax php javascript

0 人点赞