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:
$_POST- 通過HTTP POST方法(表單)傳遞給該腳本的變量的數組
前後臺鍵名和傳輸方式必須一致
3、try catch:
try {
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筆記-加強版