开发者学堂课程【Ajax 前端开发入门与实战:完善 myAjax 方法达到能获取同源数据和非同源数据】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/595/detail/8551
完善 myAjax 方法达到能获取同源数据和非同源数据
使用 jquery 获取跨域数据的关键点主要在两个地方
1.dataType:“jsonp”(dataType 一定得是 jsonp)
2.jsonp:“callbake”(通过 jsonp 属性来指定服务器获取方法名称的值)
例子
进行进一步完善,既能够获取到同源下的数据,也可以获取到跨域下的数据。
//跨域数据obj datatype=jsonp
function myAjax(obj){
if (obj. dataType = "jsonp"){
myAjax4Across(obj);
} else{
myAjax4normal(obj)
}
}
通过 obj. dataType 判断是否是 jsonp,从而走不同的分支,不同的分支是不同的技术实现方案。
myAjax4Across(obj); 是动态创建标签。
myAjax4normal(obj) 是常规的4个步骤获取相关数据。
function myAjax4normal(obj) { (用来获取正常同源数据)
var defaults = {
type:"get",
url:"#"
dataType:"json",
data:{},
async:true,
success:function(result)(console . log(result);]);
};
//obj 中的属性,覆盖到 defaults 中的属性
//1、如果有一些属性只存在 obj 中,会给 defaults 中增加属性
//2、如果有一些属性在 obj 和 defaults 中都存在,会将 defaults 中的默认值覆盖
//3、 如果有一些属性只在 defaults 中存在, 在 obj 中不存在,这时候 defaults中将保留预定义的
for(var key in obj)l
defaults[key] = obj[key];
}
var xhr= null;
if(window XMLHt tpRequest){
xhr= new XMLHt tpRequest();
}else{
xhr = new Act iveX0bject( "Microsoft .XMLHTTP");
}
//得到 params
//data:f
//uname: " zhangsan" ,
//age:"18"
//}//uname=zhangsan&age=18
Var params="";
for(var attr in defaults.data)(
params += attr + "=" + defaults .data[attr] + "&" ;
if(params){
params = params . substring(0 , params.length - 1);
}
if(defauits.type = . get")
defaults.url += "?" + params;
}
xhr . open def aults . type , defaults . url , defaults . async);
if(defaults.type = "get") {
xhr . send(null);
} else if(defaults.type == "post") l
xhr . setReques tHeader("Content-Type" ," application/x - www-form-urlencoded");
xhr . send(params );
}
if (defaults.async) f
xhr .onreadystatechange = function()f
if (xhr . readyState == 4) f
if (xhr status == 200)
var result = null;
if (defaults.dataType == "json") {
result = xhr . responseText;
result = JSON. parse(result);
}else if(defaults . dataType = "xml") {
result = xhr . responseXML ;
} else
result = xhr . responseText;
)
defaults. success(result);
}
}
}
};else{
if(xhr . readyState == 4) f
if(xhr. status == 200) {
var result = null;
if(defaults .dataType = "json") [
result = xhr . responseText;
}result = JSON parse(result) ;
}else if(defaults. dataType = "xml"){
result = xhr .responseXML ;
}else {
result = xhr . responseText;
defaults . success(result);
}
}
}