本文详细介绍了Ajax的基本概念、应用流程，包括异步获取服务器数据和客户端传递数据的方法，以及Json数据的概述、FastJson和Jackson的解析。展示了Ajax在提升用户体验中的作用和常见的Ajax请求方式如$.get,$.post,$.ajax的使用实例。
目录
一、Ajax概述
1.概述
Ajax： 异步的JS和XML的组合；也就是需要在JS中发异步请求到服务器(XML操作被JQuery封装)/ 在前端中通过Ajax可以异步发送请求交给服务端处理，提升用户体验
异步：多线程的执行；客户端与服务器可以同时执行（同步：服务端等客户端做完处理后，服务端发送请求然后客户端做）（异步：客户端边做的时候边发请求，服务端进行处理）
用途：可用于页面的局部刷新；在不需要刷新整个页面的情况下，可使用ajax（提高用户的体验感与界面友好）
应用场景：注册功能、购物车、地图搜索
2.Ajax应用流程
客户端在JS中发送异步请求URL到服务器，服务器接收这个请求并进行处理，处理完后，将数据回调给客户端（实现局部刷新），与此同时客户端发送完请求后，也可以继续去处理前端的代码的执行，构成了异步操作
二、Ajax应用
ajax的应用，可以分为两个部分：1.从服务器中获取数据 2.客户端传参数，再从服务器取数据
具体的ajax的异步功能有三种方式：$.get(..)、 $.post(..)、 $.ajax(..)
get和post用于处理较为简单的异步请求；ajax方法用于处理功能更为强大的异步处理
get和post基本操作类似；只不过get异步是通过url方式传参数，效率高，不安全；post异步通过请求体方式传参数，效率低，但安全
1.获取服务器数据
此处用jsp代替服务端（jsp本质上就是servlet）
客户端(Jquery的get方式的Ajax请求):
需要带参数则在url路径后带参数（url?name="zs"&pwd="123"）
<!--客户端：-->
<!-- 案例：从服务器中获取数据，到前端展示；使用局部刷新 -->
<input type="button" value="加载数据" /><br/>
<div>...</div>
<script type="text/javascript" src="js/jquery-1.11.min.js"></script>
<script type="text/javascript">
$("input").click(function(){
//get异步请求 参数1：url路径 参数2：函数回调
$.get("load.jsp",function(data){
$("div").html(data); //服务器回调数据后，进行局部刷新
})
//js可以继续异步执行操作，只是此处没代码
})
</script>服务器：（注意：服务器传给客户端的数据的类型是字符串）
//服务器：
<%
//此处用于编写java代码
//response-相应的内置对象 相应回客户端
response.getWriter().write("服务器返回的数据~");
%> 2.客户端传数据
案例：做一个注册提示功能；输入用户名后，失去焦点，发异步请求到服务器，服务器根据用户名进行判断，如果为zs，则返回已注册；否则，返回恭喜可用
分析：使用ajax异步请求，且需要传参数到服务器，再服务器里面进行判断
<!--客户端：-->
<form action="">
用户名：<input type="text" id="username" /><span></span><br/>
密码： <input type="text" id="password" /><span></span><br/>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript" src="js/jquery-1.11.min.js"></script>
<script type="text/javascript">
var isOK = false; //开关判断
$("#username").blur(function(){
var value = $(this).val().trim();
//参数1：url 参数2：传到后端的参数 json数据格式 参数3：回调函数
//参数最终拼接到url中：?username=zs&age=12
//$.get("reg.jsp",{username:value},function(data){
//将参数以请求体方式传到服务器
$.post("reg.jsp",{username:value},function(data){
if(data==1){ //建议此处使用整数1,比较内容相等
$("#username+span").html("<font color='red'>已注册</font>");
isOK = false;
}else if(data==0){
$("#username+span").html("<font color='green'>恭喜可用</font>");
isOK = true;
}
})
})
$("form").submit(function(){
return isOK;
})
</script>服务器：
//服务器
<%
//接收请求参数：request 根据key获取value
String username = request.getParameter("username"); //username=zs 得到zs字符串
if("zs".equals(username)){
//通过response响应对象，回传数据到客户端
response.getWriter().write("1"); //注意：传字符串“1”或“0”
}else{
response.getWriter().write("0");
}
%> 三、ajax方法
相对于get和post的异步请求，ajax的方法功能更为强大；如果需要完成处异步请求以外的功能，则需使用ajax方法（比如：在发送ajax请求之前做什么事，失败后做什么事等等....），例如: 发完请求后的刷新图片提示
客户端：
<!-- 案例：从服务器中获取数据，未取到数据前，显示一张一直刷新的图片 -->
<input type="button" value="加载数据" /><br/>
<div>...</div>
<script type="text/javascript" src="js/jquery-1.11.min.js"></script>
<script type="text/javascript">
$("input").click(function(){
$.ajax({ //data属性就是传参数的
type:"get", //请求类型
url:"ajax.jsp", //路径
beforeSend:function(){ //发送数据前的触发执行
$("div").html("<img src='img/Loading.gif'>服务器正在闹情绪...");
},
success:function(data){ //成功的请求
$("div").html(data);
}
})
})
</script>服务器:
//服务器
<%
Thread.sleep(5000); //睡眠5秒
response.getWriter().write("服务器数据加载完成！！！");
%> 四、Json数据
1.概述:
JSON数据本质上就是带格式的字符串； 是一种数据交换格式，也就是用于前后端传递数据
2.语法：
JSON数据有两种：1.最外层为{} 2.最外层为[]
最外层为{}，表示该JSON数据最终解析为对象
最外层为[]，表示该JSON数据最终解析为数组或集合JSON数据的格式如下："{key:value, key2: value2}
五、Json解析
Json的解析方式有两种:
第一种:将JSON数据解析为对象或容器
第二种:将对象或者容器反向解析为Json数据
1.FastJson解析
FastJson是阿里巴巴提供的解析方式
FastJson正向解析：字符串解析成对象
通过JSON调用parseObject方法，将json1字符串转为Grade类型的对象
public class Grade {
private int id;
private String name;
private List<Student> stus;
//set/get toString 构造...
}//1.正向解析：将json数据解析成对象或容器
//String json1 = "{'id':1,'name':'JAVAEE-2305'}";
//解析复杂的数据：
String json1 = "{'id':1,'name':'JAVAEE-1703','stus':[{'id':101,'name':'刘铭','age':16}]}";
//规则：实体属性名与json数据的key要一致，值才能注入实体中
Grade grade = JSON.parseObject(json1, Grade.class);
System.out.println(grade);JSON字符串解析成集合:
public class Student {
private int id;
private String name;
private int age;
//set/get toString 构造...
}String json2 = "['北京','天津','杭州']";
List<String> list = JSON.parseArray(json2, String.class);
System.out.println(list);FastJson反向解析:对象解析成JSON字符串
//2.反向解析：已知对象，产生JSON数据
List<Student> list = new ArrayList<Student>();
list.add(new Student(10000, "zs", 30));
Grade grade = new Grade(101, "java2305", list);
String json1 = JSON.toJSONString(grade);
System.out.println(json1);
//已知容器，产生JSON数据
String[] arr = {"北京","上海","深圳"};
String json2 = JSON.toJSONString(arr);
System.out.println(json2);2.Jackson解析
Jackson正向解析：
//正向解析：1.根据json数据，解析成对象或容器
String json1 = "{\"id\":1,\"name\":\"JAVAEE-1703\",\"stus\":[{\"id\":101,\"name\":\"刘一\",\"age\":16}]}";
//解析成对象
ObjectMapper om = new ObjectMapper();
Grade grade = om.readValue(json1, Grade.class);
System.out.println(grade);
//解析成容器
String json2 = "[\"北京\",\"天津\",\"杭州\"]";
//<ArrayList<String>>：泛型中传的是集合
List<String> list = om.readValue(json2, new TypeReference<List<String>>() {
});
System.out.println(list);Jackson反向解析：
//2.反向解析：已知对象或容器转json数据
List<Student> list = new ArrayList<Student>();
list.add(new Student(101, "ls", 35));
Grade grade = new Grade(1, "java2202", list);
//已知对象转json数据
ObjectMapper om = new ObjectMapper();
String json1 = om.writeValueAsString(grade);
System.out.println(json1);
//已知数组转json数据
String[] arr = {"北京","上海","广州"};
String json2 = om.writeValueAsString(arr);
System.out.println(json2);3.Js的JSON解析
JSON.stringify（object）将对象转字符串
JSON.parse(str);将字符串转对象
<input type="button" value="JSON解析" onclick="myclick()">
<script type="text/javascript">
function myclick(){
//JS的json解析：已知对象，转json字符串
var obj = {name:'zs',age:30}; //通过json创建的对象
var str = JSON.stringify(obj); //对象转字符串
alert(str+"--->"+(typeof str))
var obj2 = JSON.parse(str); //传入json字符串，解析成对象
alert(obj2.name+","+obj2.age+"--->"+(typeof obj2))
}
</script> 
扫一扫
1586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
