【精選】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對象起著重要作用

1. 用戶從 UI 發送請求，JavaScript 中調用 XMLHttpRequest對象。
2. HTTP請求由XMLHttpRequest 對象發送到服務器。
3. 服務器使用 JSP，PHP，Servlet，ASP.net 等與數據庫交互。
4. 檢索數據。
5. 服務器將 XML 數據或 JSON數據發送到 XMLHttpRequest 回調函數。
6. 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的數據類型

1. string：字符串，必須要用雙引號引起來。
2. number：數值，與 JavaScript 的 number 一致，
3. object：JavaScript 的對象形式，{ key:value }表示方式，可嵌套。
4. array：數組，JavaScript 的 Array 表示方式[ value ]，可嵌套。
5. true/false：布爾類型，JavaScript 的 boolean 類型。
6. 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 解析類庫：

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

Jackson 簡介

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

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

在項目中引入Jackson

序列化

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

public class TestBean {
  //id
  private 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)])

常用注解

1. 將這個注解加載類上，不存在的字段將被忽略。

   @JsonIgnoreProperties(ignoreUnknown = true)
   

2. 指定忽略字段

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

3. 標在字段上，將忽略此字段

   @JsonIgnore
   

4. 標在時間字段上使用指定規則格式化（默認轉化成時間戳）

   @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")
   

5. 是否參與序列化

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

   JsonInclude.Include.NON_NULL：屬性為null不參與序列化

   @JsonInclude(參數)
   

6. 標在字段上，指定序列化后的字段名

   @JsonProperty("firstName")
   

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

   @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