Ajax要求GET/POSTメソッドのパッケージ
6052 ワード
AjaxはGET/POST方法のカプセル化を要求して、ネット易微専門の上の1本のGET/POST方法のカプセル化の練習問題.
メソッド:get(url,options,callback)パラメータ url{String}リソースを要求するurl options{Object}要求の問合せパラメータ callback{Function}要求のコールバック関数は、XMLhttpRequestオブジェクトのresponseText属性をパラメータとして を返す
例:
メソッド:get(url,options,callback)パラメータ
例:
get(‘/information’, {name: ‘netease’, age: 18}, function (data) {console.log(data); });
説明:メソッドget(url,options,callback)は、AjaxリクエストGETメソッドのパッケージです.次はgetメソッドの実装コードです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();
//encodeURIComponent (URI) ,
name=encodeURIComponent(name);
valeu=encodeURIComponent(value);
pairs.push(name+'='+value);
}
return pairs.join('&');
}
//get
function get(url,options,callback){
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}else if(window.ActiveXobject){// IE7
var xhr=new ActiveXobject('Microft.XMLHttp');
}
xhr.onreadystatechange=function(callback){
if(xhr.readyState==4){// ,readyState 4
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
callback(xhr.responseText);
}else{
console.log(' :'+xhr.status);
}
}
}
// http://localhost:8000/information?name=zhou&age=18
url=url+'?'+serialize(options);
xhr.open('get',url,true);// ,readyState 1
xhr.send(null);// ,readyState 2
}
//post
function post(url,options,callback){
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}else if(window.ActiveXobject){// IE7
var xhr=new ActiveXobject('Microft.XMLHttp');
}
xhr.onreadystatechange=function(callback){
if(xhr.readyState==4){// ,readyState 4
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
callback(xhr.responseText);
}else{
console.log('POST :'+xhr.status);
}
}
}
xhr.open('post',url,true);// ,readyState 1
xhr.send(serialize(options));// ,readyState 2
}
post('/information',{name:'zhou',age:18},function(data){
console.log(data);
});
get('/information',{name:'zhou',age:18},function(data){
console.log(data);
});