AJAX的使用

標籤：array   rod   使用者   調用   let   狀態代碼   方式   word   ready   

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‘);

AJAX的使用