开发者学堂课程【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{
myAjax
4
normal(obj)
}
}
通过 obj. dataType 判断是否是 jsonp,从而走不同的分支,不同的分支是不同的技术实现方案。
myAjax4Across(obj); 是动态创建标签。
myAjax4normal(obj) 是常规的4个步骤获取相关数据。
function myAjax
4
normal(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);
}
}
}