ajax的异步请求和Json数据格式及其案例
ajax简介
Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的的网页开发技术
Ajax是一种用于创建快速动态网页的技术
Ajax是一种无须加载整个页面的的情况下，能够更新部分网页的技术
通过与后台服务器进行少量的数据交换，Ajax可以实现异步更新，这意味着可以在不重新加载整个网页的情况下，对页面的某个部分进行更新
传统的网页(不使用Ajax)如果需要更新页面内容，必须加载整个网页页面
基本的用法
```java
$.ajax({
url:"ajaxServlet", //请求路径
type:"POST", //请求方式
data:{"username":"jack","age":23},//请求参数
success:function (data) {
alert(data);
},//响应成功后的回掉函数
error:function () {
alert("调用的时候出错了呦")
}, //响应失败的的回掉函数
dataType:"text"
});
$.get("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"json");
json的简介
Json(JavaScript Object Notation JS对象简谱)是一种轻量级的数据交换格式，它基于ECMAScript(欧洲计算机协会的制定的js规范)的一个子集，采用了完全独立与编码格式的来存储和表达数据
简介和清晰的层次的结构使得json成为了理想的数据交换语言
易与人阅读和编写，同时也易于机器编写解析和生成，并有效的提升网络传输效率
JSON对象的语法
在Js语言中，一切都是对象，因此，任何支持 的类型可以通过JSON来表示，例如字符串，数字，数据等，但是对象和数据是比较特殊且常用的两种类型
对象表示键值对‘
数据由逗号分隔
基本的用法
```java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1.基本定义格式
var peron = {"name": "张三", "age": 23, "gender": true};
//alert(peron);
//var name = peron.name;
var name = peron["name"];
//alert(name);
//2.嵌套格式 集合
var persons = {
persons: [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": false},
{"name": "王五", "age": 25, "gender": true}
]
};
//alert(persons);
//var name1 = persons.persons[2].name;
//alert(name1);
//2.1嵌套格式 数组
var ps = [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 23, "gender": true},
{"name": "王五", "age": 23, "gender": true}
];
//alert(ps);
var name2 = ps[1].name;
alert(name2);
</script>
</head>
<body>
</body>
</html>
登录用户名的可用问题
问题引入：当我们使用某个网站进行注册用户的时候，会提示我们有些账号已经使用过了，此时我们就不能再注册这样的用户名了，就是给用户一个提示，让用户有一个好的体验。
解决思路：首先前台有这样的分别显示的可用的提示和不可以用的提示，此时让它们隐藏起来，当满足条件的时候就显示用户可以用，如果数据库中已经存在相同的用户名，显示此时用户不可以用，这样的一个异步的请求，实现了效果，而达到了不涮新页面的条件，这里主要讲解在页面中怎么调用和servlet层面的讲解，其他的层次不做多的讲解，直接贴代码：
Servlet层：
是前后台交互的一个控制层，在这里读入前台的数据，然后做出判断，并将返回的数据传入到前台做出ajax响应：
```java
package cn.ujiuye.servlet;
import cn.ujiuye.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author liugang
* @date 2019/9/23
* 控制层,对读入的数据逻辑进行控制,便于前后端代码的交互
*/
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置其编码格式
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//1.从后台中获取用户名数据
String username = request.getParameter("username");
//2.想业务逻辑的相关的配置
UserService service = new UserService();
int count = service.checkUserName(username);
System.out.println("返回的结果是:"+count);
//3.向页面中做出ajax相应
response.getWriter().print(count);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
JSP页面：
该页面对从后台传入的ajax请求做出相应，主要就是jQuery的用法,此时要学会熟练掌握，只有熟练掌握了其用法，才能够熟悉的使用它
```java
/*文档就绪状态*/
$(function () {
//鼠标离开输入框的时候获取其值
$("#username").blur(function () {
var username = $(this).val();
//如果什么都不输入,两个标签都是隐藏的
if(username.trim()==""){//当用户名输入空中为空串时，隐藏所有显示，并且不再提交ajax请求
$("#span2").hide();
$("#span1").hide();
return;
}
//将用户名使用ajax传入后台,判断其值是否存在
$.post("${pageContext.request.contextPath}/userServlet",{username:username},function (data) {
if (data == 0){
$("#span1").show();
$("#span2").hide();
}
if(data ==1 ){
$("#span2").show();
$("#span1").hide();
}
});
});
});
搜索框自动填充
问题引入：相比大家都做百度一下，当我们输入我们想查询的关键字的时候，就会给我们推荐了很多很多相似个功能，排列到我们的搜索框的下面，此时我们就是有很多的体验
解决问题：此时搜索框下面应该有一个下拉列表，首先刚开始是影藏的，我们并不能看到，当我们通过键盘输入的数据，当我们此处停止录入的时候，应该下面就让这个下拉列表显示,从后台传入的数据我们应该是解析层Jason数据，便于我们后面的调用。从而一列一列的添加到下拉列表中，从而达到一个显示的效果
重点讲解前端jsp页面和servlet层怎么处理，其他层面不做解释
Servlet:
从前端页面中传入数据，然后处理业务逻辑后，将数据转化为json的数据格式，然后传入到前台中，前台接受一下做出相对于的工作，此时解析数据格式的时候，用到了一个工具类ObjectMapper对象
```java
package cn.ujiuye.servlet;
import cn.ujiuye.domain.Product;
import cn.ujiuye.service.ProductService;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
/**
* @author liugang
* @date 2019/9/23
* 控制层
*/
@WebServlet("/productServlet")
public class ProductServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码格式
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//1.从前台获取数据
String keyName = request.getParameter("keyName");
System.out.println(keyName);
//2.调用service处理业务逻辑
ProductService service = new ProductService();
List<Product> list = service.findProductList(keyName);
System.out.println(list+"*****");
//3.创建json解析对象
ObjectMapper mapper = new ObjectMapper();
//4.将集合对象转化为字符串
String jsonStr = mapper.writeValueAsString(list);
System.out.println(jsonStr);
//5.像页面中输入相对应的数据
response.getWriter().print(jsonStr);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
JSP页面
当从后台接入到请求的数据的时候,首先是下拉列表是影藏的，然后对json的数据做出相应，然后遍历的输入相应的框中即可
```java
//文档就绪
$(function () {
//鼠标移除的时候
$("#searId").keyup(function () {
var keyName = this.value;
//如果keyName是等于null,则让整个下拉组影藏
if (keyName.trim()==""){
$("#completeShow").hide();
return;
}
$.post("${pageContext.request.contextPath}/productServlet",{keyName:keyName},function (data) {
$("#completeShow").show();
$("#showList").html("");
for(var i in data){
$("#showList").append("<li class='list-group-item'>"+data[i].pname+"</li>")
}
},"json");
});
});