Ajax&JSON&Axios

1. Ajax

1.1 简介

  • AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

  • AJAX = 异步 JavaScript 和 XML。

    • 同步：加锁，排队，一条线执行
    • 异步：多条线执行

  • AJAX 是一种用于创建快速***页的技术。

  • 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

当你在百度搜索栏中输入一些内容后，下面就出现一些候选相关选项，这就是ajax实现的：没有重载页面，但是更新了数据

1.2 XMLHttpRequest 对象

  • XMLHttpRequest 是 AJAX 的基础，所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
  • 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
  • XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest使用流程

  • 创建XMLHttpRequest对象
  • 请求(同步或者异步请求)
  • 响应

1.2.1 XMLHttpRequest 的open方法

通过open方法发送请求，实现异步传输。


注意：默认方法是异步的，也就是开子线程，同步方法已经被废弃，

1.2.2 ajax准备状态码

request.readyState
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

最常用的就是与http响应状态码“request.status == 200 && request.readyState == 4”进行请求成功与否的验证。

1.2.3 获取响应数据

通过request.responseText获取

1.3 案例（GET）

1.3.1 html页面

form表单不通过action发送请求，而是通过提交触发js代码，在js中发送异步请求

<form action="" method="get">
	用户名：<input type="text" name="username" id="username"/>
	密码：<input type="password" name="password" id="password"/>
	<input type="button" value="登录" onclick="getlogin()"/>
</form>

1.3.2 js中的ajax

