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對象-->配置發送參數-->執行發送-->處理響應
1、創建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----------'); 2、配置發送參數 var type = 'get'; var myurl = './data.php'; var async = false;//第三個參數默認值就是true,表示異步；false表示同步 xhr.open(type,myurl,async); 3、發送 var param = null; xhr.send(param); readyState==1表示請求已經發出 4、處理響應（指定回調函數）,如下的回調函數不是我們自己調用，而是由瀏覽器自動調用 那么瀏覽器在什么情況下調用？xhr.readyState（0、1、2、3、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.注意事項：
1、xhr的對象創建需要兼容處理
2、xhr.open的3個參數的作用
3、xhr.readyState狀態值要了解
4、通過xhr.responseText獲取服務器響應的數據
5、對於get請求來說，xhr.send()的參數固定寫成null
6、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);
|
|
1、Aja的get提交數據是通過url傳遞參數，並且需要對參數進行編碼處理
2、xhr.send();方法參數固定為null
|
1、Ajax的post提交方式通過xhr.send();
函數傳遞的參數發送數據，而不是通過url傳遞數據
2、post提交方式必須設置請求頭（ xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); ）
3、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'=>'一個殺伐紛爭的年代'),
);
json_encode()方法的作用：把數組轉化成json字符串
$str = json_encode($arr);
echo $str;
print_r($arr);//也可以實現
?>
|