1. 程式人生 > >Ajax筆記-加強版

Ajax筆記-加強版

調用 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:
1)get 把數據名稱和數據值用=連接,如果有多個的話,那麽他會把多個數據組合用&進行連接,然後把數據放到url?後面傳到指定頁面
url長度限制的原因,我們不要通過get方式傳遞過多的數據 <form action="get.php" enctype="application/x-www-form-urlencoded"> 2)post 理論上無限制 <form action="post.php" method="post">
2、Get和Post的區別: 傳輸方式的區別:Get通過url地址傳輸。Post通過瀏覽器內部傳輸 傳輸數據量:Get有數據量限制,每個瀏覽器都不同。Post理論上無限 後端數據的接收(PHP): $_GET- 通過URL傳遞給該腳本的變量的數組
$_POST- 通過HTTP POST方法(表單)傳遞給該腳本的變量的數組 前後臺鍵名和傳輸方式必須一致 3、try catch: try {
//代碼嘗試執行這個塊中的內容,如果有錯誤,則會執行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筆記-加強版