Ajax保姆级使用攻略

Ajax保姆级使用攻略

🍅 Java学习路线：搬砖工的Java学习路线
🍅 作者：程序员小王
🍅 程序员小王的博客：https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF
🍅 扫描主页左侧二维码，加我微信 一起学习、一起进步
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
🍅 如有编辑错误联系作者，如果有比较好的文章欢迎分享给我，我会取其精华去其糟粕

一、ajax概述

1、什么是Ajax?

 AJAX即“A synchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

2、Ajax的作用：

  1. 实现页面局部更新 ！凡是以Ajax发送的请求都是异步 （刷新页面的局部）请求

  2. AJAX的实际意义是，不发生页面跳转、异步请求载入内容 并改写局部页面内容 的技术

  3. AJAX也可以简单的理解为通过JS向服务器发送请求 。

3、异步请求和局部请求的区别：

（1）同步请求：响应回来，刷新页面全部

1. 同步请求：以地址栏，超级链接，form表单，js的location.href形式发送请求2. 特点：也就是当我们通过一个页面向服务器发送一个请求时，在服务器响应结束之前，我们的整个页面是不能操作的3.出现的问题：这就带来了非常糟糕的用户体验。首先，同步请求时，用户只能等待服务器的响应，而不能做任何操作。其次，如果请求时间过长可能会给用户一个卡死的感觉。最后，同步请求的最大缺点就是即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。

（2 ）异步请求：可以只刷新页面局部

1. 异步请求：以Ajax形式发送的请求2. 特点：而异步处理指的是我们在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中我们浏览网页的行为并不会收到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。3.使用Ajax解决的问题：使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。

4、使用场景：

   验证码刷新，添加购物车功能，评论功能
  • 以看视频评论为例不使用ajax出现问题：
不使用Ajax现有技术存在的问题：
1、评论视频时，调用服务器刷新页面，响应回来，到客户端刷新当前页面（1）让用户体验差（2）每次刷新浪费网络流量资源

  • 解决方案核心思想：
响应回到客户端后只刷新评论区位置（页面局部）

5、为什么需要使用Ajax？

Ajax：实现页面局部更新，请求发送到服务端，服务端响应回来之后只会刷新页面局部 ，不会刷新页面全部

二、核心API对象：xmlHttpRequest

1、请求对象

  • 向服务器发送请求，毫无疑问需要使用Http协议，也就是我们需要通过JS来向服务器发送一个请求报文。这里我们来回顾一下请求报文的格式：

    • 请求首行
    • 请求头
    • 空行
    • 请求体

  • 这是一个请求报文的格式，那我们如果手动的创建这么一个报文格式来发送给服务器想必是非常麻烦呢，于是浏览器为我们提供了一个XMLHttpRequest对象。

2、 XMLHttpRequest 简称：**xhr(小黄人) **

  • XMLHttpRequest对象是AJAX中非常重要的对象，所有的AJAX操作都是基于该对象的。

  • XMLHttpRequest对象用来封装请求报文，我们向服务器发送的请求信息全部都需要封装到该对象中。

  • 这里需要稍微注意一下，XMLHttpRequest对象并没有成为标准，但是现在的主流浏览器都支持该对象，而一些如IE6的老版本浏览器中的创建方式有一些区别，但是问题不大。

  • 获取XMLHttpRequest对象：由于浏览器之间的差异，不同浏览器中获取XMLHttpRequest的方式不同，但总的来说一共有三种方式：

方式一：var xhr = new XMLHttpRequest()：目前主流浏览器都支持方式二：var xhr = new ActiveXObject("Msxml2.XMLHTTP")：IE6支持的方式方式三：var xhr = new ActiveXObject("Microsoft.XMLHTTP")：IE5.5以下支持的方式

  • 根据三种不同的方式编写通用方法来获取XMLHttpRequest对象：
//获取XMLHttpRequest的通用方法
function getXMLHttpRequest(){var xhr;try{//大部分浏览器都支持xhr = new XMLHttpRequest();}catch(e){try{//如果不支持，在这里捕获异常并且采用IE6支持的方式xhr = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){//如果还不支持，在这里捕获异常并采用IE5支持的方式xhr = new ActiveXObject("Microsoft.XMLHTTP");}}return xhr;
}

3、XMLHttpRequest对象的方法：

（1)open(method,url,async) ：用于设置请求的基本信息，接收三个参数。

    - 参数一：method

        接收一个字符串，表明请求的方法：get或post

    - 参数二：url

        请求的地址，接收一个字符串

    - 参数三：Assync

        发送的请求是否为异步请求，接收一个布尔值。① true 是异步请求 ② false 不是异步请求（同步请求）

