JS原生Ajax&Jquery的Ajax技術&Json
1.介紹Ajax
Ajax = 非同步 JavaScript 和 XML
Ajax是一種建立快速動態網頁的技術
通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以不用整個頁面進行重新整理而是可以進行區域性重新整理。這也是使用Ajax 的優點而傳統頁面如果要更新內容，必須過載整個網站頁面。
1.1什麼是同步，什麼是非同步
- 同步現象：客戶端傳送請求到伺服器端，當伺服器返回響應之前，客戶端都處於等待 卡死狀態
- 非同步現象：客戶端傳送請求到伺服器端，無論伺服器是否返回響應，客戶端都可以隨 意做其他事情，不會被卡死
1.2Ajax的執行原理
頁面發起請求，會將請求傳送給瀏覽器核心中的 Ajax 引擎，Ajax 引擎會提交請求到伺服器端，在這段時間裡，客戶端可以任意進行任意操作，直到伺服器端將資料返回 給Ajax引擎後，會觸發你設定的事件，從而執行自定義的js邏輯程式碼完成某種頁面1 功能。
2.JS原生的Ajax技術
js 原生的 Ajax 其實就是使用瀏覽器內建的 Ajax 引擎，要使用 js 原生的 Ajax 完成非同步操作，有如下幾個步驟：
- 建立Ajax引擎物件
- 為Ajax引擎物件繫結監聽（監聽伺服器已將資料響應給引擎）
- 繫結提交地址
- 傳送請求
- 接受響應資料
通過非同步訪問伺服器
1 function fun1() { 2 //1.建立ajax引擎物件----所有的操作都是通過引擎物件 3 var xmlHttp = new XMLHttpRequest(); 4 5 //2.繫結監聽---- 監聽伺服器是否已經返回響應 6 xmlHttp.onreadystatechange = function() { 7 8 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 9 //5.接收相應資料 10 var res = xmlHttp.responseText; 11 //alert(res); 12 document.getElementById("span1").innerHTML = res; 13 } 14 } 15 //3.繫結地址 16 xmlHttp.open("GET", "/WEB22/ajaxServlet?name=lisi", true); 17 //4.傳送請求 18 xmlHttp.send(); 19 }
需要注意的是 open 方法第三個引數可以控制是否非同步，true是非同步，false是同步下面是通過同步訪問伺服器
1 function fn2() {
2 //1.建立ajax引擎物件----所有的操作都是通過引擎物件
3 var xmlHttp = new XMLHttpRequest();
4
5 //2.繫結監聽---- 監聽伺服器是否已經返回響應
6 xmlHttp.onreadystatechange = function() {
7
8 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
9 //5.接收相應資料
10 var res = xmlHttp.responseText;
11 //alert(res);
12 document.getElementById("span2").innerHTML = res;
13 }
14 }
15 //3.繫結地址
16 xmlHttp.open("POST", "/WEB22/ajaxServlet", false);
17 //4.傳送請求
18 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
19 xmlHttp.send("name=wangwu");
20 }此時GET和POST需要注意的是GET可以在直接在伺服器使用 request.getParameter("name") 的方式來獲取，而POST需要處理一下需要修改一下請求頭如上面18行程式碼，然後在在通過傳送send() 方法傳送到伺服器，傳送內容可以寫到引數裡。
3.Json介紹
因為下面需要使用到Json所以我們先來說一下 Json 剛開始不瞭解的時候以為是一個很難的東西，但學過之後才發現原來是啦麼簡單，Json是一種取代 XML 的資料結構，和 XML 相比，它更小巧但描述能力卻不差，由於它的小巧所以網路傳輸資料將減少更多流量從而加快速度。說白了Json就是資料的一種交換方式。
3.1Json的格式與解析
Json有兩種格式：
- 物件格式：{"key1":obj,"key2":obj,"key3":obj...}
- 陣列/集合格式：[obj,obj,obj...]
eg：user 物件 用 json 資料表示
物件格式：
{"username":"zhr","age":21,"password":"1234","addr":"北京"} 陣列格式var json = {
"shuzu1" : [
{
"name" : "小雙",
"age" : 28,
"addr" : "揚州"
},
{
"name" : "建寧",
"age" : 18,
"addr" : "四川"
},
{
"name" : "阿珂",
"age" : 10,
"addr" : "山西"
}
],
"shuzu2" : [
{
"name" : "張爽",
"age" : 25,
"addr" : "吉林"
},
{
"name" : "建",
"age" : 18,
"addr" : "四"
},
]
};
alert(json.shuzu1[1].name);//建var json = {
"key1" : "value1",
"key2" : {
"name" : "小雙",
"age" : 28,
"addr" : "揚州"
},
"key3" : [
{
"name" : "小雙",
"age" : 28,
"addr" : "揚州"
},
{
"name" : "小雙",
"age" : 28,
"addr" : "揚州"
},
{
"name" : "小雙",
"age" : 28,
"addr" : "揚"
}
]
};
alert(json.key1); //value1
alert(json.key2.age); //28
alert(json.key3[2].addr); //揚3.2Json 的轉換外掛
將java的物件或集合轉成json形式字串
json的轉換外掛是通過java的一些工具，直接將java物件或集合轉換成json字串。
常用的json轉換工具有如下幾種：
- jsonlib
- Gson：google
- fastjson：阿里巴巴
4.Jquery的Ajax技術
jquery是一個優秀的js框架，自然對js原生的ajax進行了封裝，封裝後的ajax的操 作方法更簡潔，功能更強大，與ajax操作相關的jquery方法有如下幾種，但開發中 經常使用的有三種
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：請求伺服器端地址
jquery_ajax.html
<!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){//執行成功後的回撥函式
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(data){
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="span3"></span>
<br>
</body>
</html>AjaxServlet.java
package com.zhr.ajax;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet2 extends HttpServlet {
private static final long serialVersionUID = 1L;
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);
}
}