Ajax 及裡面的XStream《黑馬程式員_超全面的JavaWeb視頻教程vedio》

標籤：request   可讀性   .class   表示   tca   設定   post   它的   非同步請求   

1. ajax是什麼?  * asynchronous javascript and xml：非同步js和xml  * 它能使用js訪問伺服器，而且是非同步訪問！  * 伺服器給用戶端的響應一般是整個頁面，一個html完整頁面！但在ajax中因為是局部重新整理，那麼伺服器就不用再響應整個頁面！而只是資料！    > text：純文字    > xml：大家都熟悉！！！    > json：它是js提供的資料互動格式，它在ajax中最受歡迎！2. 非同步互動和同步互動  * 同步：    > 發一個請求，就要等待伺服器的響應結束，然後才能發第二個請求！中間這段時間就是一個字“卡”    > 重新整理的是整個頁面！  * 非同步：    > 發一個請求後，無需等待伺服器的響應，然後就可以發第二個請求！    > 可以使用js接收伺服器的響應，然後使用js來局部重新整理！3. ajax應用情境  * 百度的搜尋方塊  * 使用者註冊時（校正使用者名稱是否被註冊過）4. ajax的優缺點  優點：  * 非同步互動：增強了使用者的體驗！  * 效能：因為伺服器無需再響應整個頁面，只需要響應部份內容，所以伺服器的壓力減輕了！  缺點：  * ajax不能應用在所有情境！  * ajax無端的增多了對伺服器的訪問次數，給伺服器帶來了壓力！====================================================================================ajax發送非同步請求（四步操作）1. 第一步（得到XMLHttpRequest）  * ajax其實只需要學習一個對象：XMLHttpRequest，如果掌握了它，就掌握了ajax！！！  * 得到XMLHttpRequest    > 大多數瀏覽器都支援：var xmlHttp = new XMLHttpRequest();    > IE6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");    > IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  * 編寫建立XMLHttpRequest對象的函數  function createXMLHttpRequest() {      try {          return new XMLHttpRequest();      } catch(e) {          try {          return new ActiveXObject("Msxml2.XMLHTTP");      } catch(e) {          try {              return new ActiveXObject("Microsoft.XMLHTTP");          } catch(e) {              alert("哥們兒，你用的是什麼瀏覽器啊？");              throw e;          }      }      }  }2. 第二步（開啟與伺服器的串連）  * xmlHttp.open()：用來開啟與伺服器的串連，它需要三個參數：    > 請求方式：可以是GET或POST    > 請求的URL：指定伺服器端資源，例如；/day23_1/AServlet    > 請求是否為非同步：如果為true表示發送非同步請求，否則同步請求！  * xmlHttp.open("GET", "/day23_1/AServlet", true);3. 第三步（發送請求）  * xmlHttp.send(null)：如果不給可能會造成部份瀏覽器無法發送！    > 參數：就是請求體內容！如果是GET請求，必須給出null。4. 第四步（）  * 在xmlHttp對象的一個事件上註冊監聽器：onreadystatechange  * xmlHttp對象一共有5個狀態：    > 0狀態：剛建立，還沒有調用open()方法;     > 1狀態：請求開始：調用了open()方法，但還沒有調用send()方法    > 2狀態：調用完了send()方法了；    > 3狀態：伺服器已經開始響應，但不表示響應結束了！    > 4狀態：伺服器響應結束！（通常我們只關心這個狀態！！！）  * 得到xmlHttp對象的狀態：    > var state = xmlHttp.readyState;//可能是0、1、2、3、4  * 得到伺服器響應的狀態代碼    > var status = xmlHttp.status;//例如為200、404、500  * 得到伺服器響應的內容1    > var content = xmlHttp.responseText;//得到伺服器的響應的文字格式設定的內容    > var content = xmlHttp.responseXML;//得到伺服器的響應的xml響應的內容，它是Document對象了！  xmlHttp.onreadystatechange = function() {//xmlHttp的5種狀態都會調用本方法      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷：判斷是否為4狀態，而且還要判斷是否為200          // 擷取伺服器的響應內容      var text = xmlHttp.responseText;      }  };====================================================================================第二例：發送POST請求(如果發送請求時需要帶有參數，一般都用POST請求)* open：xmlHttp.open("POST" ....);* 添加一步：設定Content-Type要求標頭：  > xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");* send：xmlHttp.send("username=zhangSan&password=123");//發送請求時指定請求體====================================================================================第三例：註冊表單之校正使用者是否註冊！1. 編寫頁面：  * ajax3.jsp    > 給出註冊表單頁面    > 給使用者名稱文字框添加onblur事件的監聽    > 擷取文字框的內容，通過ajax4步發送給伺服器，得到響應結果      * 如果為1：在文字框後顯示“使用者名稱已被註冊”      * 如果為0：什麼都不做！2. 編寫Servlet  * ValidateUsernameServlet    > 擷取用戶端傳遞的使用者名稱參數    > 判斷是否為itcast      * 是：返回1      * 否：返回0====================================================================================響應內容為xml資料  * 伺服器端：    > 設定回應標頭：ContentType，其值為：text/xml;charset=utf-8  * 用戶端：    > var doc = xmlHttp.responseXML;//得到的是Document對象！=====================第四例：響應內容為xml資料====================================================================================第五例：省市聯動1. 頁面  <select name="province">    <option>===請選擇省份===</option>  </select>  <select name="city">    <option>===請選擇城市===</option>    </select>2. ProvinceServlet  * ProvinceServlet：當頁面載入完畢後馬上請求這個Servlet！    > 它需要載入china.xml檔案，把所有的省的名稱使用字串發送給用戶端！3. 頁面的工作  * 擷取這個字串，使用逗號分隔，得到數組  * 迴圈遍曆每個字串（省份的名稱），使用每個字串建立一個<option>元素添加到<select name="province">這個元素中4. CityServlet  * CityServlet：當頁面選擇某個省時，發送請求！  * 得到省份的名稱，載入china.xml檔案，查詢出該省份對應的元素對象！，把這個元素轉換成xml字串，發送給用戶端5. 頁面的工作  * 把<select name="city">中的所有子項目刪除，但不要刪除<option>===請選擇城市===</option>  * 得到伺服器的響應結果：doc！！！  * 擷取所有的<city>子項目，迴圈遍曆，得到<city>的內容  * 使用每個<city>的內容建立一個<option>元素，添加到<select name="city">====================================================================================XStream1. 什麼作用  * 可以把JavaBean轉換為（序列化為）xml2. XStream的jar包  * 核心JAR包：xstream-1.4.7.jar；  * 必須依賴包：xpp3_min-1.1.4c（XML Pull Parser，一款速度很快的XML解析器）；3. 使用步驟  * XStream xstream = new XStream();  * String xmlStr = xstream.toXML(javabean);4. 使用細節  * 別名：把類型對應的元素名修改了    > xstream.alias("china", List.class)：讓List類型產生的元素名為china    > xstream.alias("province", Province.class)：讓Province類型產生的元素名為province  * 使用為屬性：預設類的成員，產生的是元素的子項目！我們希望讓類的成員產生元素的屬性    > xstream.useAttributeFor(Province.class, "name")：把Province類的名為name成員，產生<province>元素的name屬性  * 去除Collection類型的成名：我們只需要Collection的內容，而不希望Collection本身也產生一個元素    > xstream.addImplicitCollection(Province.class, "cities")：讓Province類的名為cities(它是List類型的，它的內容還會產生元素)的成名不產生元素  * 去除類的指定成名，讓其不產生xml元素    > xstream.omitField(City.class, "description")：在產生的xml中不會出現City類的名為description的對應的元素！====================================================================================JSON1. json是什麼  * 它是js提供的一種資料交換格式！2. json的文法  * {}：是對象！    > 屬性名稱必須使用雙引號括起來！單引不行！！！    > 屬性值：      * null      * 數值      * 字串      * 數組：使用[]括起來      * boolean值：true和false3. 應用json  * var person = {"name":"zhangSan", "age":18, "sex":"male"};4. json與xml比較* 可讀性：XML勝出* 解析難度：JSON本身就是JS對象（主場作戰），所以簡單很多* 流行度：XML已經流行好多年，但在AJAX領域，JSON更受歡迎。-----------------------------------json-lib1. 是什嗎？  * 它可以把javabean轉換成json串2. jar包  * 略3. 核心類  * JSONObject --> Map    > toString();    > JSONObject map = JSONObject.fromObject(person)：把對象轉換成JSONObject對象  * JSONArray --> List    > toString()    > JSONArray jsonArray = JSONObject.fromObject(list)：把list轉換成JSONArray對象

 

Ajax 及裡面的XStream《黑馬程式員_超全面的JavaWeb視頻教程vedio》