JQuery 之 Ajax 异步请求

1.1 Ajax简介

1.1.1 不使用Ajax存在的问题

在发送请求得到响应时，我们常常只需要刷新网页局部的数据，而不是整个网页的资源（在网页资源过大时，效率会大大降低。），这就导致了资源的浪费，也给浏览器增加了更大的渲染压力。
我们在刷新页面的时候他会自动的保存原来的网页的内容这样一来相当于重复的保存了当前的这个页面。

在这种情况下 Ajax应运而生。

1.1.2 什么是Ajax

Ajax本身就是浏览器的一个内置对象这个对象是位于浏览器的内部我们的浏览器只要支持Ajax 那么我们就可以通过这个Ajax对象来进行HTTP请求的发送

Ajax简单的说就是一个用来发送HTTP请求的工具
实际上：Ajax是用来进行网页上局部刷新的一门技术

1.2 JSON 的使用

1.2.1 什么是JSON

通俗来讲，JSON可以被认为是对数据的格式约束，他就是一种数据格式

1.2.2 JSON的运用

JSON可以表示对象和数组，而在表示对象和数组时，都是可以相互嵌套的，只要满足JSON数据的格式，就是一个正确的JSON字符串。

表示对象使用{}修饰：(":“之前为key，”:“之后为value，不同属性之间使用”,"隔开)

示例：

{"username":"zuihaodeshuoshuo","password":"123456"
}

表示数组使用[]修饰：(数组值之间使用","隔开，示例中的数组值为字符串)

示例：

["user1","user2","user3"
]

JSON对象和数组的相互嵌套

//对象中嵌套数组
{"username":"zuihaodeshuoshuo","password":"123456","hobby":["吃饭","睡觉","打豆豆"]
}//数组中嵌套对象
[{"username":"zuihaodeshuoshuo","password":"123456","hobby":["吃饭","睡觉","打豆豆"]},"user2","user3"
]

1.2.3 java 中操作JSON

JSON数据格式在多种语言中都支持，java自然也不例外。

在java中操作JSON，我们常常使用阿里给我们提供的jar包。

导入包（com.alibaba.fastjson）

使用maven可加入依赖如下：

<!--alibaba的JSON依赖-->
<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version>
</dependency>

1.2.4 示例

User类

public class User {private int id;private String name;private String password;public User() {}public User(int id, String name, String password) {this.id = id;this.name = name;this.password = password;}public int getId() {return id;}public String getName() {return name;}public String getPassword() {return password;}@Overridepublic String toString() {return "User{" +"id=" + id +", name='" + name + '\'' +", password='" + password + '\'' +'}';}
}

