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

Asynchronous Javascript And XML
可以使網(wǎng)頁實現(xiàn)異步更新，就是不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁某部分進(jìn)行更新（局部更新），而傳統(tǒng)的網(wǎng)頁如果需要更新內(nèi)容，就需要重載整個網(wǎng)頁頁面
Ajax = 異步JavaScript和XML，是一種新的思想，整合之前的多種技術(shù)，用于快速創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

流程：

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

學(xué)習(xí)Ajax的原因：
提升用戶體驗；
將部分的代碼寫到客戶端瀏覽器
實現(xiàn)頁面的局部刷新

---

js中的Ajax入門（了解）

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

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

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

一）get請求方式：

<script>function AjaxDemo() {//1.創(chuàng)建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.發(fā)送請求xmlHttp.send();//4.設(shè)置對象狀態(tài)發(fā)生改變所觸發(fā)的函數(shù)xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState == 4 && xmlHttp.status == 200){var result = xmlHttp.responseText;alert(result);}};}</script>

二）post請求方式

<script>function AjaxDemo() {//1.創(chuàng)建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");//設(shè)置請求參數(shù)的mime類型xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");//3.發(fā)送請求xmlHttp.send("username=zs&password=123456");//4.設(shè)置狀態(tài)發(fā)生改變觸發(fā)的函數(shù),處理結(jié)果xmlHttp.onreadystatechange = function() {if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {var result = xmlHttp.responseText;alert(result);}};}

---

jQuery的Ajax（重點(diǎn)）

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

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

1.2JQuery的Ajax的API(重點(diǎn)掌握)

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

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

---

案例：校驗注冊用戶輸入的用戶名是不是已經(jīng)被注冊

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

頁面代碼：

<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表示函數(shù)返回的響應(yīng)體 </script> servlet中代碼：protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//獲取請求參數(shù)String username = request.getParameter("username");//調(diào)用service層進(jìn)行查詢CheckUserNameService cs = new CheckUserNameService();User user = cs.findUserByName(username);//返回結(jié)果if(user != null){response.getWriter().print("用戶名已存在！");//這就是頁面中result中顯示的內(nèi)容}else{response.getWriter().print("");}} catch (SQLException e) {System.out.println("查詢用戶名失敗");e.printStackTrace();}}

---

JSON數(shù)據(jù)格式：

概述:

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

案例：

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

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

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

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

---

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

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

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

頁面代碼：

<script>$("#inputId").keyup(function() {var keyword = this.value;var $show = $("#divId");if(keyword == null || keyword == "") {$show.hide();return;}//首先清除原來的數(shù)據(jù)$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");//調(diào)用service層KeywordService ks = new KeywordService();List<Keyword> list = ks.findKeyword(keyword);JSONArray jsonArray = JSONArray.fromObject(list);//System.out.println(jsonArray.toString());//返回結(jié)果response.getWriter().print(jsonArray);} catch (SQLException e) {System.out.println("數(shù)據(jù)庫查詢關(guān)鍵字失敗");e.printStackTrace();}}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。