（2）send(string)： 用于将请求发送给服务器，可以接收一个参数

    - string参数

        该参数只在发送post请求时需要。用于设置请求体

（3)setRequestHeader(header,value) ：用于设置请求头

    - 参数一：header参数

        字符串类型，要设置的请求头的名字

    - 参数二：value参数

        字符串类型，要设置的请求头的值

（4）XMLHttpRequest对象的属性：

    - readyState 描述XMLHttpRequest的状态

    一共有五种状态分别对应了五个数字：

 0 ：请求尚未初始化，open()尚未被调用1 ：服务器连接已建立，send()尚未被调用2 ：请求已接收，服务器尚未响应3 ：请求已处理，正在接收服务器发送的响应4 ：请求已处理完毕，且响应已就绪。

（5）status

    - 请求的响应码

200 响应成功
404 页面为找到
405 服务方法异常 （service单词写错了）
500 服务器内部错误

(6)onreadystatechange

    - 该属性需要指向一个函数

    - 该函数会在readyState属性发生改变时被调用

1.responseText： 获得字符串形式的响应数据。2.responseXML（用的比较少）：获得 XML 形式的响应数据。

4、示例代码

（1）使用AJAX发送GET请求

//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("get","AjaxServlet?&t="+Math.random(),true);
//发送请求
xhr.send();
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成if(xhr.readyState == 4){//且状态码为200时if(xhr.status == 200){//接收响应信息（文本形式）var text = xhr.responseText;//弹出消息alert(text);}};
};

    这是一个最简单的AJAX代码，向AjaxServlet发送了一个get请求，并且在页面中输出响应的内容。

（2）使用AJAX发送POST请求

//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("post","2.jsp",true);
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xhr.send("hello=123456");
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成
if(xhr.readyState == 4){//且状态码为200时if(xhr.status == 200){//接收响应信息（文本形式）var text = xhr.responseText;//弹出消息alert(text);}
};

三、Ajax的程序

1、验证用户名是否存在

（1）同步请求出现问题

检测用户名是否有效，同步请求会出现刷新页面，最开始写的用户名之类的又清空了

（2）使用Ajax（异步请求）验证用户名是否存在

1.发送请求。传递用户名
2.服务端处理请求 响应结果

编程步骤：

编程步骤：1.客户端Ajax的API创建异步请求对象var xhr=new XMLHttpRequest();2.客户端Ajax发送异步请求//开启请求请求的方式 位置 参数  参数1：请求方式 参数2：urlxhr.open("get|post","/xx/xxAction?name=whj&....");//设置请求头 模拟表单post方式xhr.setRequestHander("contente-type","application/x-www-form-urlencoded");//发送请求xhr.send();3.服务器端处理响应（接收响应更新页面局部）//接收数据  request.getParmenter();(Servlet实现)//调用业务调用业务层返回的验证结果//页面输出流（响应）向客户端响应内容 Ajax只认字符串response.getWriter().print()//跳转页面return null;//不跳转4.客户端（接收响应并且更新页面局部）//通过监听readystate属性值的改变确认响应是否完成/*readystate属性：0  未初始化           对象存在没有调用open方法1  初始化             开启请求并且发送2  接收完整响应        响应不能用3  开始解析响应 未完成  响应不能用4  响应解析完成        响应可用*/xhr.onreadystatechange=function(){//判断 确认响应可用 并且是正确的if(xhr.readyState==4&&xhr.status==200){//处理响应 将响应结果更新到页面局部 javascript代码xhr.responseText();//获得字符串形式的响应内容。}};

注意：Ajax接收数据只认字符串

