JavaScript Ajax和jQuery Ajax
一、Ajax概述
1.1什么是同步淳梦，什么是異步
- 同步現(xiàn)象：客戶端發(fā)送請求到服務器端析砸，當服務器返回響應之前，客戶端都處于等待 卡死狀態(tài)
- 異步現(xiàn)象：客戶端發(fā)送請求到服務器端爆袍，無論服務器是否返回響應首繁，客戶端都可以隨 意做其他事情，不會被卡死
1.2Ajax的運行原理
頁面發(fā)起請求陨囊，會將請求發(fā)送給瀏覽器內(nèi)核中的Ajax引擎弦疮，Ajax引擎會提交請求到 服務器端，在這段時間里蜘醋，客戶端可以任意進行任意操作挂捅，直到服務器端將數(shù)據(jù)返回 給Ajax引擎后，會觸發(fā)你設置的事件堂湖，從而執(zhí)行自定義的js邏輯代碼完成某種頁面功能闲先。
原理分析：
ajax原理.PNG
- 1.1使用JavaScript獲得瀏覽器內(nèi)置的AJAX引擎（XMLHttpRequest對象）
- 1.2通過AJAX引擎確定請求路徑和請求參數(shù)
- 1.3通知AJAX引擎發(fā)送請求
- AJAX引擎會在不刷新瀏覽器地址欄的情況下，發(fā)送請求
- 2.1服務器獲得請求參數(shù)
- 2.2服務器處理請求參數(shù)（添加无蜂、查詢等操作）
- 2.3服務器響應數(shù)據(jù)給瀏覽器
- AJAX引擎獲得服務器響應的數(shù)據(jù)伺糠，通過執(zhí)行JavaScript的回調(diào)函數(shù)將數(shù)據(jù)傳遞給瀏覽器頁面。
- 3.1通過設置AJAX引擎的回調(diào)函數(shù)獲得服務器響應的數(shù)據(jù)
- 3.2使用JavaScript在指定的位置斥季，顯示響應數(shù)據(jù)训桶，從而局部修改頁面的數(shù)據(jù)，達到局部刷新目的
二酣倾、JavaScript AJAX使用
js原生的Ajax其實就是圍繞瀏覽器內(nèi)內(nèi)置的Ajax引擎對象進行學習的舵揭，要使用js原生的Ajax完成異步操作，有如下幾個步驟：
1）創(chuàng)建Ajax引擎對象
2）為Ajax引擎對象綁定監(jiān)聽（監(jiān)聽服務器已將數(shù)據(jù)響應給引擎）
3）綁定提交地址
4）發(fā)送請求
5）接受響應數(shù)據(jù)
代碼：
客戶端：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function fn1(){
//1躁锡、創(chuàng)建ajax引擎對象 ---- 所有的操作都是通過引擎對象
var xmlHttp = new XMLHttpRequest();
//2午绳、綁定監(jiān)聽 ---- 監(jiān)聽服務器是否已經(jīng)返回相應數(shù)據(jù)
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相應數(shù)據(jù)
var res = xmlHttp.responseText;
document.getElementById("span1").innerHTML = res;
}
}
//3映之、綁定地址
xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
//4拦焚、發(fā)送請求
xmlHttp.send();
}
function fn2(){
//1、創(chuàng)建ajax引擎對象 ---- 所有的操作都是通過引擎對象
var xmlHttp = new XMLHttpRequest();
//2杠输、綁定監(jiān)聽 ---- 監(jiān)聽服務器是否已經(jīng)返回相應數(shù)據(jù)
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5赎败、接受相應數(shù)據(jù)
var res = xmlHttp.responseText;
document.getElementById("span2").innerHTML = res;
}
}
//3、綁定地址
xmlHttp.open("POST","/WEB22/ajaxServlet",false);
//4蠢甲、發(fā)送請求
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數(shù)據(jù)格式
json是一種與語言無關的數(shù)據(jù)交換的格式，作用：
- 使用ajax進行前后臺數(shù)據(jù)交換
- 移動端與服務端的數(shù)據(jù)交換
3.1Json的格式與解析
json有兩種格式：
1）對象格式：{"key1":obj,"key2":obj,"key3":obj...}
2）數(shù)組/集合格式：[obj,obj,obj...]
例如：
user對象 用json數(shù)據(jù)格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}
List<Product> 用json數(shù)據(jù)格式表示
[{"pid":"10","pname":"小米4C"},{},{}]
注意：
- 對象格式和數(shù)組格式可以互相嵌套
- json的key是字符串 json的value是Object
json的解析：
json是js的原生內(nèi)容鹦牛，也就意味著js可以直接取出json對象中的數(shù)據(jù)
案例一：
<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的轉(zhuǎn)換插件
將java的對象或集合轉(zhuǎn)成json形式字符串
json的轉(zhuǎn)換插件是通過java的一些工具搞糕，直接將java對象或集合轉(zhuǎn)換成json字符串。
常用的json轉(zhuǎn)換工具有如下幾種：
- 1）jsonlib
- 2）Gson：google
- 3）fastjson：阿里巴巴
1）json-lib工具：
json-lib是將java對象與json數(shù)據(jù)相互轉(zhuǎn)換的工具
第三方工具能岩，使用時需要導入jar包：
json-lib.PNG
常用對象：
- JSONObject,java對象（JavaBean寞宫、Map）與JSON數(shù)據(jù) 轉(zhuǎn)換工具類
- JSONArray,java集合（List、Array）與轉(zhuǎn)換工具類
常用方法：
- static fromObject(...),靜態(tài)方法拉鹃，用于將java對象或集合轉(zhuǎn)換成jsonlib對象辈赋。
- toString()將jsonlib對象轉(zhuǎn)換成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是一個優(yōu)秀的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])
開發(fā)中經(jīng)常使用的有三種
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
其中：
- url：代表請求的服務器端地址
- data：代表請求服務器端的數(shù)據(jù)（可以是key=value形式也可以是json格式）
- callback：表示服務器端成功響應所觸發(fā)的函數(shù)（只有正常成功返回才執(zhí)行）
- type：表示服務器端返回的數(shù)據(jù)類型（jquery會根據(jù)指定的類型自動類型轉(zhuǎn)換）
常用的返回類型：text、json近忙、html等
3）$.ajax( { option1:value1,option2:value2... } );
常用的option有如下：
- async：是否異步竭业，默認是true代表異步
- data：發(fā)送到服務器的參數(shù)智润，建議使用json格式
- dataType：服務器端返回的數(shù)據(jù)類型，常用text和json
- success：成功響應執(zhí)行的函數(shù)未辆，對應的類型是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}, //請求參數(shù)
function(data){ //執(zhí)行成功后的回調(diào)函數(shù)
//{\"name\":\"tom\",\"age\":21}
alert(data.name);
},
"json"
);
}
function fn2(){
//post異步訪問
$.post(
"/WEB22/ajaxServlet2", //url地址
{"name":"李四","age":25}, //請求參數(shù)
function(data){ //執(zhí)行成功后的回調(diào)函數(shù)
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);
}
}