JavaScript Ajax和jQuery Ajax
一、Ajax概述
1.1什么是同步，什么是异步
- 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态
- 异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死
1.2Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。
原理分析：
ajax原理.PNG
- 1.1使用JavaScript获得浏览器内置的AJAX引擎（XMLHttpRequest对象）
- 1.2通过AJAX引擎确定请求路径和请求参数
- 1.3通知AJAX引擎发送请求
- AJAX引擎会在不刷新浏览器地址栏的情况下，发送请求
- 2.1服务器获得请求参数
- 2.2服务器处理请求参数（添加、查询等操作）
- 2.3服务器响应数据给浏览器
- AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据传递给浏览器页面。
- 3.1通过设置AJAX引擎的回调函数获得服务器响应的数据
- 3.2使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的
二、JavaScript AJAX使用
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：
1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据
代码：
客户端：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function fn1(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span1").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
//4、发送请求
xmlHttp.send();
}
function fn2(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span2").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("POST","/WEB22/ajaxServlet",false);
//4、发送请求
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=wangwu");
}
</script>
</head>
<body>
<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
<br>
<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
<br>
<input type="button" value="测试按钮" onclick="alert()">
</body>
</html>
服务器端：
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.getWriter().write("zhangsan");
/*try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}*/
String parameter = request.getParameter("name");
response.getWriter().write(Math.random()+parameter);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
过程：
ajax引擎.png
三、json数据格式
json是一种与语言无关的数据交换的格式，作用：
- 使用ajax进行前后台数据交换
- 移动端与服务端的数据交换
3.1Json的格式与解析
json有两种格式：
1）对象格式：{"key1":obj,"key2":obj,"key3":obj...}
2）数组/集合格式：[obj,obj,obj...]
例如：
user对象 用json数据格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}
List<Product> 用json数据格式表示
[{"pid":"10","pname":"小米4C"},{},{}]
注意：
- 对象格式和数组格式可以互相嵌套
- json的key是字符串 json的value是Object
json的解析：
json是js的原生内容，也就意味着js可以直接取出json对象中的数据
案例一：
<script language="JavaScript">
/**
* 案例一
* {key:value,key:value}
*
* class Person{
* String firstname = "张";
* String lastname = "三丰";
* Integer age = 100;
* }
*
* Person p = new Person();
* System.out.println(p.firstname);
*/
var person = {"firstname":"张","lastname":"三丰","age":100};
//取出lastname
alert(person.lastname);
//取出age
alert(person.age);
</script>
案例二：
<script language="JavaScript">
/**
* 案例二
* [{key:value,key:value},{key:value,key:value}]
*
*/
var persons = [
{"firstname":"张","lastname":"三丰","age":100},
{"firstname":"李","lastname":"四","age":25}
];
//取出 firstname=李
alert(persons[1].firstname);
//取100
alert(persons[0].age);
</script>
案例三：
<script language="JavaScript">
/**
* 案例三
* {
* "param":[{key:value,key:value},{key:value,key:value}]
* }
*
*
*/
var json = {
"baobao":[
{"name":"小双","age":28,"addr":"扬州"},
{"name":"建宁","age":18,"addr":"紫禁城"},
{"name":"阿珂","age":10,"addr":"山西"},
]
};
//取name = 建宁
alert(json.baobao[1].name);
//取addr 山西
alert(json.baobao[2].addr);
</script>
案例四：
<script language="JavaScript">
/**
* 案例四
* {
* "param1":[{key:value,key:value},{key:value,key:value}],
* "param2":[{key:value,key:value},{key:value,key:value}],
* "param3":[{key:value,key:value},{key:value,key:value}]
* }
*
*
*/
var json = {
"baobao":[
{"name":"小双","age":28,"addr":"扬州"},
{"name":"建宁","age":18,"addr":"紫禁城"},
{"name":"阿珂","age":10,"addr":"山西"},
],
"haohao":[
{"name":"张爽","age":25,"addr":"吉林"},
{"name":"舒洁","age":23,"addr":"赤峰"}
]
};
alert(json.haohao[1].name);
</script>
案例五：
<script language="JavaScript">
/**
* 案例五
* {
* "param1":"value1",
* "param2":{},
* "param3":[{key:value,key:value},{key:value,key:value}]
* }
*
*
*/
var json = {
"key1":"value1",
"key2":{"firstname":"张","lastname":"三丰","age":100},
"key3":[
{"name":"小双","age":28,"addr":"扬州"},
{"name":"建宁","age":18,"addr":"紫禁城"},
{"name":"阿珂","age":10,"addr":"山西"},
]
};
alert(json.key2.lastname);
alert(json.key3[2].name);
</script>
3.2Json的转换插件
将java的对象或集合转成json形式字符串
json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。
常用的json转换工具有如下几种：
- 1）jsonlib
- 2）Gson：google
- 3）fastjson：阿里巴巴
1）json-lib工具：
json-lib是将java对象与json数据相互转换的工具
第三方工具，使用时需要导入jar包：
json-lib.PNG
常用对象：
- JSONObject,java对象（JavaBean、Map）与JSON数据 转换工具类
- JSONArray,java集合（List、Array）与转换工具类
常用方法：
- static fromObject(...),静态方法，用于将java对象或集合转换成jsonlib对象。
- toString()将jsonlib对象转换成json字符串。
例如：
//map或javabean
Map<String,String> map = new HashMap<String,String>();
map.put("username","jack");
map.put("password","1234");
String str = JSONObject.fromObject(map).toString();
System.out.println(str);
/*
* 输出结果：
* {
* "username":"jack",
* "password":"1234"
* }
*/
//list或array
List<Map<String,String>> list = new ArrayList<>();
list.add(map);
list.add(map);
String str2 = JSONArray.fromObject(list).toString();
System.out.println(str2);
/*
* 输出结果：
* [
* {"username":"jack","password","1234"},
* {"username":"jack","password","1234"}
* ]
*/
四、jQuery的Ajax技术
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种：[]表示可选
$.ajax([options])
load(url,[data],[callback])
$.get(url,[data],[fn],[type])
$.getJSON(url,[data],[fn])
$.getScript(url,[callback])
$.post(url,[data],[fn],[type])
开发中经常使用的有三种
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
其中：
- url：代表请求的服务器端地址
- data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
- callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
- type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
3）$.ajax( { option1:value1,option2:value2... } );
常用的option有如下：
- async：是否异步，默认是true代表异步
- data：发送到服务器的参数，建议使用json格式
- dataType：服务器端返回的数据类型，常用text和json
- success：成功响应执行的函数，对应的类型是function类型
- type：请求方式，POST/GET
- url：请求服务器端地址
案例：
客户端：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function fn1(){
//get异步访问
$.get(
"/WEB22/ajaxServlet2", //url地址
{"name":"张三","age":25}, //请求参数
function(data){ //执行成功后的回调函数
//{\"name\":\"tom\",\"age\":21}
alert(data.name);
},
"json"
);
}
function fn2(){
//post异步访问
$.post(
"/WEB22/ajaxServlet2", //url地址
{"name":"李四","age":25}, //请求参数
function(data){ //执行成功后的回调函数
alert(data.name);
},
"json"
);
}
function fn3(){
$.ajax({
url:"/WEB22/ajaxServlet2",
async:true,
type:"POST",
data:{"name":"lucy","age":18},
success:function(data){
alert(data.name);
},
error:function(){
alert("请求失败");
},
dataType:"json"
});
}
</script>
</head>
<body>
<input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
<br>
<input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
<br>
<input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span>
<br>
</body>
</html>
服务器端：
public class AjaxServlet2 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name+" "+age);
//java代码只能返回一个json格式的字符串
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}