ajax-js实现
概念
AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML
作用
1、与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
Servlet调用完业务逻辑层后将数据存储到域对象中，然后跳转到指定的jsp页面，在页面上使用EL表达式和JSTL标签库进行数据的展示。
使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了.
2、异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等
服务端实现
1. 编写AjaxServlet，并使用response输出字符串
在项目的创建 com.test.web.servlet，并在该包下创建名为 AjaxServlet的servlet
1 @WebServlet("/ajaxServlet") 2 public class AjaxServlet extends HttpServlet { 3 @Override 4 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 5 //1. 响应数据 6 response.getWriter().write("hello ajax~"); 7 } 8 @Override 9 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 10 this.doGet(request, response); 11 } 12 }
在webapp下创建名为01-ajax-demo1.html的页面，在该页面书写ajax代码
2.创建 XMLHttpRequest 对象：用于和服务器交换数据
1 var xhttp; 2 if (window.XMLHttpRequest) { 3 xhttp = new XMLHttpRequest(); 4 } else { 5 // code for IE6, IE5 6 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); 7 }
3. 向服务器发送请求
1 //建立连接 2 xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet"); 3 //发送请求 4 xhttp.send();
4. 获取服务器响应数据
1 xhttp.onreadystatechange = function() { 2 if (this.readyState == 4 && this.status == 200) { 3 // 通过 this.responseText 可以获取到服务端响应的数据 4 alert(this.responseText); 5 } 6 };
完整代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 //1. 创建核心对象 11 var xhttp; 12 if (window.XMLHttpRequest) { 13 xhttp = new XMLHttpRequest(); 14 } else { 15 // code for IE6, IE5 16 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); 17 } 18 //2. 发送请求 19 xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet"); 20 xhttp.send(); 21 22 //3. 获取响应 23 xhttp.onreadystatechange = function() { 24 if (this.readyState == 4 && this.status == 200) { 25 alert(this.responseText); 26 } 27 }; 28 </script> 29 </body> 30 </html>
ajax的状态码(readyState)
0 表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法
1 表示open方法已经调用，但未调用send方法（已创建，未发送）
2 表示send方法已经调用，其他数据未知
3 表示请求已经成功发送，正在接受数据
4 表示数据已经成功接收。
响应状态码(status)
200：请求成功
404：请求资源未找到
500：内部服务器错误
ajax的异步和同步
ajax.open(method,urL,async)
async：设置同步代码执行还是异步代码执行
true代表异步，默认是异步
false代表同步
例：ajax.open("get","ajax",true);
ajax的基本流程
1）创建ajax引擎对象
2）复写onreadystatement函数
3）判断ajax状态码
4）判断响应状态码
5）获取响应内容(响应内容的格式)
普通字符串：responseText
json(重点)：responseText
其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法
将接收的字符串数据直接转换为js的对象
json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……
}
XML数据：responseXML.返回document对象
通过document对象将数据从xml中获取出来
6）处理响应内容(js操作文档结构)
7）发送请求
get请求
get的请求实体拼接在URL后面，？隔开，键值对
ajax.open("get","url");
ajax.send(null);
post请求
有单独的请求实体
ajax.open("post", "url");
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("name=张三&pwd=123");
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <!-- 声明js代码域 --> <script type="text/javascript"> function getData(){ //创建ajax引擎对象 var ajax; if(window.XMLHttpRequest){//火狐 ajax=new XMLHttpRequest(); }else if(window.ActiveXObject){//IE ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //复写onreadystatement函数 ajax.onreadystatechange=function(){ //判断Ajax状态吗 if(ajax.readyState==4){ //判断响应状态吗 if(ajax.status==200){ //获取响应内容 var result=ajax.responseText; //处理响应内容 //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML=result; }else if(ajax.status==404){ //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="请求资源不存在"; }else if(ajax.status==500){ //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="服务器繁忙"; } }else{ //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>"; } } //发送请求 //get方式:请求实体拼接在URL后面 ajax.open("get","ajax?"+data); ajax.send(null); //post方式：请求实体需要单独的发送 ajax.open("post", "ajax"); ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send("name=张三&pwd=123"); } </script> <style type="text/css"> #showdiv{ border:solid 1px; width:200px; height:100px; } </style> </head> <body> <h3>欢迎登录403峡谷</h3> <hr> <input type="button" value="测试 " onclick="getData()"/> <div id="showdiv"></div> </body> </html>
Axios 异步框架
Axios 对原生的AJAX进行封装，简化书写
官网：https://www.axios-http.cn
Axios 快速入门
1. 引入 axios 的 js 文件
<script src="js/axios-0.18.0.js"></script>
2. 使用axios 发送请求，并获取响应结果
发送get请求
axios({ method:"get", url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan" }).then(function (resp){ alert(resp.data); })
发送 post 请求
axios({ method:"post", url:"http://localhost:8080/ajax-demo1/aJAXDemo1", data:"username=zhangsan" }).then(function (resp){ alert(resp.data); });
axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：
method属性：用来设置请求方式的。取值为get或者post。
url属性：用来书写请求的资源路径。如果是get请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
data属性：作为请求体被发送的数据。也就是说如果是post请求的话，数据需要作为data属性的值。
then() 需要传递一个匿名函数。我们将then()中传递的匿名函数称为回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的resp参数是对响应的数据进行封装的对象，通过resp.data可以获取到响应的数据。
为了方便起见，Axios已经为所有支持的请求方法提供了别名。如下：
get请求：axios.get(url[,config])
delete请求：axios.delete(url[,config])
head请求：axios.head(url[,config])
options请求：axios.option(url[,config])
post请求：axios.post(url[,data[,config])
put请求：axios.put(url[,data[,config])
patch请求：axios.patch(url[,data[,config])
而我们只关注get请求和post请求:
发送 get请求:
axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
alert(resp.data);
});
发送 post请求：
axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
alert(resp.data);
})
JSON
概念：JavaScript Object Notation。JavaScript 对象表示法。
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
{
"name":"zhangsan",
"age":23,
"city":"北京"
}
JSON本质就是一个字符串，但是该字符串内容是有一定的格式要求的。定义格式如下：
var 变量名 = '{"key":value,"key":value,...}';
value 的数据类型为：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null
例：var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}';
JSON字符串转为JS对象：
var jsObject = JSON.parse(jsonStr);
JSON字符串转为JS对象：
var jsonStr2 = JSON.stringify(jsObject);
注：
Axios中，JSON字符串和JS对象自动进行转换，以上方法作为了解。
发送异步请求时，如果请求参数是JSON格式，那请求方式必须是POST。因为JSON串需要放在请求体中。
JSON 数据和Java对象转换
1. 导入坐标
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency>
2. Java对象转JSON
String jsonStr = JSON.toJSONString(obj);
3. JSON字符串转Java对象
User user = JSON.parseObject(jsonStr, User.class);
代码：
1 public class FastJsonDemo { 2 public static void main(String[] args) { 3 //1. 将Java对象转为JSON字符串 4 User user = new User(); 5 user.setId(1); 6 user.setUsername("zhangsan"); 7 user.setPassword("123"); 8 String jsonString = JSON.toJSONString(user); 9 System.out.println(jsonString);//{"id":1,"password":"123","username":"zhangsan"} 10 //2. 将JSON字符串转为Java对象 11 User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class); 12 System.out.println(u); 13 } 14 }
附加
前端提交的数据格式是json，后端需要通过request 对象获取输入流，再通过输入流读取数据
1 @WebServlet("/addServlet") 2 public class AddServlet extends HttpServlet { 3 private BrandService brandService = new BrandService(); 4 @Override 5 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 6 7 //1. 接收数据,request.getParameter 不能接收json的数据 8 /* String brandName = request.getParameter("brandName"); 9 System.out.println(brandName);*/ 10 11 // 获取请求体数据 12 BufferedReader br = request.getReader(); 13 String params = br.readLine(); 14 // 将JSON字符串转为Java对象 15 Brand brand = JSON.parseObject(params, Brand.class); 16 //2. 调用service 添加 17 brandService.add(brand); 18 //3. 响应成功标识 19 response.getWriter().write("success"); 20 } 21 @Override 22 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 23 this.doGet(request, response); 24 } 25 }
