1.什么是ajax,為什么要使用ajax?
ajax是“Asynchronous JavaScript and XML”的縮寫。它是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。
ajax包含下列技術:
基于web標準(standards-basedpressentation)XHTML+CSS的表示;
使用DOM(document objectModel)進行動態(tài)顯示及交互;
使用XML和XSLT進行數(shù)據(jù)交換及相關操作;
使用XMLHttpRequest進行異步數(shù)據(jù)查詢、檢索;
使用JavaScript將所有的東西綁定在一起。
2.ajax最大的特點。
ajax可以實現(xiàn)動態(tài)不刷新(局部刷新)
就是能在不更新整個頁面的前提下維護數(shù)據(jù)。這使得Web應用程序更為迅捷地回應用戶動作,并避免了在網(wǎng)絡上發(fā)送哪些沒有改變過的信息。
3.XMLHttprequest對象。
ajax的核心是JavaScript對象XMLHttprequest。該對象在Internet Explorer 5中首次引入,他是一種支持異步請求的技術。簡而言之,XMLHttprequest可以在使用JavaScript向服務器提出請求并處理響應,而不阻塞用戶。通過XMLHttprequest對象,Web開發(fā)人員可以在頁面加載以后進行頁面的局部更新。
通過XMLHttprequest對象,Web開發(fā)人員可以在頁面加載以后進行頁面的局部更新。
ajax開始流行始于Google在2005年使用“Google Suggest”。
“Google Suggest”就是使用XMLHttprequest對象來創(chuàng)建動態(tài)的Web接口:
當用戶開始輸入google的搜索框,JavaScript發(fā)送用戶輸入的字符到服務器,然后服務器返回一個建議列表。
XHMLHttprequest對象在IE 5.0+,Safari 1.2,Mozillal 1.0/Firefox,Opera 8+和NetScapt 7開始被支持。
4.HMLHttprequest對象常用方法和屬性。
open()建立對服務器的調(diào)用,第一個參數(shù)是HTTP請求,方式可以為GET,POST或者服務器所支持的方式;
第二個參數(shù)是請求頁面的URL;
第三個參數(shù)是判斷更新方式,true為異步,false為同步。
send()方法,發(fā)送具體請求。
abort()方法,停止當前請求。
readyState屬性,請求的狀態(tài),有5個可取的值:0=為初始化,1=正在加載,2=已加載,3=交互中,4=完成。
reponseText屬性 服務器的響應,表示為一個串。
reponseXML屬性 服務器的響應,表示為XML。
status服務器的HTTP狀態(tài)碼,200對應ok,400對應not found。
5.XMLHttprequest對象在IE和Firefox中創(chuàng)建方式的不同。
IE中通過new ActiveXObject()得到,F(xiàn)irefox中通過new XMLHttprequest()得到。
6.XML。
XML是擴展標記語言,能夠用一系列簡單的標記描述數(shù)據(jù)。
7.HTTP協(xié)議的主要特點。
1>.支持客戶端/服務端模式,即請求(request)-響應(reponse)模式;
2>.簡單快捷,客戶端向服務區(qū)發(fā)送請求時,只需要傳送請求方式和路徑即可,所以簡單,由于HTTP協(xié)議簡單,使得HTTP服務器的程序規(guī)模小,因而速度很快;
3>.靈活,傳輸數(shù)據(jù)類型種類多;
4>.無連接,請求一次服務器后立刻斷開連接,即非長連接,即短連接。
5>.無狀態(tài),HTTP協(xié)議對事物處理沒有記憶能力。
8.GET和POST的比較。
共同點:都是向服務器請求數(shù)據(jù)的方式
| GET | POST |
|---|---|
| 數(shù)據(jù)放在地址欄后 ?reg=123&psw=123 | send(數(shù)據(jù)參數(shù)) |
| 數(shù)據(jù)量小 | 數(shù)據(jù)量大 |
| 安全性低 | 安全性高 |
| 傳輸速度快 | 傳輸速度慢 |
9.ajax的一般封裝
/* 參數(shù):
obj 是1個對象,代表參數(shù)的集合,里面有很多參數(shù),如下所示:
url 請求的地址與參數(shù)
data 發(fā)送的數(shù)據(jù),要求格式是對象
async 是否是同步, true / false
fail 失敗的處理回調(diào)函數(shù)
success 成功的處理回調(diào)函數(shù)
*/
(function(){
ajax=window.ajax={};
ajax.get=function(obj){
if(obj.async==undefined){
obj.async=true;
}
if(obj.data==undefined){
obj.data="";
}
var xhr=new XMLHttpRequest();
var url=obj.url;
url+="?";
url+=translate(obj.data);
xhr.open("GET",url,obj.async);
xhr.send();
if(obj.async==true){
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var str=xhr.responseText;
obj.success&&obj.success(str);
}else{
obj.fail&&obj.fail();
}
}
}
}else{
if(xhr.status==200){
var str=xhr.responseText;
obj.success&&obj.success(str);
}else{
obj.fail&&obj.fail();
}
}
}
ajax.post=function(obj){
if(obj.async==undefined){
obj.async=true;
}
if(obj.data==undefined){
obj.data="";
}
var xhr=new XMLHttpRequest();
var url=obj.url;
xhr.open("POST",url,obj.async);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(obj.data);
if(obj.async==true){
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var str=xhr.responseText;
obj.success&&obj.success(str);
}else{
obj.fail&&obj.fail();
}
}
}
}else{
if(xhr.status==200){
var str=xhr.responseText;
obj.success&&obj.success(str);
}else{
object.fail&&obj.fail();
}
}
}
function translate(obj){
var str="";
for(var i in obj){
str+=i;
str+="=";
str+=encodeURIComponent(obj[i]);
str+="&";
}
var str=str.substr(0,str.length-1);
return str;
}
})();
這里使用立即執(zhí)行函數(shù)封裝起來是為了防止變量污染。
10.同源和跨域
同源:要求1.協(xié)議一致;2.域名字符串一致(每個符號都要一致);3.端口一致。
跨域:1.ajax不可以跨域(在服務器端不支持的情況下(默認),ajax不能跨域,請求不到數(shù)據(jù));2.img,css,script,iframe都可以跨域。