ajax的概述：（異步Javascript和XML）

Asynchronous Javascript And XML
可以使網頁實現異步更新，就是不重新加載整個網頁的情況下，對網頁某部分進行更新（局部更新），而傳統的網頁如果需要更新內容，就需要重載整個網頁頁面
Ajax = 異步JavaScript和XML，是一種新的思想，整合之前的多種技術，用于快速創建交互式網頁應用的網頁開發技術。

流程：

異步的請求；（XMLHTTPRequest）
依賴于XMLHTTPRequest對象。在發送請求的時候，原始頁面仍然可以使用，不會出現空擋和白板的情況。

學習Ajax的原因：
提升用戶體驗；
將部分的代碼寫到客戶端瀏覽器
實現頁面的局部刷新

---

js中的Ajax入門（了解）

步驟：
1）創建xmlHttpRequest對象
創建對象的代碼可以在api（W3School）中找到
JavaScript - AJAX - XHR創建對象
2）打開連接
get方式可以在地址后面攜帶參數
3）發送請求
post方式寫請求在里面
4）設置xmlHttpRequest對象狀態改變觸發的函數

XMLHttpRequest的對象的API
屬性：
1）onreadystatechange：（事件）監聽該對象的狀態的改變。
? 2）readyState：該屬性就記錄這個對象的狀態。一般情況下，瀏覽器能夠監聽到的狀態就是狀態2和狀態4，有時可以監聽到狀態3（看瀏覽器而定）,但我們最常用的狀態就是狀態4；
3）status：狀態碼 。（xmlHttpRequest對象返回后，一般要判定的有兩步，首先是readState狀態，然后就是狀態碼是否為200.）
? 4）responseText:獲得字符串形式的響應數據(響應體)。
? 5）responseXML :獲得 XML 形式的響應數據(響應體)

方法：
1）open() ：打開連接。傳遞三個參數。第一個是請求方式，第二個是請求路徑，第三個是否是異步的。第三個默認就是true，可以不寫
? 2）send([post請求的參數]): 發送請求。如果是get方式就可以不用寫參數，參數是拼接在了open中的地址欄中。
? 3）setRequestHeader()：解決POST請求參數的問題。 key和值

一）get請求方式：

