Ajax筆記-加強版
阿新 • • 發佈：2017-07-22
調用 ech tin code encode har name 事件 ajax跨域 AJAX :
Asynchronous JavaScript and XML 異步JavaScript和XML
用javascript異步形式去操作xml 進行數據交互
節省用戶操作，時間，提高用戶體驗，減少數據請求
傳輸獲取數據
1、form：
表單：數據的提交
action : 數據提交的地址，默認是當前頁面
enctype : 提交的數據格式，默認application/x-www-form-urlencoded
method : 數據提交的方式，默認是get方式
method:
xhr.open(‘get‘, ‘http://api.douban.com/book/subjects?q=javascript&alt=json&max-results=1‘, true);
2）跨域：跨域名
一個域名下的文件去請求了和他不一樣的域名下的資源文件，那麽就會產生跨域請求
3）<script>標簽
src的作用 ： 加載（包含指定的外部文件）
可以跨域包含
被包含的資源可以是任何類型的文件(可以是txt,php等)
他只關註被包含的文件的內容是否是合法的JS
原理：
定義函數
包含外部文件，在被包含的文件中執行調用定義好的函數
參數的（數據）的實現
問題：包含就調用，通過動態創建<script>實現按需調用
問題：包含動態文件時可以通過一個接口實現按需生成調用函數名稱
4）用JSONP解決跨域問題：
JSONP : JSON with Padding
script標簽
用script標簽加載資源是沒有跨域問題的
在資源加載進來之前定義好一個函數，這個函數接收一個參數（數據），函數裏面利用這個參數做一些事情
然後需要的時候通過script標簽加載對應遠程文件資源，當遠程的文件資源被加載進來的時候，就會去執行我們前面定義好的函數，並且把數據當作這個函數的參數傳入進去
4、例子：
<script>
</script>
<script>
window.onload = function() {
var oBtn1 = document.getElementById(‘btn1‘);
oBtn1.onclick = function() {
var oScript = document.createElement(‘script‘);
oScript.src = ‘getData.php‘;
document.body.appendChild(oScript);//在之前的script標簽後面追加
}
}
</script>
···
getData.php:
$arr1 = array(‘111111‘,‘22222222‘,‘33333333‘,‘4444444‘,‘555555555555555555555‘);
···
1)get 把數據名稱和數據值用=連接，如果有多個的話，那麽他會把多個數據組合用&進行連接，然後把數據放到url?後面傳到指定頁面2、Get和Post的區別： 傳輸方式的區別：Get通過url地址傳輸。Post通過瀏覽器內部傳輸 傳輸數據量：Get有數據量限制，每個瀏覽器都不同。Post理論上無限 後端數據的接收(PHP): $_GET- 通過URL傳遞給該腳本的變量的數組url長度限制的原因，我們不要通過get方式傳遞過多的數據 <form action="get.php" enctype="application/x-www-form-urlencoded"> 2)post 理論上無限制 <form action="post.php" method="post">
//代碼嘗試執行這個塊中的內容,如果有錯誤，則會執行catch{}， 並且傳入錯誤信息參數 //alert(a); //new throw(); //throw new Error(‘錯了錯了‘);無論前面的對不對都拋出一個錯誤} catch (e) { alert(e); } 4、AJAX例子：獲取一個txt靜態文件 window.onload = function() {
var oBtn = document.getElementById(‘btn‘);oBtn.onclick = function() {
/*1.創建一個ajax對象ie6以下new ActiveXObject(‘Microsoft.XMLHTTP‘)標準下：new XMLHttpRequest();*///用if判斷和用try catch一樣/*if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}*/var xhr = null;try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}/*2、設置傳輸內容與方式open方法參數1）提交方式2）提交地址3）是否異步true 異步:非阻塞 前面的代碼不會影響後面代碼的執行false 同步:阻塞 前面的代碼會影響後面代碼的執行*/xhr.open(‘get‘,‘1.txt‘,true);//3、發送數據請求xhr.send();/*4、等待服務器返回內容onreadystatechange : 當readyState改變的時候觸發的事件readyState : ajax工作狀態，請求狀態0 （初始化）還沒有調用open()方法1 （載入）已調用send()方法，正在發送請求2 （載入完成）send()方法完成，已收到全部響應內容3 （解析）正在解析響應內容4 （完成）響應內容解析完成，可以在客戶端調用了返回的內容：responseText : ajax請求返回的內容就以文本形式(string)存放到這個屬性下面,
把後臺所有的類型，包括數組和json的object類型在內 都轉成string類型
responseXML：返回XML形式的內容status : 服務器(請求資源)狀態，http狀態碼：200成功，404找不到資源、500服務器端錯誤...*/xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert(‘出錯了,Err：‘ + xhr.status);
}}
}
}} 5、讀取動態數據(get和post的語句寫法區別)： 1）get： 緩存問題，在不刷新頁面的情況下緩存之前的文件，導致不異步刷新後臺數據 解決：在url？後面連接一個隨機數（時間戳） 亂碼問題，在網頁中中文亂碼。 解決： 編碼encodeURI xhr.open(‘get‘,‘get.php?username=‘+encodeURI(‘劉偉‘)+‘&age=30&‘ + new Date().getTime(),true); xhr.send(); 2）post： post沒有緩存和亂碼問題 在open和send之間設置請求頭：setRequestHeader(類型, 內容);申明發送的數據類型 數據放在send()裏面作為參數傳遞 xhr.open(‘post‘,‘2.post.php‘,true); xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘); xhr.send(‘username=劉偉&age=30‘); 6、數據類型(返回數據的處理)： JSON方法 json中每個屬性名都必須用雙引號！！ 1）JSON.stringify( ); 可以把一個對象轉成對應字符串 2）JSON.parse( ); 可以把字符串轉成對應json對象 7、AJAX獲取新聞例子： var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); } xhr.open(‘get‘,‘getNews.php‘,true); xhr.send(); xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
var data = JSON.parse( xhr.responseText );//將字符串轉成json對象
var oUl = document.getElementById(‘ul1‘);
var html = ‘‘;
for (var i=0; i<data.length; i++) {
html += ‘<li><a href="">‘+data[i].title+‘</a> [<span>‘+data[i].date+‘</span>]</li>‘;
}
oUl.innerHTML = html;
} else {
alert(‘出錯了,Err：‘ + xhr.status);
}
}} ··· getNews.php: <?php header(‘content-type:text/html;charset="utf-8"‘); error_reporting(0); $news = array( array(‘title‘=>‘德國女總理默克爾滑雪時摔倒 骨盆斷裂‘,‘date‘=>‘2014-1-6‘), array(‘title‘=>‘中日駐英外交官撰文互稱對方國家為"伏地魔"‘,‘date‘=>‘2014-1-6‘), array(‘title‘=>‘安倍:望與中國領導人會面 中方:你關閉了大門‘,‘date‘=>‘2014-1-6‘), array(‘title‘=>‘揭秘臺灣駐港間諜網運作 湖北宜昌副市長被查‘,‘date‘=>‘2014-1-6‘), array(‘title‘=>‘習JP：嫦娥三號是貨真價實的中國創造‘,‘date‘=>‘2014-1-6‘), ); echo json_encode($news); ··· 8、AJAX封裝： function ajax(method, url, data, success) {
var xhr = null; try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
} if (method == ‘get‘ && data) {
url += ‘?‘ + data;
} xhr.open(method,url,true); if (method == ‘get‘) {
xhr.send();
} else {
xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
xhr.send(data);
} xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert(‘出錯了,Err：‘ + xhr.status);
}
}
}} ··· setInterval(function() {
ajax(‘get‘,‘getNews.php‘,‘‘,function(response) {
var data = JSON.parse( response );var oUl = document.getElementById(‘ul1‘);var html = ‘‘;for (var i=0; i<data.length; i++) {
html += ‘<li><a href="">‘+data[i].title+‘</a> [<span>‘+data[i].date+‘</span>]</li>‘;
}oUl.innerHTML = html;
});}, 1000); ··· 9、AJAX跨域-JSONP 1）ajax跨域請求具有限制:
xhr.open(‘get‘, ‘http://api.douban.com/book/subjects?q=javascript&alt=json&max-results=1‘, true);
2）跨域：跨域名
一個域名下的文件去請求了和他不一樣的域名下的資源文件，那麽就會產生跨域請求
3）<script>標簽
src的作用 ： 加載（包含指定的外部文件）
可以跨域包含
被包含的資源可以是任何類型的文件(可以是txt,php等)
他只關註被包含的文件的內容是否是合法的JS
原理：
定義函數
包含外部文件，在被包含的文件中執行調用定義好的函數
參數的（數據）的實現
問題：包含就調用，通過動態創建<script>實現按需調用
問題：包含動態文件時可以通過一個接口實現按需生成調用函數名稱
4）用JSONP解決跨域問題：
JSONP : JSON with Padding
script標簽
用script標簽加載資源是沒有跨域問題的
在資源加載進來之前定義好一個函數，這個函數接收一個參數（數據），函數裏面利用這個參數做一些事情
然後需要的時候通過script標簽加載對應遠程文件資源，當遠程的文件資源被加載進來的時候，就會去執行我們前面定義好的函數，並且把數據當作這個函數的參數傳入進去
4、例子：
<script>
function fn(data) {
var oUl1 = document.getElementById(‘ul1‘);var html = ‘‘;for (var i=0; i<data.length; i++) {html += ‘<li>‘+data[i]+‘</li>‘;
}
oUl1.innerHTML = html;}
</script>
<script>
window.onload = function() {
var oBtn1 = document.getElementById(‘btn1‘);
oBtn1.onclick = function() {
var oScript = document.createElement(‘script‘);
oScript.src = ‘getData.php‘;
document.body.appendChild(oScript);//在之前的script標簽後面追加
}
}
</script>
···
getData.php:
$arr1 = array(‘111111‘,‘22222222‘,‘33333333‘,‘4444444‘,‘555555555555555555555‘);
···
Ajax筆記-加強版