利用Ajax實現異步請求

Ajax

---

1.課程引入

     靜態網站和動態網站都是同步的，但同步方式有缺點：頁面請求響應式阻塞，影響用戶體驗

     爲了解決這個問題，能夠經過變通的手段實現頁面的局部更新（隱藏幀），因爲隱藏幀不方便就有了Ajax

 

2.隱藏幀實現局部更新

 

<form action="./11inner.php" method="post" target="abc">         用戶名：<input type="text" name="username">          密  碼：<input type="password" name="password">         <input type="submit" value="提交">     </form>     <iframe src="" width="200" height="200" frameborder="2" name="abc"></iframe>   PHP中的代碼   <?php     $uname = $_POST['username'];     $pw = $_POST['password'];     if($uname == '111' && $pw == '111') {         //js中的parent表示父級頁面         echo '<script> parent.document.getElementById("dv").innerHTML = "登陸成功" </script>';     }     else {         echo '<script> parent.document.getElementById("dv").innerHTML = "用戶名或密碼錯誤" </script>';     }    ?>

3.如何實現Ajax響應請求

基本步驟：建立XMLHttpRequest對象-->配置發送參數-->執行發送-->處理響應

 

一、建立xhr對象     var xhr = null;     if(window.XMLHttpRequest){         標準瀏覽器         xhr = new XMLHttpRequest();     }else{         非標準瀏覽器IE6/7/8         xhr = new ActiveXObject('Microsoft.XMLHTTP');     }     readyState==0表示xhr對象初始化完成     console.log(xhr.readyState + '---------1----------'); 二、配置發送參數     var type = 'get';     var myurl = './data.php';     var async = false;//第三個參數默認值就是true,表示異步；false表示同步     xhr.open(type,myurl,async);  三、發送     var param = null;     xhr.send(param);     readyState==1表示請求已經發出       四、處理響應（指定回調函數）,以下的回調函數不是咱們本身調用，而是由瀏覽器自動調用      那麼瀏覽器在什麼狀況下調用？xhr.readyState（0、一、二、三、4）這個狀態值發生變化的時候調用      xhr.onreadystatechange = function(){        if(xhr.status == 200){          if(xhr.readyState == 4){                 獲取到服務器響應的數據             var result = xhr.responseText;           }        }  }     若是是同步的請求，就沒有必要使用回調函數了，直接經過xhr.responseText就能夠獲得數據     console.log(xhr.responseText);

 

 

4.處理響應中的status （xhr.status == 200 ）

xhr.status是http協議的狀態碼：200成功、404沒有找到資源、500服務器報錯

 

5.處理響應中的readyState是狀態值（0,1,2,3,4）

readyState==0表示xhr對象初始化完成

readyState==1表示請求已經發出

readyState== 2表示服務器端數據已經徹底返回

readyState== 3表示正在解析數據

readyState== 4表示數據解析完成，可使用了

 

6.注意事項：

    一、xhr的對象建立須要兼容處理

    二、xhr.open的3個參數的做用

    三、xhr.readyState狀態值要了解

    四、經過xhr.responseText獲取服務器響應的數據

    五、對於get請求來講，xhr.send()的參數固定寫成null

    六、xhr.status和xhr.readyState的做用和區別

 

 

7.阻止表單提交的幾種方式

     1.return false;

     2.e.preventDefault();

     3. <input type="submit" value="提交" id="btn">把「submit」換成「button」

 

8.手動提交表單

     form.submit();

 

 

9.Ajax-get提交

Aja的get提交數據是經過url傳遞參數，而且須要對參數進行編碼處理

xhr.send();方法參數固定爲null

 

2.配置發送函數             encodeURI做用對get參數進行編碼處理，防止亂碼             var param = encodeURI('?username='+uname+'&password='+pw);             xhr.open('get','./data.php'+param); 3.發送             xhr.send(null);

 

 

10.Ajax-post提交

 

Ajax的post提交方式經過xhr.send();

函數傳遞的參數發送數據，而不是經過url傳遞數據

post提交方式必須設置請求頭

post提交的數據不須要進行編碼處理

 

 

2.配置發送函數                xhr.open('post','./33data.php');                //設置請求頭信息(對於post提交必須設置請求頭)                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); 3.發送                var param = 'username='+uname+'&password='+pw;                xhr.send(param);

 

 

 

11.post和get的區別

 

get	post
2.配置發送函數             encodeURI做用對get參數進行編碼處理，防止亂碼             var param = encodeURI('?username='+uname+'&password='+pw);             xhr.open('get','./data.php'+param); 3.發送             xhr.send(null);	2.配置發送函數                xhr.open('post','./33data.php');               設置請求頭信息(對於post提交必須設置請求頭)                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 3.發送                var param = 'username='+uname+'&password='+pw;                xhr.send(param);
一、Aja的get提交數據是經過url傳遞參數，而且須要對參數進行編碼處理 二、xhr.send();方法參數固定爲null	一、Ajax的post提交方式經過xhr.send(); 函數傳遞的參數發送數據，而不是經過url傳遞數據 二、post提交方式必須設置請求頭（   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); ） 三、post提交的數據不須要進行編碼處理

 

