Ajax 用法, 實現方法,JS原生與JQ實現

AJAX 詳解

ajax是實現頁面異步加載.

經常使用於, 先後端數據交互, 實現前端頁面無刷新更改操做.

 

是web前端和後端使用者開發的必備使用技能~~

 

Ajax操做~   : 

俗話原理 : 用俗話來講, 就是把數據傳送過去, 而後再從後面獲取到數據回來使用

 

(JS原生使用AJAX)   

 

Get請求操做五步走~

1: 建立ajax對象

2: 設置回調對象

3: 初始化ajax對象

4: 發送ajax對象

5: 判斷與執行

 

參數詳解:

new XMLHttpRequest() : 調用ajax對象

Url : 要傳送數據過去的地址

Xhr.status 返回狀態碼, 200 爲成功 其餘爲失敗

xhr.responseText : 回調數據 

 

代碼以下: 

window.onload=function(){

//獲取事件

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

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

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

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

var xhr=new XMLHttpRequest();

//設置回調

xhr.onreadystatechange= function(){

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

alert(xhr.responseText);

}

}

//設置頭信息

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

//初始化ajax

xhr.open('get',url);

//發送ajax對象

xhr.send(null);

}

}

 

 

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

$.ajax({

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

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

data: {a:a,b:b},   //傳送過去的數據  {'那邊接收':'這邊的數據'}

success: function(msg){

//回調函數msg  

//若是是字符串,就直接操做

//若是是JSON數據, 就使用json數據解析~ for(var i in msg){}  而後使用msg['a']  msg.a

//若是要打印數據請用console.log

 

}

})

 

 

 

 

由於W3C和IE兼容AJAX都不同~

AJAX解決兼容性問題,咱們在JS文件中輸入如下代碼就能夠

function createXhr(){

//在W3C中.

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

//IE

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

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

}