（4）具体实现

  • 前端代码：使用AJAX发送GET请求实现
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head><script type="text/javascript">window.onload=function () {//绑定丢失焦点事件let name = document.getElementById("name");name.onblur=function () {let nameValue= name.value;//发送异步请求//1.创建异步请求对象let xhr = new XMLHttpRequest();//2.准备并且发送请求 方式 位置xhr.open("get","${pageContext.request.contextPath}/checkName?name="+nameValue)xhr.send();//3.处理响应xhr.onreadystatechange=function (){//在响应解析完成之后并且正确的情况下处理响应if (xhr.readyState == 4) {if (xhr.status == 200) {//获取响应,更新页面局部//alert(xhr.responseText);var msg=document.getElementById("msg");msg.innerText=xhr.responseText;}}}}}</script>
</head>
<body>
用户名：<input type="text" id="name" name="name"/><span id="msg"></span>
</body>
</html>
  • 前端代码：使用AJAX发送POST请求实现
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head><script type="text/javascript">window.onload=function () {//绑定丢失焦点事件let name = document.getElementById("name");name.onblur=function () {let nameValue= name.value;//发送异步请求//1.创建异步请求对象let xhr = new XMLHttpRequest();//2.准备并且发送请求 方式 位置xhr.open("post","${pageContext.request.contextPath}/checkName");//设置请求头xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")xhr.send("name="+nameValue);//3.处理响应xhr.onreadystatechange=function (){//在响应解析完成之后并且正确的情况下处理响应if (xhr.readyState == 4) {if (xhr.status == 200) {//获取响应,更新页面局部//alert(xhr.responseText);var msg=document.getElementById("msg");msg.innerText=xhr.responseText;}}}}}</script>
</head>
<body>
用户名：<input type="text" id="name" name="name"/><span id="msg"></span>
</body>
</html>
  • servlet实现后端代码：
public class CheckServlet extends HttpServlet {@Overridepublic void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//接收数据//调用业务//响应输出流 向客户端响应内容String name = request.getParameter("name");System.out.println(name);String username="whj";if(username.equals(name)){response.getWriter().print("ok!");}else {response.getWriter().print("error!");}}
}

四、为什么使用Gson与Fastjson？

Ajax异步访问数据需要前端（js）和服务器端(java)进行传输数据，但是Ajax只能识别字符串，但是服务器里面的是一个java对象，需要将java对象转换为字符串（使用json ），Gson与Fastjson就是将java对象转换json串的主流工具类!

五、服务器端java对象转化json串

1、Ajax异步传递数据为什么使用json?

1. 本质就是一个字符串
2. java和js都支持json形式字符串所以我们需要将java对象转换为json串,在前端将json串转化为js对象

2、常用的json形式数据转换工具（服务器端java转json）

  Gson（google的），Fastjson（阿里的）转换工具 ，我们目前主要使用Fastjson

3、Google的Gson

Gson是目前功能最全的Json解析神器，Gson的应用主要为toJson与fromJson两个转换函数，无依赖，不需要例外额外的jar，能够直接跑在JDK上。而在使用这种对象转换之前需先创建好对象的类型以及其成员才能成功的将JSON字符串成功转换成相对应的对象。类里面只要有get和set方法，Gson完全可以将复杂类型的json到bean或bean到json的转换，是JSON解析的神器 。Gson在功能上面无可挑剔，但是性能上面比FastJson有所差距。

4、阿里巴巴的Fastjson (主流 ）

Fastjson是一个Java语言编写 的高性能的JSON处理器,由阿里巴巴公司开发。
无依赖，不需要例外额外的jar，能够直接跑在JDK上。FastJson在复杂类型的Bean转换Json上会出现一些问题，可能会出现引用的类型，导致Json转换出错，需要制定引用。
FastJson采用独创的算法，将parse的速度提升到极致 ，超过所有json库。

六、阿里巴巴的Fastjson 的使用(主流 ）

1、在maven项目中导入Fastjson 的依赖

（注：maven选择依赖小攻略：搜索maven,选择使用人数最高的一般都是用于企业开发使用的）

<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version>
</dependency>

2、创建实体类User

public class User {private Integer id;private String name;private String password;private Date birthday;

3、使用FastJson工具类转换对象

(1)单个java对象转换为JSON串

 /*** 转换单个对象*/@Testpublic void FastJson() {//1.创建一个对象User user = new User(1, "王恒杰", "123456", new Date());// 打印对象System.out.println("User对象"+user);/*** 使用fastJson将User对象转换为json形式的字符串* 参数：要转化的对象* 返回值：json字符串*/String json = JSONObject.toJSONString(user);System.out.println("json串"+json);}
  • 转换后结果

注：我们会发现对象转换为JSON串时，日期转化不会正常显示 ，他会显示为毫秒！FastJson专门提供一个API解决日期格式转化 问题！

(2)java对象转换为JSON串日期转化方案

  /*** java对象转换为JSON串日期转化方案*/@Testpublic void FastJson() {//1.创建一个对象User user = new User(1, "王恒杰", "123456", new Date());// 打印对象System.out.println("User对象"+user);/*** 2.使用fastJson将User对象转换为json形式的字符串* 参数：要转化的对象* 返回值：json字符串*/String json1 = JSONObject.toJSONString(user);System.out.println("json串"+json1);/*** 3.fastJson日期格式转化API*  参数1：要转化的对象*  参数2：日期转化 可以写成 yyy-mm-dd && yyyy-mm-dd hh:mm:ss两种*  返回值：日期格式化后的json串*/String json2 = JSONObject.toJSONStringWithDateFormat(user, "yyyy-mm-dd hh:mm:ss");System.out.println("日期格式化后的json串"+json2);}
  • 转换后结果

(3)List集合对象转换为JSON串

  @Testpublic void ListByFastJsonTest(){//1.创建List集合ArrayList<User> list = new ArrayList<>();//2，添加数据list.add(new User(1, "王恒杰1", "123456", new Date()));list.add(new User(2, "王恒杰2", "123456", new Date()));list.add(new User(3, "王恒杰3", "123456", new Date()));list.add(new User(4, "王恒杰4", "123456", new Date()));//通过fastJson将List集合转换为json串String listUser = JSONObject.toJSONStringWithDateFormat(list, "yyyy-mm-dd");System.out.println(listUser);}
  • 转换后结果

(4)map集合对象转换为JSON串

  @Testpublic void MapByFastJsonTest() {//1.创建map集合Map<String, String> map = new HashMap<>();//2，添加数据map.put("1号选手", "王恒杰1");map.put("2号选手", "王恒杰2");map.put("3号选手", "王恒杰3");map.put("4号选手", "王恒杰4");//通过fastJson将map集合转换为json串String json = JSONObject.toJSONString(map);System.out.println(json);}
  • 转换后结果

(5)使用注解的方法解决日期格式

  • 实体类User:

  • 测试方法：
 @Testpublic void DateByFastJsonTest(){User user = new User();user.setBirthday(new Date());String json = JSONObject.toJSONString(user);System.out.println(json);}
  • 转换后结果

七、Google的Gson 的使用(功能最全 ）

先对与fastJson来说：Gson在功能上面无可挑剔，但是性能上面比FastJson有所差距。因为我很少使用，所以Gson我就测试了一个！

1、在maven项目中导入Fastjson 的依赖

<dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.8.5</version>
</dependency>

2、创建实体类User

public class User {private Integer id;private String name;private String password;private Date birthday;

3、单个java对象转换为JSON串：toJson

    /*** Gson转换单个对象*/@Testpublic void Gson() {//1.创建一个对象User user = new User(1, "王恒杰", "123456", new Date());// 打印对象System.out.println("User对象" + user);/*** 2.使用Gson将User对象转换为json形式的字符串*/Gson gson = new Gson();String json = gson.toJson(user);System.out.println(json);}
  • 转换后结果

4、java对象转换为JSON串日期转化方案

 @Testpublic void DateGson() {//1.创建一个对象User user = new User(1, "王恒杰", "123456", new Date());// 打印对象System.out.println("User对象" + user);/*** 2.使用Gson将User对象转换为json形式的字符串*/GsonBuilder builder = new GsonBuilder();Gson gson = builder.setDateFormat("yyyy-mm-dd").create();String json = gson.toJson(user);System.out.println(json);}
  • 转换后结果

五、如何选择Gson || FastJson

在项目选型的时候可以使用Google的Gson和阿里巴巴的FastJson两种并行使用，
如果只是功能 要求，没有性能 要求，可以使用google的Gson，
如果有性能上面的要求可以使用Gson将bean转换json确保数据的正确，使用FastJson将Json转换Bean

六、前端将json串转换为js中的json对象

//json形式字符串:xhr.responseText
1. 转换方式1： var JsJsonObject=JSON.parse(xhr.responseText);
2. 转换方式2：  var JsJsonObject=eval("+(xhr.responseText)+");
JSJsonObject属性名 获取对应属性值
  • 前后端json转化总结：
1. java对象：使用json转换工具(FastJson) 将对象转换为json串 再进行转换
2. js: 将接收到的json字符串转换为js中的json对象

七、FastJson实用案例

1、案例要求：单击展示单个用户信息 & 验证用户名是否存在

2、具体实现

（1）技术选型：

    Servlet+html+Ajax+js(主要展示ajax&FastJson效果)，Ajax我们使用的是原生js实现

（2）所需要依赖

    <!--Servlet依赖主要用于后端使用 注意使用Servlet的注解配置路径一定要3以后的版本--><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency><!--用要用于跳转页面时使用和相对路径--><dependency><groupId>javax.servlet.jsp</groupId><artifactId>jsp-api</artifactId><version>2.1</version></dependency><!--FastJson工具所需依赖--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version></dependency>

（3）实体类User

public class User {private Integer id;private String name;private String password;private Date birthday;

（3）html

<body>用户名：<input type="text" id="name" name="name"><span id="msg"></span></br>
<input type="submit" id="btn" value="输入姓名点击展示用户信息">
</body>

（4）ajax实现数据传输

   <script type="text/javascript"><%--先加载页面后执行js对象--%>window.onload = function () {var name = document.getElementById("name");//获取var nameValue = name.value;//为按钮绑定移出输入窗口事件name.onblur = function () {// 1.创建Ajax异步请求对象let xhr = new XMLHttpRequest();//2.发送请求xhr.open("post", "${pageContext.request.contextPath}/checkName");xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");xhr.send("name=" + nameValue);//3.处理响应  onreadystatechange函数会在readyState属性发生改变时被调用xhr.onreadystatechange = function () {if (xhr.readyState == 4) {//4.获取响应更新页面局部if (xhr.status == 200) {var msg = document.getElementById("msg");msg.innerText = xhr.responseText}}}}var btn = document.getElementById("btn");btn.onclick = function () {var xhr = new XMLHttpRequest();xhr.open("post", "${pageContext.request.contextPath}/user");xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");xhr.send("name=" + nameValue);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {//打印结果  json形式的字符串console.log(xhr.responseText);//将接收的json字符串转化为js中json对象var user = JSON.parse(xhr.responseText);console.log(user);}}}}</script>

（5）servlet实现后端

  • 单击展示单个用户信息
  @WebServlet("/checkName")
public class CheckServlet extends HttpServlet {@Overridepublic void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//统一编码格式request.setCharacterEncoding("utf-8");response.setContentType("text/html;setchar=utf-8");response.setCharacterEncoding("utf-8");//接收数据String name = request.getParameter("name");User user = new User(1, "王恒杰", "123456", new Date());//处理业务if (user.getName().equals(name)) {response.getWriter().print("用户可以被查询到！");} else {//验证用户名是否存在response.getWriter().print("用户不存在");}}
}
  • 验证用户名是否存在
@WebServlet("/user")
public class UserServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//统一编码格式request.setCharacterEncoding("utf-8");response.setContentType("text/html;setchar=utf-8");response.setCharacterEncoding("utf-8");//接收数据String name = request.getParameter("name");User user = new User(1, "王恒杰", "123456", new Date());//处理业务// 响应输出流 向客户端响应内容String jsonUser = JSONObject.toJSONStringWithDateFormat(user, "yyyy-mm-dd");response.getWriter().print(jsonUser);}
}

效果展示：

八、Ajax发送请求处理多个数据

1、实现步骤：

1.给按钮添加单击事件
2.发送请求查询多个用户前端Ajax实现：
var btn=document.getElementById("btn");
btn.onclick=function(){//发送请求查询多个用户var xhr=new XmlHttpRequest();xhr.open("get|post","/xxx/queryAllServlet");//[post需要添加]xhr.setRequestHeader("content-type","app...");xhr.send();on.onreadystatechange=funtion(){if(xhr.readyState=4&&xhr.status==200){//响应数据//xhr.responseText;//json字符串var users=JSON.parse(xhr.responseText);//json形式js对象//var users=eval("("+xhr.responseText+")")//json形式js对象//遍历for(var i=0;i<users.length;i++){//js操作页面结构}}}
}后端用Servelt|Struts2实现：queryAll{//接收数据//调用业务List<user> users=new UserServicce.queryAll();//将users转换为json形式字符串（fastJson实现）String JsonUsers=JSONObject.JSONString(users);//响应数据response.getWriter().pront(jsonUsers);
}

查询多个实现步骤思路图

2、不同的浏览器版本发送异步请求

属性：XMLHttpRequest 布尔值 true:WebKit内核 false:IE内核

     js浏览器差异  IE内核  WebKit内核<br />

3、Ajax实现前端：

%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head><title>查询所有实现</title><script>window.onload = function () {var btn = document.getElementById("btn");btn.onclick = function () {//1.发送异步请求处理多个用户// js浏览器差异  IE内核  WebKit内核//属性 XMLHttpRequest 布尔值  true:webKit内核  false:IE内核//(1)判断浏览器内核，根据内核创建异步请求对象var xhr;if (window.XMLHttpRequest) {//webKit内核xhr = new XMLHttpRequest();} else {//IE内核xhr = new ActiveXObject("Microsoft.XMLHTTP");}//(2)发送请求xhr.open("post", "${pageContext.request.contextPath}/queryAll");xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");xhr.send();//(3)接收数据xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {var users = JSON.parse(xhr.responseText);console.log(users)for (var i = 0; i < users.length; i++) {var ul = document.createElement("ul");var idLi = document.createElement("li");var nameLi = document.createElement("li");var passwordLi = document.createElement("li");var birthdayLi = document.createElement("li");idLi.innerText = users[i].id;nameLi.innerText = users[i].name;passwordLi.innerText = users[i].password;birthdayLi.innerText = users[i].birthday;ul.appendChild(idLi);ul.appendChild(nameLi);ul.appendChild(passwordLi);ul.appendChild(birthdayLi);document.getElementById("bd").appendChild(ul);}}}}}}</script>
</head>
<body id="bd"><input type="button" id="btn" value="点击展示用户集合">
</body>
</html>

4、Servlet实现后端

    @Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {ArrayList<User> list = new ArrayList<>();//2，添加数据list.add(new User(1, "王恒杰1", "123456", new Date()));list.add(new User(2, "王恒杰2", "123456", new Date()));list.add(new User(3, "王恒杰3", "123456", new Date()));list.add(new User(4, "王恒杰4", "123456", new Date()));String usersJson = JSONObject.toJSONStringWithDateFormat(list, "YYYY-MM-DD");response.setCharacterEncoding("utf-8");response.getWriter().print(usersJson);}

十、JQuery的Ajax请求

1、javaScript实现Ajax请求发送出现的问题

1. 编码冗余
2. 考虑浏览器差异问题

2、Jquery实现Ajax请求发送

1. Jquery框架天生支持Ajax请求2. 使用Ajax发送请求，必须要引入对应的js文件
<%-- 引入jquery对应文件--%>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

3、怎么样使用jquery发送Ajax请求？

(1)get请求方式

$.get(url,[data],[callback],[type])=jquery.get(url,[data],[callback],[type]);1. 参数：url 请求发送的目标地址   "/xxx/xxAction"2. data  要向服务端传递的数据     "name=whj&....." 3.callback 回调函数 表示响应解析完成并且正确情况下 你需要执行的功能4. 返回内容格式  xml,html,script json  通过type可以设置响应回来的响应类型text:返回数据类型字符串json:会自动将返回的数据封装成json对象(相当于 JSON.parse());
*使用场景：发送请求，不处理响应  $.get("url")发送请求，传递数据，不处理响应  $.get("url","name=whj")发送请求，不传递数据，处理响应  $.get("url",function(){})发送请求，传递数据，处理响应    $.get("url","name=whj",function({}));发送请求，传递数据，处理响应,同时设置返回类型    $.get("url","name=whj",function({}),"json");
*注意：调用jquery语法时jquery=$
  • 用get请求方式给按钮绑定单机事件获取多个数据
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head><%-- 引入jquery对应文件--%><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript">//先加载页面之后执行功能$(function () {// 给按钮绑定单机事件$("#btn").click(function () {//借助于jquery发送异步请求 get方式$.get("${pageContext.request.contextPath}/queryAll", function (result) {//callback 回调函数 表示响应解析完成并且正确情况下 你需要执行的功能// 响应解析完成并且正确时的处理方案//响应结果怎么获取？ 当前回调函数的参数表示响应结果数据console.log(result)}, "json")})})</script>
</head>
<body>
<input id="btn" type="button" value="展示所有"/>
</body>
</html>
  • 效果展示

（2）post方式请求

$post(url,[data],[callback],[type])1.url：请求的资源路径。
2. data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。 
3. callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
4. type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
  • 用post请求方式给按钮绑定单机事件获取多个数据
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head><%-- 引入jquery对应文件--%><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript">//先加载页面之后执行功能$(function () {// 给按钮绑定单机事件$("#btn").click(function () {//借助于jquery发送异步请求 get方式$.post("${pageContext.request.contextPath}/queryAll", function (result) {//callback 回调函数 表示响应解析完成并且正确情况下 你需要执行的功能// 响应解析完成并且正确时的处理方案//响应结果怎么获取？ 当前回调函数的参数表示响应结果数据console.log(result)}, "json")})})</script>
</head>
<body>
<input id="btn" type="button" value="展示所有"/>
</body>
</html>
  • 效果展示

（3)getJSON方式

 &.getJSON(url,[data],[callback]) 确定是get形式的请求并且响应的数据是json数据等价于$get(url,[data],[callback],"json")
  • 用getJSON请求方式给按钮绑定单机事件获取多个数据
 //先加载页面之后执行功能$(function () {//给按钮绑定单机事件$("#btn").click(function () {$.getJSON("${pageContext.request.contextPath}/queryAll",function (result) {console.log(result)})})})

（4）Ajax原始方式 手工指定发送请求

$.ajax(url,[settings]);
url 指定发送的目标位置
data:"" 指定向服务器传递的数据
dataType: 指定响应数据的解析方式 text、json
type:"" :指定发送请求方式，get post
success:function(data){回调函数//响应内容的处理
}
error：请求失败时调用的回调函数。
async：是否异步请求，true-是，false-否 (默认是 true)。
  • 用Ajax原始方式 手工指定发送请求给按钮绑定单机事件获取多个数据
<html>
<head><%-- 引入jquery对应文件--%><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript">//先加载页面之后执行功能$(function () {//给按钮绑定单机事件$("#btn").click(function () {/*** url 指定发送的目标位置data:"" 指定向服务器传递的数据dataType: 指定响应数据的解析方式 text、jsontype:"" :指定发送请求方式，get postsuccess:function(data){回调函数//响应内容的处理}*/$.ajax({type: "post",url: "${pageContext.request.contextPath}/queryAll",dataType: "json",success: function (data) {//jquery实现页面结构操作for (var i = 0; i < data.length; i++) {//创建ul标签var ul = $("<ul></ul>");//创建li 填充当前对象的属性值var idLi = $("<li>"+data[i].id+"</li>");var nameLi = $("<li>"+data[i].name+"</li>");var passwordLi = $("<li>"+data[i].password+"</li>");var birthdayLi = $("<li>"+data[i].birthday+"</li>");//将li子标签添加到ul父标签ul.append(idLi);ul.append(nameLi);ul.append(passwordLi);ul.append(birthdayLi);$("#body").append(ul);}}})})})</script>
</head>
<body id="body">
<input id="btn" type="button" value="展示所有"/>
</body>
</html>
  • 效果展示图

十一、Ajax小结

  • AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

  • 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的 部分内容 进行局部更新。

  • 同步和异步

    - 同步：服务器端在处理过程中，无法进行其他操作。

    - 异步：服务器端在处理过程中，可以进行其他操作。

  • GET 方式实现： $.get();

  • POST 方式实现： $.post();

    - url：请求的资源路径。

    - data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

    - callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

    - type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

  • 通用方式实现： $.ajax();

    - url：请求的资源路径。

    - async：是否异步请求，true-是，false-否 (默认是 true)。

    - data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

    - type：请求方式，POST 或 GET (默认是 GET)。

    - dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

    - success：请求成功时调用的回调函数。

    - error：请求失败时调用的回调函数。
📌 作者：王恒杰

📃 更新： 2021.10.29

❌ 勘误： 无

📜 声明： 由于作者水平有限，本文有错误和不准确之处在所难免，本人也很想知道这些错误，恳望读者批评指正！
🍅 欢迎点赞 👍 收藏 ⭐留言 📝

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注