测试示例：

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.dream.pojo.User;
import com.dream.result.R;
import org.junit.jupiter.api.Test;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;public class Test_1 {/*** 创建JSON对象，装入数据。*/@Testpublic void test01(){//创建JSON对象JSONObject jsonObject = new JSONObject();//向JSON对象中添加数据jsonObject.put("username","最好的硕硕");jsonObject.put("password","123");//在JSON对象中装入JSON对象JSONObject jsonObject1 = new JSONObject();jsonObject1.put("语文",100);jsonObject1.put("数学",100);jsonObject.put("course",jsonObject1);//以字符串形式输出JSON对象System.out.println("JSON对象的内容时候："+jsonObject.toJSONString());}/*** 创建JSON数组*/@Testpublic void test02(){//创建JSON数组对象JSONArray objects = new JSONArray();//向数组中添加数据objects.add("滴滴");objects.add("嘿嘿");objects.add(100);//在JSON数组中添加JSON对象JSONObject jsonObject = new JSONObject();jsonObject.put("a",1);jsonObject.put("b",2);objects.add(jsonObject);//以字符串形式输出JSON数组System.out.println("JSON的内容是："+objects.toJSONString());}/*** 添加User对象集合转化为JSON格式*/@Testpublic void test03(){//模拟从数据库中读出User对象的集合ArrayList<User> users = new ArrayList<>();//添加数据for (int i = 0; i < 3; i++) {users.add(new User(i,"硕硕"+i,"123"+i));}//将集合转化为JSON格式的字符串System.out.println(JSON.toJSONString(users));}/*** JSON格式转化为java对象*/@Testpublic void test04(){//模拟从数据库中读出User对象的集合ArrayList<User> users = new ArrayList<>();//添加数据for (int i = 0; i < 3; i++) {users.add(new User(i,"硕硕"+i,"123"+i));}//将集合转化为JSON格式的字符串String jsonString = JSON.toJSONString(users);List<User> users1 = JSON.parseArray(jsonString, User.class);System.out.println(users);}@Testpublic void test05(){//创建数据HashMap<String, Object> hashMap = new HashMap<>();hashMap.put("语文",100);hashMap.put("数学",100);R r = R.ok().data(hashMap).data("name","硕硕");System.out.println(JSON.toJSONString(r));}
}

1.3 Ajax在JQuery中的使用

注：JQuery导包

<!--这里导入JQuery的相关的包-->
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

src为JQuery包的位置。

1.3.1 jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中(只改变被选中的元素)

语法： $(selector).load(URL,data,callback);

URL：Ajax请求的地址

data：发送的数据（可选）

callback：load方法请求之后的回调方法（该方法中有一些默认的参数可以使用：见下表）（可选）

常见参数	内容
第一个参数：responsedata	请求成功之后，从后端返回的数据
第二个参数：statusTxt	请求的状态success
第三个参数：xhr	包含XML HttpRequest对象

注：在function中的三个参数跟位置有关，命名可以随意，三个参数依次出现，从第一个参数到第三个参数。（可写全三个，也可只写一个…）

示例：

$("button").click(function(){$("#div1").load("demo_test.txt",function(responsedata,statusTxt,xhr){if(statusTxt=="success")alert("外部内容加载成功!");if(statusTxt=="error")alert("Error: "+xhr.status+": "+xhr.statusText);});
});

<div id="div1">输入账号和密码
</div>
<a href="PageServlet">点击跳转</a><br>账号：<input type="text" id="name"><br>
密码：<input type="password" id="password"><br>
<input type="button" value="点击提交" οnclick="fun01()">
<script type="text/javascript">function fun01(){$("#div1").load("AjaxServlet",{"name":$("#name").val(),"password":$("#password").val()},function (responsedata){$("#div1").text(responsedata)})}
</script>

注：load方法中，Ajax发送给请求地址的data数据，使用JSON格式，但在后端还是以键值对接受（如同表单提交）。

1.3.2 JQuery ajax()方法

使用ajax方法时，可以很简便的设置请求的头部信息，常见的头部信息有：

标识	含义
url	请求地址
type	请求方式（get/post）
async	是否发送异步请求(默认为true)
contentType	传输数据的格式（默认是：“application/x-www-form-urlencoded” 即表单格式发送）（JSON格式发送：“application/json;charset=utf-8”）
data	传输的数据
dataType	返回的数据需要打包的格式（常常设置为：“json”）
error:function (xhr,status,error)	请求失败后运行的函数
success:function (data,status,xhr)	请求成功后运行的函数

示例：

function initListener() {$(":button").click(function () {//接下来就要获取值了var userName= $("#userName").val();var password= $("#password").val();var id=$("#id").val();var data={"userName":userName,"id":id,"password":password}//接下来发送Ajax请求来进行数据的更新$.ajax({url:"/UserServlet?methodName=update",    //请求地址type:"POST",     //请求方法async:true,      //是否发送异步请求contentType:"application/x-www-form-urlencoded",  //传输数据的格式是表单data:data,   //传输的数据dataType:"json",  //告诉他返回来的数据 需要整成JSON格式error:function (ajax,status,error) {    //请求出错之后的回调函数console.log("错误信息是:"+error);},success:function (data,status,ajax) {  //请求成功之后的回调函数console.log("添加:后台返回的数据是:"+data)//执行到这个位置//说明添加用户是成功的if(data.code==0){//说明需要跳转到首页location.href="/page.html";}}})})
}

1.3.3 后端对JSON格式的请求处理

当前端发送请求的数据为JSON数据格式时，在后端需要以流的形式接受。

示例：

private String getJSON(HttpServletRequest req) throws IOException {//处理编码格式req.setCharacterEncoding("UTF-8");//获取前端传来的JSONServletInputStream inputStream = req.getInputStream();//设置接受数据的byte数组大小为8192，一般不会超过这么大。byte [] buf = new byte[8192];inputStream.read(buf);return new String(buf,"UTF-8");
}

也可以使用BufferedReader读取

private String getJSON(HttpServletRequest req) throws IOException {//处理编码格式req.setCharacterEncoding("UTF-8");//获取前端传来的JSONStringBuffer jsonStr = new StringBuffer();BufferedReader reader = req.getReader();String line = null;while ((line = reader.readLine()) != null) {jsonStr.append(line);}return jsonStr.toString();
}

1.3.4 后端发送JSON格式数据给前端

public static void sendResponse(HttpServletRequest req, HttpServletResponse resp, R r) throws IOException {resp.setContentType("application/json;charset=utf-8");//指定返回的格式为JSON格式PrintWriter writer = resp.getWriter();writer.write(JSON.toJSONString(r));writer.flush();writer.close();
}

javaWeb基础六：JQuery—Ajax异步请求相关推荐

jQuery Ajax异步请求详解
jQuery的Ajax API是对XMLHttpRequest对象的抽象,解决了浏览器之间的兼容性问题,同时提供了一些方便的方法.这篇博客的撰写参考了jQuery官网,jQuery Ajax API ...
ajax异步处理代码实现,原生JS代码实现一个Ajax异步请求
异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...
php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...
jquery的ajax异步请求接收返回json数据
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以.这篇文 ...
jQuery实现Ajax异步请求的三种方式
jQuery实现Ajax jQuery框架对js原生的ajax进行了封装,封装后的ajax相比原生就变的更加简洁方便,而且功能更加丰富常用的三种ajax实现的方法: get:$.get(url,[d ...
jQuery使用ajax异步请求400解决方法
jQuery使用ajax异步请求访问状态码400解决方法: 先直接上结论:首先检查下自己使用的请求方式,我原来用的是post方式,更改为ajax之后就解决了,才反应过来应该是版本不兼容的问题! < ...
ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
ajax异步请求数据库实现级联下拉菜单。
ajax实现级联下拉菜单,使用Springboot实现. 思路很简单,使用ajax异步请求数据库数据即可. 文末有项目源码! 实现效果: 废话不多说,现在我们来开始实现! 第一步. 创建三张表:省.市 ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...

javaWeb基础六：JQuery—Ajax异步请求