<script type="text/javascript"> function getlogin() { //1.获取表单的值 var username = document.getElementById('username').value; var password = document.getElementById('password').value; //注意需要将参数拼接 var params = 'username=' + username + '&password=' + password; console.log(params); //2.创建ajax 对象XMLHttpRequest var request = new XMLHttpRequest(); //3.发送请求,把请求参数放在?号后面 request.open('get','${pageContext.request.contextPath}/LoginServlet?' + params); request.send(); //get方法不需要传参，post需要 //4.监听准备状态的改变（这种写法表明：js的属性可以是方法） request.onreadystatechange = function(){ console.log('准备状态码' + request.readyState + ' - ' + '响应状态码' + request.status); if(request.readyState == 4 && request.status == 200){ var rspTxt = request.responseText; console.log('服务器响应：' + rspTxt); if(rspTxt == 'success'){ //success是servlet返回的响应 alert('登录成功'); }else{ alert('登录失败'); } } } } </script>

1.3.3 loginServlet

对于服务器来说，ajax请求和普通请求都是一样的，没有区别

1.4 案例（POST）

ajax的post请求流程

  • a.创建请求对象
  • b.连接
  • c.设置content-type请求头，如果不设置请求头，发送请求会失败
  • d.发送请求，传递请求参数
  • e.接收响应

POST跟GET差不多，区别就在于

  • 需要设置content-type请求头
  • 在send发送参数，而不是拼接在url后面

1.4.1 js中的ajax

其他都一样

2. JSON

2.1 简介

  • JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言
  • JSON 具有自我描述性，更易理解

无论在任何语言中，JSON几乎成了网络中最广泛的数据交互手段。

2.2 入门

2.2.1 JSON基本数据形式–字典

键值对

{ "firstName":"Bill" , "lastName":"Gates" }

相当于Java中的map，python中的字典。

如果你学习过python，那么只要把JSON当成python字典来看即可，他们的“组合使用方式”基本一致。

2.2.2 JSON复合嵌套数据形式

就像是函数嵌套，只要符合最基本的

{ "firstName":"Bill" , "lastName":"Gates" }

如何嵌套，就看你的想象力。

数组形式：

[{ "firstName":"af" , "lastName":"al" },
{ "firstName":"bf" , "lastName":"bl" }]

字典套字典数组：

{"people":[
	{ "firstName":"af" , "lastName":"al" },
	{ "firstName":"bf" , "lastName":"bl" }
	]
}

其实就是数据结构的组合使用，只要符合键值对的形式，任意套用都可以。

2.3 客户端JSON处理 – js

  • JSON.parse(str) ------- 将str解析为JSON
  • JSON.stringify(str) -------将str字符串化

3. 服务端JSON处理 – jackson

Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json字符串和xml文档，同样也可以将json、xml转换成Java对象。Jackson所依赖的jar包较少，简单易用并且性能也要相对高些，并且Jackson社区相对比较活跃，更新速度也比较快。

jackson特点

  • 容易使用 - jackson API提供了一个高层次外观，以简化常用的用例。
  • 无需创建映射 - API提供了默认的映射大部分对象序列化。
  • 性能高 - 快速，低内存占用，适合大型对象图表或系统。
  • 干净的JSON - jackson创建一个干净和紧凑的JSON结果，很容易阅读。
  • 不依赖 - 除了JDK，不需要任何其他的库，
  • 开源代码 - jackson是开源的，可以***。

在maven仓库下载即可

3.1 案例

相关方法：

创建“对象映射”对象，该对象提供对象与JSON的转换：

ObjectMapper mapper = new ObjectMapper();

转换方法：


//对象转JSON String
mapper.writeValueAsString(Object);

//JSON String 转对象
mapper.readValue(JSONString, Object.class);

案例：

//准备对象
User user1 = new User ("shunxu","123456");

//对象转字符串
String string = mapper.writeValueAsString(user1);


String str = "{\"username\":\"shunxu\",\"password\":\"123456\"}";
System.out.println(str);

User user2 = mapper.readValue(str, User.class);
System.out.println(user2);

writeValueAsString(Object) 可以传对象，map，list等多种方式。

3.1.1 model

3.1.2 model转JSON

4. ajax处理JSON

原理：

  • Servlet：将model的数据写为map，利用jackson将map内容转为json字符串给前端。
  • 前端：利用js将json字符串转为json

Servlet

注意将contentType设为text/json


JS

<script type="text/javascript"> function postlogin() { //1.获取表单的值 var username = document.getElementById('username').value; var password = document.getElementById('password').value; var params = 'username=' + username + '&password=' + password; console.log(params); //2.创建XMLHttpRequest对象 var request = new XMLHttpRequest(); //3.发送请求,把请求参数放在send方法中 request.open('post','${pageContext.request.contextPath}/LoginServlet'); //设置请求头,一定要设置请求头 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); request.send(params); //4.监听准备状态的改变 request.onreadystatechange = function(){ console.log(request.readyState + ' - ' + request.status); if(request.readyState == 4 && request.status == 200){ var rspTxt = request.responseText; console.log(rspTxt); //把返回的字符串转成json对象 var jsonObj = JSON.parse(rspTxt); console.log(jsonObj); var tip = document.getElementById('tip');//添加一个span标签用于显示登录状态 //通过对象点属性的方式取值 if(jsonObj.success == 1){ tip.innerHTML = "登录成功"; }else{ tip.innerHTML = jsonObj.message; } } } } </script>

5. axios(重点)

实际开发中，更多的是使用ajax的封装，axios就是其中的佼佼者。

请移步官网或中文网进行学习，本节只做初学基础重点总结。

axios官网

axios中文网

5.1 简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

安装
使用npm：

  • $ npm install axios

使用bower：

  • $ bower install axios

使用cdn：

  • <script src=“https://unpkg.com/axios/dist/axios.min.js”></script>

5.2 基本使用方法

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

5.3 重点笔记

RESTful与axios

  • post和put：

    • js中使用method:’post/put’,data:{x:’xx’}

  • get/delete：

    • js中使用method:’get/delete’,parmas:{x:’xx’}

  • Const instance = axios.create({})

    • 对xhr的二次封装，通过定制不同的axios来解决一个前端多个后台多个API的问题。

  • 处理链

    • 请求***先入后出，响应***先入先出