Ajax

作用：

後臺與伺服器進行少量資料交換，實現非同步更新

使用步驟：

建立XMLHttpRequest物件：var xhr = new XMLHttpRequest();

給定請求方式與請求地址：xhr.open(“get”,“www.example.com”);

傳送請求：xhr.send();

獲取伺服器端給客戶端的響應資料：

• xhr.onreadystatechange = function(
• //0:open()沒有被呼叫//1:open()正在被呼叫
• //2:send()正在被呼叫//3:服務端正在返回結果
• //4:請求結束，並且服務端已經結束髮送資料到客戶端
• if(xhr.readyState == 4 && xhr.status == 200){
• document.getElementById(“span”).innerHTML=xhr.responseText;
• alert(xhr.responseText);}

伺服器端設定響應

JSON

基於字串的輕量級資料交換格式，易於人閱讀和編寫

資料型別：

• string：字串，必須要用雙引號引起來。
• number：數值，與 JavaScript 的 number 一致
• object：JavaScript 的物件形式，{ key:value }表示方式，可巢狀
• array：陣列，JavaScript 的 Array 表示方式[ value ]，可巢狀。
• true/false：布林型別，JavaScript 的 boolean 型別。
• null：空值，JavaScript 的 null。

Jackson

• 解析json格式的AIP

• 在響應中通過json格式傳遞字串

  • 新增 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar

  • 通過 jackson API 將 Java 物件轉換 JSON 格式

  • 修改響應頭，響應型別為 application/json

  • 將結果基於字元輸出流推回客戶端瀏覽器

  • 在頁面的中通過 JavaScript 的 JSON.parse()函式將 JSON 格式的資料轉換為 JavaScript物件

• 前後臺請求傳送與接收JSON資料

  • 前臺傳送JSON資料

    • 獲取前臺資料到函式獲取前臺資料到函式：document.getElementById（）.value

    • 定義js物件（與要封裝的物件引數名一致）：obj = {username:name,userid:id}

    • 轉換為JSON格式： JSON.stringify(obj)

    • 基於post方式提交資料

  • 後臺接收JSON資料

    • 通過字元輸入流從請求體中獲取提交的JSON格式的資料req.getReader().readLine();
    • 使用Jackson將JSON格式的資料轉換為java物件

• jackson常用註解

  • @JsonProperty

    • 此註解用於屬性上，作用是把該屬性的名稱序列化為另外一個名稱，如把 username 屬性序列化為 name，@JsonProperty(“name”)。

  • @JsonIgore

    • 此註解用於屬性或者方法上（一般都是定義在屬性上），用來完全忽略被註解的欄位和方法對應的屬性，返回的 json 資料即不包含該屬性。

  • @JsonFormat

    • 此註解用於屬性或者方法上（一般都是定義在屬性上），可以方便的把 Date 型別屬性10的值直接轉化為我們想要的樣式。如：@JsonFormat(pattern=“yyyy-MM-dd hh:mm:ss”)

jquery中Ajax的使用

$.ajax()在非同步請求中提交資料

• 提交普通格式資料

  • 基於JavaScript提交資料
  • 獲取前臺資料：$("#username").var();
  • 使用$.ajax({type,url,data,success:function(result)})傳送請求資料，並將返回值在頁面輸出
  • 後臺通過 request.getParameter 方法獲取請求引數

• 提交 JSON 格式資料

  • 在$.ajax()中提交 JSON 格式的資料需要使用 post 方式提交

  • 通過 JSON.stringify()函式將JavaScript 物件轉換成 JSON 格式的字串

  • 在 Servlet 中通過字元輸入獲取提交的 JSON 格式的資料。

• $.ajax()處理響應中的 JSON 格式資料

  • $.ajax()方法會根據 dataType 屬性中的值自動對響應的資料做型別處理。

$.get()的使用

• （$.get()方法是$.ajax()方法基於 get 方式傳送非同步請求的簡化版。）

• 語法結構

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

• 通過標準格式指定提交資料

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

• 通過 JavaScript 物件指定提交資料

  • $.get(url,{userid:1,username:”oldlu”,…},function(result))

$.post()的使用

• （$.post()方法是$.ajax()方法基於 post 方式傳送非同步請求的簡化版。）

• 語法結構

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

• 通過標準格式指定提交資料

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

• 通過 JavaScript 物件指定提交資料

  • $.post(url,{userid:1,username:”oldlu”,…},function(result))

$.getJSON()的使用

• （$.getJSON()方法是$.ajax()方法基於 get 方式傳送非同步請求，並將響應結果中 JSON 格式的字串物件自動轉換為 JavaScript 物件。）在使用該方法時要求返回的資料必須是 JSON 格式型別。$.getJSON()方法和 resp.setContentType(“application/json”)是一起使用的。

• 語法結構

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

• 通過標準格式指定提交資料

  • $.getJSON(url,”name=value&name=value”,function(result))
  • 要求返回的資料格式必須是 JSON 格式。

• 通過 JavaScript 物件指定提交資料

  • $.getJSON(url,{userid:1,username:”oldlu”,…},function(result))
  • 要求返回的資料格式必須是 JSON 格式。

serialize()方法的使用

• 將 form 表單中的資料自動拼接成 name=value&name=value 結構。

  • 語法結構

    • var param = $(“form”).serialize();

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