【精選】Ajax技術知識點合集

Ajax技術詳解

Ajax簡介

Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式、快速動態應用的網頁開發技術，無需重新加載整個網頁的情況下，能夠更新頁面局部數據的技術。通過在后臺與服務器進行少量數據交換，Ajax 可以使頁面實現異步更新。這意味著可以在不重新加載整個頁面的情況下，對頁面的某部分進行更新。

Ajax 的使用

Ajax 的運行原理

在這里插入圖片描述

XMLHttpRequest 對象

? XMLHttpRequest 是瀏覽器接口對象，該對象的 API 可被 JavaScript、VBScript 以及其它web 瀏覽器內嵌的腳本語言調用，通過 HTTP 協議在瀏覽器和 web 服務器之間收發 XML 或其它數據。XMLHttpRequest 可以與服務器實現異步交互，而無需讓整個頁面刷新，因此成為 Ajax 編程的核心對象。

Ajax 的使用步驟

創建 XMLHttpRequest 對象

var xhr = new XMLHttpRequest();

給定請求方式以及請求地址

xhr.open("get","http://www.example.com");

發送請求

xhr.send()

獲取服務器端給客戶端的響應數據

xhr.onreadystatechange = function(){//0:請求未初始化//1:服務器連接已建立//2:請求已接收//3:請求處理中//4:請求已完成，且響應已就緒if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("span").innerHTML=xhr.responseText;alert(xhr.responseText);}
}

Ajax請求

請求的步驟：

正如您在上面的示例中所看到的，XMLHttpRequest對象起著重要作用

用戶從 UI 發送請求，JavaScript 中調用 XMLHttpRequest對象。
HTTP請求由XMLHttpRequest 對象發送到服務器。
服務器使用 JSP，PHP，Servlet，ASP.net 等與數據庫交互。
檢索數據。
服務器將 XML 數據或 JSON數據發送到 XMLHttpRequest 回調函數。
HTML和 CSS 數據顯示在瀏覽器上。

方法	描述
open(method,url,async)	規定請求的類型、URL 以及是否異步處理請求。method：請求的類型；GET 或 POST url：文件在服務器上的位置 async：true（異步）或 false（同步）
send(string)	將請求發送到服務器。string：僅用于 POST 請求

Ajax同步或異步

Async=true

當使用 async=true時，請規定在響應處于onreadystatechange事件中的就緒狀態時執行的函數

xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {document.getElementById("view").innerHTML = xhr.responseText;}        
}
xmlhttp.open("GET","get.txt",true);
xmlhttp.send();

Async = false

我們不推薦使用 async=false，但是對于一些小型的請求，也是可以的。JavaScript 會等到服務器響應就緒才繼續執行。如果服務器繁忙或緩慢，應用程序會掛起或停止。

