AJAX的使用

AJAX

Asynchronous JavaScript And Xml :異步JS和XML

同步請求:指傳統的在瀏覽器地址欄輸入URL.點超連接.表單提交.發送的都是同步請求.
RIA : Rich Internet application:富 Internet應用. RIA技術有不少種,每一個公司都有本身的RIA技術,AJAX只是其中一種.
也是應用最廣最受歡迎的一種,主要是成本低.

異步:在不刷新當前頁面的狀況下,從當前頁面的後臺發送請求給服務器,並在後臺接受響應並跟新當前頁面的不部分
而不是所有,這樣可使用戶在頁面上的操做變的連慣,從而實現更豐富的頁面效果,提高用戶體驗.

AJAX核心:瀏覽器從後臺發送請求節後響應的能力.(最先是在2005年在IE瀏覽器首次引入了RIA引擎),是一個
XMLHttpRequest的內置對象(此對象屬於瀏覽器).

若是使用:AJAX(GET):

獲取XMLHttpRequest對象: var req = new XMLHttpRequest();

req.open(); //設置發送異步請求的參數
req.send(); //發送異步請求
req.onreadystatechange 時間綁定處理函數
在處理函數中判斷req.readyState屬性的值是否爲4
4是正常接收響應信息完成(1 開始發送 2 發送完畢 3 開始接收)
判斷req.status是不是200(req.status是HTTP的狀態碼)
進行處理,獲得響應數據: req.responseText

POST方式:

發送異步請求時,若是使用POST方式
要提交的請求不能放在URL中,而是把查詢字符串放到send方法中
在調用send發送以前,須要設置請求頭.不然異步請求能夠發送,但提交的參數沒法發送到服務器.

在早期的AJAX中,使用XML格式來在服務器和瀏覽器之間傳遞數據的,因此一種更輕量化的數據格式來
替代XML.(JSON)

如何使用jQuery操做AJAX

導入jQuery
$( function(){ }) ;
$.get( url , params, function(){} , type)
url:字符串,請求發送的目標URL( 項目名稱/XML文件中配置的Servlet地址)
params:
QueryString : ' username = admin & password = 123'
JSON對象:{ username:' admin ' : passwrod : ' 123 ' }

function(data){}: 回掉函數,當響應正常接收完成後調用此函數,響應信息當成參數傳入此函數
響應信息的類型 : XML/html/script/json/text/_default

案例一:用戶註冊時提示用戶名是否可用

需求分析:在用戶註冊的界面中,當用戶填寫完用戶名以後,在用戶名的輸入框後面提示用戶名是否可用.

技術分析:當用戶輸完用戶名,須要發送異步請求的觸發事件:
onblur:輸入框失去焦點事件
onchange:當內容發生改變的事件

步驟分析:
建立一個註冊頁面,給用戶名的輸入框綁定onchange事件
當事件發生時,使用異步請求把用戶當前輸入的用戶名提交到UserServlet.checkUsername
在UserServlet.checkUsername中,接受請求獲得用戶名
調用業務邏輯,檢查用戶是否存在於數據庫中
返回結果(異步響應)

GoogleSuggest
需求分析:提交一個相似於百度的頁面,當用戶在輸入框中輸入內容時,隨着內容的變化,輸入框的下面
提示相關的關鍵字.輸入中文.拼音.拼音簡寫均可以.

技術分析:
綁定事件: keypress/keyup事件
查詢:數據庫中保存的關鍵字必須有中文,拼音和拼音簡寫
響應:老式的AJAX使用XML作爲數據傳遞的格式.可是XML過重,因此改用一種輕量級的數據格式
JSON
JSON:一種用字符串的形式表式數據的格式(語言無關),它是一個Map.
對象:{ key:value , key:value,..... key:{key2:value2} ,}
集合:[ {} ,{} ,{} ]
如何把服務器中的集合,轉換成JSON的字符串,發回給瀏覽器(json-lib工具)
JSONObject.fromObject(obj).toString()
JSONArray.fromObject(obj).toString()

步驟分析:
1.建立一個頁面,頁面中有一個文件輸入框和一個按鈕,輸入框響應keyup事件
2.當keyup事件發生時,發送一個異步請求到服務器,並提交輸入框中當前的內容
3.接受請求,獲得提交的關鍵字
4.調用業務邏輯,取得和關鍵字相關的全部提示項
5.把全部的提示想的集合轉換成JSON,發回給瀏覽器
6.瀏覽器發送完異步請求以後的回調函數中接收響應信息(data)
7.遍歷集合data集合,把其中的對象和關鍵字顯示到輸出框下面.

AJAX
異步JS與XML

做用:不離開當前頁面從瀏覽器後臺發請求給服務器,從後臺接受響應信息,更新當前頁面的一部分,而不是
所有,(整個頁面不會發生加載事件)
核心:XMLHttpRequest內置對象(瀏覽器提供的)

使用方式:
var req=new XMLHttpRequest();
req.open(); //設置發送異步請求的參數
req.send() //發送
req.onreadystatechange//事件綁定函數進行響應的處理
req.readyState值爲4時,說明響應內容接收完成
req.status屬性值是否爲200(正常)
req.responseTest屬性是響應的內容

jQuery框架操做AJAX的方式

$.get/$post(url,params,function(data){},type)

url:地址
params:
查詢字符串: ' username=admin & password=123 '
JSON對象:{ username:' admin ' , password : ' 123 ' ,salary:200 }
回調函數:當響應正常接收完成後調用的函數,此函數接收一個參數.
名字隨意,通常是data.就是響應的內容
type:返回值得類型(json/text)
JSON:輕量級的數據格式(語言無關)
對象:{ key:value.key:value,key2:{key21:value21,key22:value22} }
集合:[ {},{},{} ]
json-lib
JSONObject.fromObject(obj).toString()
JSONArray.formObject(collection),toString()

 

SQL語句:
select * from tb_keyword where chineseword like ‘%key%’ or pinyin like ‘%key%’ or jianxie like ‘%key%’;

CREATE TABLE tb_keyword( id VARCHAR(32) PRIMARY KEY, chineseword VARCHAR(30), pinyin VARCHAR(30), jianxie VARCHAR(30));INSERT INTO tb_keyword VALUES('k001','三國演義','sanguoyanyi','sgyy');INSERT INTO tb_keyword VALUES('k002','三國志','sanguozhi','sgz');INSERT INTO tb_keyword VALUES('k003','三國殺','sanguosha','sgs');INSERT INTO tb_keyword VALUES('k004','三毛流浪記','sanmaoliulangji','smllj');INSERT INTO tb_keyword VALUES('k005','宮心計','gongxinji','gxj');INSERT INTO tb_keyword VALUES('k006','西遊記','xiyouji','xyj');INSERT INTO tb_keyword VALUES('k007','宮鎖心玉','gongsuoxinyu','gsxy');