author:鵬鵬袋? day:2015.01.24

AJAX詳解

ajax是實(shí)現(xiàn)頁(yè)面異步加載.

常用于,前后端數(shù)據(jù)交互,實(shí)現(xiàn)前端頁(yè)面無刷新更改操作.

是web前端和后端使用者開發(fā)的必備使用技能~~

Ajax操作~???:

俗話原理:用俗話來說,就是把數(shù)據(jù)傳送過去,然后再?gòu)暮竺娅@取到數(shù)據(jù)回來使用

(JS原生使用AJAX)

Get請(qǐng)求操作五步走~

1:創(chuàng)建ajax對(duì)象

2:設(shè)置回調(diào)對(duì)象

3:初始化ajax對(duì)象

4:發(fā)送ajax對(duì)象

5:判斷與執(zhí)行

參數(shù)詳解:

new?XMLHttpRequest()?:調(diào)用ajax對(duì)象

Url?:要傳送數(shù)據(jù)過去的地址

Xhr.status返回狀態(tài)碼,?200為成功?其他為失敗

xhr.responseText?:回調(diào)數(shù)據(jù)

代碼如下:

window.onload=function(){

//獲取事件

//(document.getElementById(xx)獲取事件

$('GO').onclick=function(){

var?one=$('one').value;

var?two=$('two').value;

var?xhr=new?XMLHttpRequest();

//設(shè)置回調(diào)

xhr.onreadystatechange=?function(){

if(xhr.readyState==4?&&?xhr.status==200){

alert(xhr.responseText);

}

}

//設(shè)置頭信息

var?url?='02.php?&one='?+?one?+?'&two='?+?two?+?'&_='?+?Math.getHouse()';

//初始化ajax

xhr.open('get',url);

//發(fā)送ajax對(duì)象

xhr.send(null);

}

}

(JQ方式使用Ajax)?:最常用!

$.ajax({

url?:?'xxx.php',//傳送過去的url地址

type:?'get',//傳遞方式GET?,?POST

data:?{a:a,b:b},//傳送過去的數(shù)據(jù){'那邊接收':'這邊的數(shù)據(jù)'}

success:?function(msg){

//回調(diào)函數(shù)msg

//如果是字符串,就直接操作

//如果是JSON數(shù)據(jù),就使用json數(shù)據(jù)解析~?for(var?i?in?msg){}然后使用msg['a']??msg.a

//如果要打印數(shù)據(jù)請(qǐng)用console.log

}

})

因?yàn)閃3C和IE兼容AJAX都不一樣~

AJAX解決兼容性問題,我們?cè)贘S文件中輸入以下代碼就可以

function?createXhr(){

//在W3C中.

try{return?new?XMLHttpRequest()}?catch(e)?{}

//IE

try{?return?new?ActiveXObject('Microsoft.XMLHTTP')}?catch(e)?{}

alert('你的瀏覽器不支持Ajex');

}