xmlhttp.open("GET","get.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Ajax服務器響應

狀態行 xhr.status狀態碼，如200，304，404等；

響應主體 xhr.responseText與xhr.responseXML都表示響應主體。

如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的responseText或responseXML屬性。

屬性	描述
responseText	獲得字符串形式的響應數據。
responseXML	獲得 XML 形式的響應數據。

var xhr = new XMLHttpRequest();xhr.open("GET", "http://localhost:8080/xmlTest.xml", true);
xhr.send();xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {//解析返回的xml文件xmlDoc = xhr.responseXML;txt = "";x = xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++) {txt = txt + x[i].childNodes[0].nodeValue + "<br>";}document.getElementById("view").innerHTML = txt;}
}

JSON詳解

JSON簡介

JSON(JavaScript Object Notation) 是一種基于字符串的輕量級的數據交換格式。易于閱讀和編寫，同時也易于機器解析和生成。JSON 是 JavaScript 數據類型的子集。

為什么要使用 JSON

在 JSON 未出現之前在 Ajax 中對于數據傳遞方式，會使用 XML 作為主要數據格式來傳輸數據。直到 JSON 出現后逐漸放棄使用 XML 作為數據傳輸格式。JSON 比 XML 更小、更快、更易解析。

JSON 格式的特征
JSON的語法規則

JSON 是按照特定的語法規則所生成的字符串結構。

大括號表示 JSON 的字符串對象。{ } 屬性和值用冒號分割。{“屬性”:“value”} 屬性和屬性之間用逗號分割。{“屬性”:“value”,“屬性”:“value”,…} 中括號表示數組。[{“屬性”:“value”…},{“屬性”:“value”…}]

JSON 字符串對象：

{"userid":1,"username":"admin","sex":"male"}

數組：

[{"userid":1,"username":"admin"},{"userid":2,"username":"zhangsan"}]

JOSN的數據類型

string：字符串，必須要用雙引號引起來。
number：數值，與 JavaScript 的 number 一致，
object：JavaScript 的對象形式，{ key:value }表示方式，可嵌套。
array：數組，JavaScript 的 Array 表示方式[ value ]，可嵌套。
true/false：布爾類型，JavaScript 的 boolean 類型。
null：空值，JavaScript 的 null。

和XML的比較
可讀性

JSON和XML的可讀性可謂不相上下，一邊是簡易的語法，一邊是規范的標簽形式，很難分出勝負。

可擴展性

XML天生有很好的擴展性，JSON當然也有，沒有什么是XML可以擴展而JSON卻不能擴展的。不過JSON在Javascript主場作戰，可以存儲Javascript復合對象，有著xml不可比擬的優勢。

編碼難度

XML有豐富的編碼工具，比如Dom4j、Dom、SAX等，JSON也有提供的工具。無工具的情況下，相信熟練的開發人員一樣能很快的寫出想要的xml文檔和JSON字符串，不過，xml文檔要多很多結構上的字符。

JACKSON 的使用

? 在 JDK 中并沒有內置操作 JSON 格式數據的 API，因此使用處理 JSON 格式的數據需要借助第三方類庫。幾個常用的 JSON 解析類庫：

Gson: 谷歌開發的 JSON 庫，功能十分全面。
FastJson: 阿里巴巴開發的 JSON 庫，性能十分優秀。
Jackson: 社區十分活躍且更新速度很快。被稱為“最好的 Json 解析器”

Jackson 簡介

Jackson 是一種解析 JSON 格式數據的 API，也是最流行，速度最快的 JSON API，最新版本是2.13.3，有3個jar包需要下載：

jackson-core-2.13.3.jar（核心jar包）
jackson-annotations-2.13.3.jar（提供Json注解支持）
jackson-databind-2.13.3.jar（數據綁定，依賴于前兩個包）

在項目中引入Jackson

序列化

**使用Jackson把java對象轉換成Json數據。**首先，創建TestBean.java

public class TestBean {//idprivate String id;//姓名private String name;//嵌套對象private List<Element> elements;public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Elements getElements() {return elements;}public void setElements(Elements elements) {this.elements = elements;}
}}

再創建Element.java

public class Element {//年齡private Integer age;//呢稱private String ename;public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public String getEname() {return ename;}public void setEname(String ename) {this.ename = ename;}
}

把Java對象轉成Json

Element element = new Element();
element.setAge(23);
element.setEName("java");
ObjectMapper objectMapper = new ObjectMapper();
String elementStr = objectMapper.writeValueAsString(element);
System.out.println(elementStr);

輸出結果如下

{"age":23,"elName":"java"}

反序列化

把Json轉成Java對象

String str = "{\"id\":1,\"name\":\"zhangsan\",\"elements\":[{\"age\":22,\"elName\":\"xiaozhang\"},{\"age\":26,\"elName\":\"xiaosan\"}]}";
ObjectMapper objectMapper = new ObjectMapper();
TestBean testBean = objectMapper.readValue(str, TestBean.class);
System.out.println(testBean.toString());

輸出結果如下：

TestBean(id=1, name=haha, elements=[Element(age=22, elName=xiaozhang), Element(age=26, elName=xiaosan)])