12.url的標準格式

 

http://www.baidu.com/a/ac/b?flag=123#abc	scheme://host:port/path?query#fragment
http----scheme	scheme:通信協議 http https ftp
www.baidu.com---host	host:域名或IP地址
隱藏的 http的默認端口是80---port	port：端口 瀏覽器是隱藏的
a/ac/b---path	path:路徑，端口到問號之間的部分
#後面的abc----fragment	fragment:錨點 hash（哈希）,做用：定位頁面中的某一肯定位置

 

 

 

13.encodeURICompontent()和encodeURI()

     encodeURIComponent()方法能夠對url中的特殊字符進行編碼

     encodeURI()方法不會轉換特殊字符

     

var url = 'http://www.sina.com';      var str = 'http://www.baidu.com?username=張三&flag='+encodeURIComponent('://??:');     console.log(encodeURI(str));      console.log(encodeURIComponent(str));

 

 

14.解析服務器服務器返回的xml形式的數據   var result = xhr.responseXML;

15.解析服務器服務器返回的json形式的數據    var result = xhr.responseText;

14&15

解析服務器服務器返回的xml形式的數據 var result = xhr.responseXML;	解析服務器服務器返回的json形式的數據 var result = xhr.responseText;
xml數據格式的缺點： 1.元數據（描述數據的數據）：元數據佔用的空間較多，不利於網絡傳輸 2.不方便解析	json數據格式 1.數據由鍵值對組成 2.鍵和值必須用雙引號引發來 3.值得類型能夠是：數值 字符串 數組 對象
	json_encode();方法的做用：把數組轉化成json字符串 $str = json_encode($arr);   JSON.parse();做用：把字符串轉成對象 var str = '{"username":"lisi","age":"12"}'; var obj = JSON.parse(str); var obj = eval('('+str+')');//也能夠實現   eval方法的做用就是把符合js語法 的字符串轉成代碼並執行 eval('console.log(111)');//輸出111
if(xhr.status == 200 && xhr.readyState == 4){  xml數據格式                     var ret = xhr.responseXML;                     var books = ret.getElementsByTagName('book');                     var tag = '';                     for (var i = 0; i < books.length; i++) {                         var book = books[i];                         var name = book.getElementsByTagName('name')[0].innerHTML;                         var author = book.getElementsByTagName('author')[0].innerHTML;                         var price = book.getElementsByTagName('price')[0].innerHTML;                         var desc = book.getElementsByTagName('desc')[0].innerHTML;                         tag += '<ul><li>'+name+'</li><li>'+author+'</li><li>'+price+'</li><li>'+desc+'</li></ul>';                     }                     var container = document.getElementById('container');                     container.innerHTML = tag;           }	if(xhr.status == 200 && xhr.readyState == 4){                     // 原生Ajax從服務器獲取的原始數據是字符串（有多是json格式的字符串）                     var result = xhr.responseText;                     // JSON.parse()的做用就是把json形式的字符串轉化成對象                     result = JSON.parse(result);                     console.log(result);                     var tag = '';                     for (var i = 0; i < result.length; i++) {                         var book = result[i];                         tag += '<ul><li>'+book.name+'</li><li>'+book.author+'</li><li>'+book.price+'</li><li>'+book.desc+'</li></ul>'                     }                     var container = document.getElementById('container');                     container.innerHTML = tag;                 }
<?php      header('Content-Type:application/xml; charset=utf-8');    ?> <?xml version='1.0' encoding='utf-8' ?>   <booklist>     <book>         <name>三國演義</name>         <author>羅貫中</author>         <price>20</price>         <desc>一個殺伐紛爭的年代</desc>     </book> </booklist>	<?php     $arr = array(    　　array('name'=>'三國演義','author'=>'羅貫中','price'=>'20','desc'=>'一個殺伐紛爭的年代'), 　　array('name'=>'紅樓夢','author'=>'曹雪芹','price'=>'30','desc'=>'封建社會家族的縮影'), 　　array('name'=>'水滸傳','author'=>'施耐庵','price'=>'40','desc'=>'一羣土匪的故事'), 　　array('name'=>'西遊記','author'=>'吳承恩','price'=>'50','desc'=>'四個男人和一匹馬的故事')     );       json_encode()方法的做用：把數組轉化成json字符串     $str = json_encode($arr);     echo $str;    print_r($arr);//也能夠實現    ?>