Asynchronous JavaScript and XML
用js去異步的獲取XML作為數(shù)據(jù)交換的格式
Ajax通信流程
- 首先創(chuàng)建一個ajax對象
初始時:
調用open()方法:開啟一個請求但沒有向服務端發(fā)起請求
調用send()方法:正式的向服務器端發(fā)起請求
當服務器端開始返回請求數(shù)據(jù)的時候倒谷,瀏覽器端接收到這個數(shù)據(jù)
瀏覽器端結束請求的時候:
Ajax調用示例
//創(chuàng)建XHR對象
var xhr = new XMLHttpRequest();
//處理返回數(shù)據(jù)
xhr.onreadystatechange = function (callback){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
callback(xhr.responseText);
}else{
alert('Request was unsuccessful: ' + xhr.status);
}
}
}
//發(fā)送請求
xhr.open('get','example.json',true);
xhr.setRequestHeader('myHeader','myValue');
xhr.send(null);
open
setRequestHeader
send
向服務器端發(fā)送一個帶查詢參數(shù)的請求,請求參數(shù)序列化
function serialize(data){
if(!data){return ''};
var pairs = [];
for(var name in data) {
if(!data.hasOwnProperty(name)){continue;}
if(typeof data[name] === 'function'){continue;}
var value = data[name].toString();
name = encodeURIComponent(name);
value = encodeURIComponent(value);
pairs.push(name + '=' + value);
}
return pairs.join('&');
}
GET請求
var url = 'example.json?' + serialize(formdata);
xhr.open('get',url,true);
xhr.send(null);
POST請求
xhr.open('post','example.json',true);
xhr.send(serialize(formdata));
同源策略
跨域資源訪問
- 不滿足同源策略的資源訪問娇唯,叫跨域資源訪問
- w3c定義了CORS
- 現(xiàn)代瀏覽器已經實現(xiàn)對CORS的支持
CORS
Frame代理
JSONP
//url {String} 請求資源的url
//options {Object} 請求的查詢參數(shù)
//callback {Function} 請求的回調函數(shù),接收XMLHttpRequest對象的responseText屬性作為參數(shù)
function get(url, options, callback){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(callback){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
callback(xhr.responseText);
}else{
alert('Request was unsuccessful: ' + xhr.status);
}
}
}
xhr.open('get', url+'?'+serialize(options), true);
xhr.send(null);
}
function serialize(data){
if(!data) return '';
var pairs = [];
for(var name in data){
if(!data.hasOwnProperty(name)) continue;
if(typeof data[name] === 'function') continue;
var value = data[name].toString();
name = encodeURIComponent(name);
value = encodeURIComponent(value);
pairs.push(name + '=' + value);
}
return pairs.join('&');
}
function post( url, options, callback ){
var xhr = null;
if( window.XMLHttpRequest ){
xhr = new XMLHttpRequest();
}else{
//IE6以下
xhr = new ActiveXObject( 'Microsoft.XMLHTTP' );
}
xhr.open( 'post', url, true );
xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
xhr.send( serialize(options) );
xhr.onreadystatechange = function () {
if( xhr.readyState == 4 ){
if( (xhr.status >= 200 && xhr.status < 300 ) || xhr.status == 304 ){
callback( xhr.responseText );
}else{
alert( 'Request was unsuccessful' + xhr.status );
}
}
};
}
function serialize( data ){
if( !data ) return '';
var pairs = [];
for( var name in data ){
if( !data.hasOwnProperty(name) ) continue;
if( typeof data[name] === 'function' ) continue;
var value = data[name];
name = encodeURIComponent( name );
value = encodeURIComponent( value );
pairs.push( name + '=' + value );
}
return pairs.join( '&' );
}