常用注解

將這個注解加載類上，不存在的字段將被忽略。
```
@JsonIgnoreProperties(ignoreUnknown = true)
```

指定忽略字段

@JsonIgnoreProperties({ “password”, “secretKey” })

標在字段上，將忽略此字段
```
@JsonIgnore
```
標在時間字段上使用指定規則格式化（默認轉化成時間戳）
```
@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")
```
是否參與序列化

JsonInclude.Include.NON_EMPTY：屬性為空或者null都不參與序列化

JsonInclude.Include.NON_NULL：屬性為null不參與序列化
```
@JsonInclude(參數)
```
標在字段上，指定序列化后的字段名
```
@JsonProperty("firstName")
```

自定義某些類型字段的序列化與反序列化規則

@JsonDeserialize(using= T extends JsonDeserializer.class)
@JsonSerialize(using= T extends JsonSerializer.class)

Jquery 的 Ajax 使用

在這里插入圖片描述

在 JQuery 中提供了對 Ajax 的封裝，讓我們在使用 Ajax 技術時變得更加容易。在 JQuery 中提供了很多的基于 Ajax 發送異步請求的方法，如：$.ajax()、$.get()、$.post()、$.getJSON()。

$.ajax()在異步請求中提交數據

在$.ajax()方法中通過 data 屬性來存放提交的數據，支持 JSON 格式的數據

1，提交普通格式數據

在 data 屬性中我們可以通過兩種方式來指定需要提交的數據。一種是通過 name=value&name=value 的結構。另一種是通過 JavaScript 對象來指定提交數據。無論使用哪種方式在Servlet中都是通過request.getParameter方法根據name獲取value的。

通過 JavaScript 對象指定提交數據

data:{userid:100,username:"zhangsan"
}

2，提交 JSON 格式數據

在$.ajax()中提交 JSON 格式的數據需要使用 post 方式提交，通過 JSON.stringify()函數將 JavaScript 對象轉換成 JSON 格式的字符串。在 Servlet 中通過字符輸入獲取提交的 JSON 格式的數據。

data:JSON.stringify({name:value,name:value......})

在 Servlet 中通過 req.getReader().readLine()來獲取提交的數據。

$.ajax()處理響應中的 JSON 格式數據

$.ajax()方法會根據 dataType 屬性中的值自動對響應的數據做類型處理。如果響應的是一個 JSON 格式的數據，那么 dataType 的值為“JSON”,在回調函數中我們得到的直接就是 JSON 字符串轉換完的 JavaScript 對象。不需要在使用 JSON.parse()做格式的轉換處理。

$.get()的使用

$.get()方法是$.ajax()方法基于 get 方式發送異步請求的簡化版。

語法

$.get(url,function(result))

$.get(url,"name=value&name=value",function(result))

$.get(url,data,function(result))

$.get(url,{userid:1,username:"zhangsan",...},function(result))

$.post()的使用

$.post()方法是$.ajax()方法基于 post 方式發送異步請求的簡化版。

語法

$.post(url,function(result))

$.post(url,"name=value&name=value",function(result))

$.post(url,data,function(result))

$.post(url,{userid:1,username:"zhangsan",...},function(result))

$.getJSON()的使用

$.getJSON()方法是$.ajax()方法基于get方式發送異步請求，并將響應結果中JSON格式的字符串對象自動轉換為 JavaScript 對象。在使用該方法時要求返回的數據必須是 JSON 格式類型。$.getJSON()方法和 resp.setContentType("application/json")是一起使用的。

語法

$.getJSON(url,function(result))

$.getJSON(url,"name=value&name=value",function(result))

$.getJSON(url,data,function(result))

$.getJSON(url,{userid:1,username:"zhangsan",...},function(result))

serialize()方法的使用

將form 表單中的數據自動拼接成 name=value&name=value 結構。

語法

var param = $("form").serialize();

param 的值為：name=value&name=value