JavaScript的原生Ajax解析

經過JavaScript的Ajax進行詳細的解析過程，從而更好的瞭解Jquery的Ajax。

順帶，我會在後面把我整理的一整套CSS3，PHP,MYSQL的開發的筆記打包放到百度雲，有須要能夠直接去百度雲下載，這樣之後大家開發就能夠直接翻筆記不用百度搜那麼麻煩了。

 筆記連接：http://pan.baidu.com/s/1qYdQdKK 密碼：pvj2

 

1、JavaScript原生ajax
1.原生ajax代碼:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

window.onload= function (){ var  oBtn = document.getElementById( "btn" ); oBtn.onclick= function (){ //打開瀏覽器 /* 1.建立一個ajax對象 ie6如下 ActiveXObject('Microsoft.XMLHTTP') */ var  xhr =  null ; // window屬性下的XMLHttpRequest 是否存在 不存在就執行else 存在就直接執行，爲的是兼容IE6 /*  if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); }else{ var xhr = new ActiveXObject('Microsoft.XMLHTTP'); }*/ // 最好用下面的方法考慮兼容 try { // 代碼嘗試執行這個塊中的內容，若是有錯誤，則執行catch{},而且傳入錯誤信息 var  xhr =  new  XMLHttpRequest(); } catch (e){ var  xhr =  new  ActiveXObject( 'Microsoft.XMLHTTP' ); } // 在地址欄輸入地址 /* open()方法    */ xhr.open( 'get' , '1.txt' , true ); // 提交 xhr.send(); // 等待服務器返回內容 xhr.onreadystatechange =  function (){ if (xhr.readyState == 4){ alert(xhr.responseText); } } } }

　　

html:

1	<input type="button" value="按鈕" id="btn">

　　

2.表單
　　表單:數據的提交
　　action : 數據提交的地址，默認是當前頁面
　　method : 數據提交的方式，默認是get方式

1.get
　　把數據名稱和數據值用=鏈接，若是有多個的話，那麼它會把
　　多個數據組合用&進行鏈接，而後把數據放到url?後面傳到指定頁面

　　url長度限制的緣由，咱們不能經過get方式傳遞過多的數據

2.post
理論上無限制

1 2 3 4 5 6 7

enctype : 提交的數據格式，默認application/x-www-form-urlencoded <form action= ""  method= "" > <input type= "text"  name= "user" > <input type= "text"  name= "age" > <input type= "submit"  value= "提交" > </form>

　　

3. open()方法
　　代碼：xhr.open('get','1.txt',true);
參數
　　1.打開方式
　　2.地址
　　3.是否異步[true爲異步，false爲同步]
異步：非阻塞 [前面的代碼不會影響後面的代碼執行]
同步：阻塞 [前面的代碼會影響後面的代碼執行]
阻塞：

1 2 3 4 5 6 7 8 9 10

<script src= "jquery.js" ></script> $( function (){})  //若是Jque.js沒有引用下面的文件執行也不得用，就阻塞了 非阻塞： setTimeout( function (){ alert(1); },2000); alert(2); // 彈出2不會對我有影響，就非阻塞

　　

同步和異步區別：
　　當你後續的代碼須要用到前面的東西的時候，你能夠用同步，但異步用的多

4. send()發送請求
　　xhr.send();

5.請求狀態監控

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

onreadystatechange事件 ・readyState屬性：請求狀態 -0（初始化）尚未調用open()方法 -1（載入）已調用send()方法，正在發送請求 -2（載入完成）send()方法完成，已收到所有響應內容 -3（解析）正在解析響應內容 -4（完成）響應內容解析完成，能夠在客戶端用了 ・status屬性：服務器（請求資源）的狀態 ・返回的內容 -responseText:返回以文本形式存放的內容 -reponseXML:返回XML形式的內容 代碼分析： // 等待服務器返回內容 /* readyState : ajax工做狀態 responseText : ajax請求返回的內容就被存在這個屬性下面 on readystate change : 當readyState改變的時候觸發 status : 服務器狀態 http狀態碼 */ xhr.onreadystatechange =  function (){ if (xhr.readyState == 4){ // 狀態值爲200 ok的時候 if (xhr.status == 200){ alert(xhr.responseText); } else { alert( '出錯了，Err:' +xhr.status); } } }

　　

6.數據請求和獲取源碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

window.onload= function (){ var  oBtn = document.getElementById( "btn" ); // 用了setInterval()定時更新數據 oBtn.onclick=setInterval( function (){ // 打開瀏覽器，啓用xml請求 try { var  xmh =  new  XMLHttpRequest(); } catch (e){ var  xmh =  new  ActiveXObject( 'Microsoft.XMLHTTP' ); } // 在地址欄輸入地址 xmh.open( 'get' , 'test.php' , true ); // 發送請求 xmh.send(); // 等待服務器返回內容 xmh.onreadystatechange= function (){ if (xmh.readyState == 4){ // 如下是關鍵方法 JSON.parse(); if (xmh.status == 200){ // JSON.parse()將 JavaScript 對象表示法 (JSON) 字符串轉換爲對象 var  data = JSON.parse(xmh.responseText); var  oUl = document.getElementById( "ul1" ); var  html =  "" ; for ( var  i=0;i<data.length;i++){ // 由於是二維數組因此須要這樣寫[i]['title'] html +=  '<li><a href="">' +data[i][ 'title' ]+ '</a> <span>' +data[i][ 'date' ]+ '</span></li>' } oUl.innerHTML = html; } else { // 彈出status的狀態錯誤 alert( "出錯,Err:" +xmh.status); } // alert(xmh.responseText); } } },1000); }

　　

後臺test.php文件代碼:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?php // 用數組的格式傳數據過去 $arr  =  array ( array ( 'title' => '菠蘿的海df,很美' , 'date' => '2015-6' ), array ( 'title' => '菠蘿的海d,很美a' , 'date' => '2015-6' ), array ( 'title' => '菠蘿的海,很美s' , 'date' => '2015-6' ), array ( 'title' => '菠蘿的海d,很美s' , 'date' => '2015-6' ), array ( 'title' => '的海x,很美x' , 'date' => '2015-6' ), array ( 'title' => '菠蘿海,很美' , 'date' => '2015-06' ), array ( 'title' => '菠蘿的海,很美s' , 'date' => '2015-6' ) ); // json_encode 用來把數據轉換成json格式 echo  json_encode( $arr ); ？>

　　

7.get方法解析
/*
1.緩存 在url 後面鏈接一個隨機數，時間戳
2.亂碼 編碼encodeURI
輸出中文：+encodeURI('劉偉')+
*/
// 在地址欄輸入地址

1	xmh.open('get','getNews.php?username='+encodeURI('劉偉')+'&pass=bbb&'+new Date().getTime(),true);

後臺php用$_GET['']方法獲取數據

php代碼：

1 2 3 4 5 6

<?php $username  =  $_GET [ 'username' ]; $pass  =  $_GET [ 'pass' ]; echo  "歡迎,你的名字:{$username},密碼:{$pass}" ; ？>

　　

8.post方法解析

1 2 3 4 5 6 7 8 9 10

/* post方式，數據放在send()裏面做爲參數傳遞 */ // 申明發生的數據編碼類型 xmh.setRequestHeader( 'content-type' , 'application/x-www-form-urlencoded' ); // post沒有緩存問題，get有緩存問題因此須要更新 // 中文也不用編碼 get方式要編碼encodeURI xmh.send( 'username=leo&pass=222' );

　　HTML部分：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

< li > < div > < img  src="images/1.png" alt="good"> < p >森今夏濃濃的森女風來襲！柔軟溫馨的面料，柔和的粉藍和白色，領口綁帶，穿起來仙氣十足！</ p > </ div > </ li > < li > < div > < img  src="images/1.png" alt="good"> < p >森今夏濃濃的森女風來襲！柔軟溫馨的面料，柔和的粉藍和白色，領口綁帶，穿起來仙氣十足！</ p > </ div > </ li > < li > < div > < img  src="images/1.png" alt="good"> < p >森今夏濃濃的森女風來襲！柔軟溫馨的面料，柔和的粉藍和白色，領口綁帶，穿起來仙氣十足！</ p > </ div > </ li > < li > < div > < img  src="images/1.png" alt="good"> < p >森今夏濃濃的森女風來襲！柔軟溫馨的面料，柔和的粉藍和白色，領口綁帶，穿起來仙氣十足！</ p > </ div > </ li > < li > < div > < img  src="images/1.png" alt="good"> < p >森今夏濃濃的森女風來襲！柔軟溫馨的面料，柔和的粉藍和白色，領口綁帶，穿起來仙氣十足！</ p > </ div > </ li >