AJAX
一、AJAX简介
1.概念
AJAX(Asynchronous Javascript And XML):异步的JavaScript和XML。
2.作用
(1)AJAX可以与服务器进行数据交换(★)
通过AJAX可以给服务器发送请求,并获取服务器的响应数据。正因如此HTML+AJAX就可以替换JSP页面了。
(2)异步交互
可在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页,如:搜索联想(如图)、注册时的用户名存在校验等。
二、AJAX的使用
1.服务端代码
编写AjaxServlet;
2.客户端代码(写在html文件中)
(w3school可查)
(1)创建XMLHttpRequest对象(用于和服务器交换数据):
var xhttp; if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); }(2)向服务器发送请求:
xhttp.open("GET", "ajax_info.txt", true); xhttp.send();【tips】open()方法介绍:
open(method, url, async) |
规定请求的类型:
|
xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } };
三、Axios异步框架(★)
Axios异步框架实现了对AJAX的封装,简化代码的书写,实现ajax与服务器交换数据。
1.Axios的使用(写在html中)
(1)引入Axios的js文件:
<script src="js/axios-0.18.0.js"></script>
(2)使用axios发送请求并获取响应数据
1)get
//1.get axios({ method:"get", url:"http://localhost:8080/ajax_Demo/axiosServlet?username=zhangsan" }).then(function(resp){ alert(resp.data); })
2)post
//2.post axios({ method:"post", url:"http://localhost:8080/ajax_Demo/axiosServlet" data:"username=zhangsan" }).then(function(resp){ alert(resp.data); })
2.Axios请求方式别名
(1)axios. get (url[, config])
axios.get("http://localhost:8080/ajax_Demo/axiosServlet?username=zhangsan").then(function (resp){ alert(resp.data); })(2)axios. delete (url[, config])
(3)axios. post (url[, data[, config]])
axios.post("http://localhost:8080/ajax_Demo/axiosServlet","username=zhangsan").then(function (resp){ alert(resp.data); })(4)axios. put (url[, data[, config]])
(5)axios. patch (url[, data[, config]])
(6)axios. head (url[, config])
(7)axios. options (url[, config])
四、JSON(★)
JSON(JavaScript Object Notation):JS对象表示法,其语法简单,层次结构鲜明,现多用于作为数据载体,进行数据传输。
1.基础语法
(1)定义:键要用""括起来:
【tips】value的数据类型可以为:数字(整型或浮点数)、字符串("")、boolean、数组(在[]中)、Java对象(在{}中)、null。
示例:
(2)获取数据:使用 变量名.键名 通过键获取值。
示例:json.name
2.JSON数据和Java对象的转换
(1)为什么要进行二者间的转换?
服务器接收JSON数据转成Java对象,服务器把Java对象转换成JSON数据发送给客户端。
(2)Fastjson(★)
Fastjson是阿里巴巴提供的一个Java语言编写的高性能、功能完善的JSON库,可以实现JSON数据和Java对象的相互转换。
1)导入坐标
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency>
2)Java对象转JSON:toJSONString()方法
String jsonStr = JSON.toJSONString(obj);
3)JSON转Java对象:parseObject()方法
Object obj = JSON.parseObject(jsonStr,Obj.class);