關於Ajax異步請求

AJAX

AJAX引言

​ a)概念: ansychronous(異步) javascript(js) and xml(全稱,異步javaScript and XML)

​ b)傳統請求

​ i.發起傳統的請求?

​ 1.地址欄

​ 2.超級鏈接

​ 3.JavaScript:location.href

​ 4.表單

​ ii.傳統請求的問題

​ 1.同步請求響應的是新的頁面,所以用戶就必須等待響應結果,纔可以進 行後續操作.

​ 2.用戶體驗差

​ iii.異步請求的特點

​ 1.響應的內容不是新的頁面,是一個頁面的局部信息,所以用戶再使用異步請求的時候,不需要等待響應 .

​ iv.傳統請求與異步請求的區別

​ 1.響應內容

​ 傳統響應的內容:新的頁面,刷新頁面

​ 異步響應的內容:頁面的局部,字符串信息

​ 2.對於用戶的操作

​ 傳統的請求:等待響應

​ 異步的請求:不需要等待響應,用戶可以直接進行後續操作

​ v.建議在合適的場景下,都使用異步請求,提高用戶的體驗

異步請求的開發

​ a)什麼是異步請求

​ javascript:XmlHttpRequest對象 簡稱xhr

​ Chrome|FF|sofia中 XmlHttpRequest

​ var xhr = new XmlHttpRequest();

​ IE中 ActiveXObject

​ var xhr = new ActiveXObject(“Microsoft.XMLHHTP”);

​ b)xhr對象的使用

​ 1.創建xhr對象

​ 2.發送請求

​ a)如何發送請求

​ xhr.open("get | | post,url);

​ b)如何傳遞數據

​ xhr.send(null);

​ 3.監聽響應

​ xhr.readstate屬性的值

​ 0 xhr對象被創建,並沒有調用send()方法時

​ 1 xhr對象調用了send()方法,沒有響應

​ 2 xhr對象調用了send()方法,響應已經返回client

​ 3 響應解析

​ 4 響應解析完成,並可以使用

​ xhr.status 響應是否正確

​ 響應碼 錯誤的響應碼404,405,400,500 ,正確的響應碼是200

​ xhr.onreadstatechange = function(){

​ //判斷響應是否完成,響應是否正確

​ if(xhr.readstate4 && xhr.status200){

​ 獲得響應的文本 xhr.responseText

​ JavaScript 的DOM編程 加入頁面中

​ }

​ }

注意:使用ajax 服務器端不在進行頁面的跳轉,而是通過返回字符串信息,完成交互,request作用域,不使用.底層是用Response.getWriter()獲取輸出流,進行交互.

發送請求(post)

​ xhr.open(“POST”,url);

​ 設置xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”);

​ 爲什麼設置:模擬表單

​ 基於web開發,只能使用表單提交數據,使用表單提交數據時默認指定enctype=“application/x-www-form-urlencoded”,但是現在使用ajax編程,不再使用<form標籤了也就沒有方式提供enctype屬性對應的值了,那麼這時候需要通過請求中手工設置application/x-www-urlencode來模擬表單.

​ xhr.send(“name=suns&pwd=123&sex=male”);

JSON協議串

​ JSON協議串,本質上就是一個字符串

​ 作用:異構(不同的編程語言)的編程體系中,進行數據的傳輸,交互.

​ java中的對象或集合轉換json協議串的格式:

​ java對象轉json

User{           
    id=1;
    username="張三";
    password="123456";
}

json協議串
{"id":1,"username":"張三","password":"123456"}

​ java數組轉json

java
String [] ids={"嘻嘻","哈哈","嘿嘿"};

json
["嘻嘻","哈哈","嘿嘿"]

​ java集合[list,set]轉json

java

List<User>

User{
id=1;
username="小黑";
password="123456";
}

User{
id=2;
username="小白";
password="123456";
}

json

[{"id":1,"username":"小黑","password":"123456"},{"id":2,"username":"小白","password":"123456"}]

​ java的Map集合轉json

java

Map<String,String>   maps = new HashMap<>();

maps.put("username","小黑");
maps.put("password","123456")
   
Map集合轉json與對象形式保持一致

json

{"username":"小黑","password":"123456"}

​ json協議串轉換工具

​ FastJSON(alibaba) GSON(GOOGLE) JACKSON(SpringMVC)

​ FastJSON的使用步驟

1. 引入FastJSON的相關依賴

2. 使用FastJSON進行轉換

3. @JSONField註解

   1. @JSONField(serialize=false) 作用:在進行JSON協議串轉換時,排除該屬性.
   2. @JSONField(name=“name”) 作用:指定轉換後json協議串的屬性名
   3. @JSONField(format=“yyyy-MM-dd”) 作用:指定日期轉換格式

4. JSON協議串轉換java對象或集合

   1. JSON協議串轉對象

      1. 類名 引用名 = JSON.parseObject(jsonString,類名.class);

   2. JSON協議串轉List集合

      1. List users = JSON.parseArray(jsonString,User.class);

   3. JSON協議串轉set集合(Set類型)

      1. Set set = JSON.parseObject(jsonString,Set.class);

   4. JSON協議串轉Map

      1. Map <String,String> maps = new HashMap<>();
         maps.put("username","張三");
         maps.put("password","123456");
         String jsontoString = JSONtoString()
         

GSON的使用步驟

1. 引入GSON的相關依賴

2. java中的集合和對象轉JSON

   1. User user = new User(1,"張三","123456");
      Gson gson = new Gson;
      String  json = gson.toJson(user);
      

3. JSON轉對象或者集合

   1. User user = new User(1,"張三","123456");
      Gson gson = new Gson;
      String  json = gson.toJson(user);
      User  user1 = gson.fromJson(json,User.class);