<script>function AjaxDemo() {//1.創建xmlHttpRequest對象var xmlHttp = null;if (window.XMLHttpRequest) {// all modern browsersxmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) {// for IE5, IE6xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}//2.打開連接xmlHttp.open("GET","${pageContext.request.contextPath}/demo02?username=zs&password=123456");//3.發送請求xmlHttp.send();//4.設置對象狀態發生改變所觸發的函數xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState == 4 && xmlHttp.status == 200){var result = xmlHttp.responseText;alert(result);}};}</script>

二）post請求方式

<script>function AjaxDemo() {//1.創建xmlHttpRequest對象var xmlHttp = null;if (window.XMLHttpRequest) {// all modern browsersxmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) {// for IE5, IE6xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}//2.打開連接xmlHttp.open("POST", "${pageContext.request.contextPath}/demo03");//設置請求參數的mime類型xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");//3.發送請求xmlHttp.send("username=zs&password=123456");//4.設置狀態發生改變觸發的函數,處理結果xmlHttp.onreadystatechange = function() {if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {var result = xmlHttp.responseText;alert(result);}};}

---

jQuery的Ajax（重點）

使用jQuery之前一定要先引入jQuery文件；

1.1 為什么要使用JQuery的AJAX
在實際的開發通常使用JQuery的Ajax； ?
因為傳統(js里面)的AJAX的開發中，AJAX有兩個主要的問題：
? 1）瀏覽器的兼容的問題
2）編寫AJAX的代碼太麻煩而且很多都是雷同的。

1.2JQuery的Ajax的API(重點掌握)

- $.get(路徑, [請求參數] , [回調函數] , 數據類型) ; 數據類型：默認是字符串 - $.post(路徑, [請求參數], 回調函數, 數據類型); 數據類型：默認是字符串 - $.getJSON(url , 請求參數, 回調函數) 上述請求參數是一個json數據格式的；數據類型默認是字符串類型，可以省略不寫。除了請求方式不同之外，$.get()和$.post()方法幾乎完全一樣，使用方式也一樣

getJson的應用場景：
返回數據類型要求是json類型的時候，
跨域問題：這種方法可以解決跨域問題。

---

案例：校驗注冊用戶輸入的用戶名是不是已經被注冊

大致思路：
1）創建頁面
2）給用戶名輸入框設置失去焦點事件。
創建一個事件，onblue，
創建一個checkUserName()函數響應這個事件
獲得用戶輸入的用戶名，
發送Ajax請求（CheckUserNameServlet），
把用戶名帶過去，）
3）創建CheckUserNameServlet，
在doGet方法中獲取Ajax帶過來的用戶名，
調用UserService層，根據用戶名獲得User對象，判斷User對象是不是為空。
給用戶響應

頁面代碼：

<script type="text/javascript">var $username = $("#username");$username.blur(function(){$.get("${pageContext.request.contextPath}/checkUserName",{"username":this.value},function(result){$("#usernamespan").html("<font color='red'>"+result+"</font>");});})//result表示函數返回的響應體 </script> servlet中代碼：protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//獲取請求參數String username = request.getParameter("username");//調用service層進行查詢CheckUserNameService cs = new CheckUserNameService();User user = cs.findUserByName(username);//返回結果if(user != null){response.getWriter().print("用戶名已存在！");//這就是頁面中result中顯示的內容}else{response.getWriter().print("");}} catch (SQLException e) {System.out.println("查詢用戶名失敗");e.printStackTrace();}}

---

JSON數據格式：

概述:

格式：
json對象：
{ }
- 里面的值以key:value的形式存在,key是字符串
- 如果有多個中間通過,隔開
- value可以是任何合法的數據類型
JSON數組
格式[]
和普通數組格式類似，只不過里面的每個元素是一個json格式的對象

案例：

json生成工具：json-lib
需要導入的jar包比較多，是一個重量級的框架，功能比較全面；
（其他框架：其實Gson和FastJson用的比較多 ）
共需要導入6個包；

重要api：
JSONObject.fromObject(map或者javabean); 把map或者javabean轉成JSON對象{}
?JSONArray.fromObject(數組或者list);把數組/或者list轉成JSON數組

@Testpublic void test01(){JSONObject jsonObject = JSONObject.fromObject(new User());System.out.println(jsonObject.toString());}

json-lib:
1）把map或者javabean轉成JSON對象，返回時json格式
JSONObject.fromObject
2）List和Array轉換成為JSON對象，返回時數組格式，數組中是json
JSONArray.fromObject

---

案例二：使用JQ和AJAX完成模仿百度提示的效果，返回json數據

思路分析：
- 1）創建數據庫和頁面
- 給輸入框設置鍵盤抬起事件(keyup),創建一個匿名函數響應這個事件
- 2）在匿名函數里面:
? 獲得用戶輸入的關鍵詞
? 發送Ajax請求,把關鍵詞發送到WordServlet
? 拿到結果,展示頁面
- 3）創建WordServlet, 在doGet方法里面:
? 獲得Ajax帶過來的請求參數(關鍵詞)
? 調用業務,根據關鍵詞獲得List list
- ?4） 把list轉成Json數組,響應給前端
- 5）編寫WordService
- 6）編寫WordDao select *from words where word like “%aa%” limit 0,5;

注意要點：
* A.append(B):將B插入到A標簽的內部的后面（A標簽必須是jQuery對象，而B標簽可以是String，Element，jQuery）

頁面代碼：

<script>$("#inputId").keyup(function() {var keyword = this.value;var $show = $("#divId");if(keyword == null || keyword == "") {$show.hide();return;}//首先清除原來的數據$show.html("");$.getJSON("${pageContext.request.contextPath}/keyword", {"keyword": keyword}, function(result) {$show.show();$(result).each(function(index,element){$show.append("<tr><td>"+element.word+"</td></tr>");});});});</script>

servlet代碼：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");String keyword = request.getParameter("keyword");//調用service層KeywordService ks = new KeywordService();List<Keyword> list = ks.findKeyword(keyword);JSONArray jsonArray = JSONArray.fromObject(list);//System.out.println(jsonArray.toString());//返回結果response.getWriter().print(jsonArray);} catch (SQLException e) {System.out.println("數據庫查詢關鍵字失敗");e.printStackTrace();}}

總結

以上是生活随笔為你收集整理的Day24-Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。