完善 myAjax 方法达到能获取同源数据和非同源数据| 学习笔记

简介: 快速学习完善 myAjax 方法达到能获取同源数据和非同源数据。

开发者学堂课程【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);

}

}

}

相关文章
|
7月前
|
存储 SQL JavaScript
聊一聊常见的浏览器数据存储方案(上)
聊一聊常见的浏览器数据存储方案(上)
203 0
|
3月前
|
缓存 网络协议 CDN
在网页请求到显示的过程中,如何优化网络通信速度?
在网页请求到显示的过程中,如何优化网络通信速度?
187 59
|
23天前
|
数据采集 Web App开发 JavaScript
爬虫策略规避:Python爬虫的浏览器自动化
爬虫策略规避:Python爬虫的浏览器自动化
|
7月前
|
数据采集 Web App开发 搜索推荐
突破目标网站的反爬虫机制:Selenium策略分析
突破目标网站的反爬虫机制:Selenium策略分析
|
7月前
|
JSON JavaScript 前端开发
深入理解同源策略:解密其作用和挑战
深入理解同源策略:解密其作用和挑战
170 1
|
数据采集 前端开发 JavaScript
解析网页弹窗验证机制及应对策略的Selenium爬虫案例
解析网页弹窗验证机制及应对策略的Selenium爬虫案例
|
前端开发 JavaScript Java
浏览器原理 24 # 页面性能:如何系统地优化页面?
浏览器原理 24 # 页面性能:如何系统地优化页面?
114 0
浏览器原理 24 # 页面性能:如何系统地优化页面?
|
JSON 移动开发 JavaScript
浏览器同源政策及其规避方法
浏览器同源政策及其规避方法
184 0
|
移动开发 JavaScript 前端开发
|
域名解析 缓存 网络协议
详细分析:当我们用浏览器访问一个网站到页面展示,背后经历了什么?
详细分析:当我们用浏览器访问一个网站到页面展示,背后经历了什么?
188 0
详细分析:当我们用浏览器访问一个网站到页面展示,背后经历了什么?