完善 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);

}

}

}

相关文章
|
人工智能 运维 数据可视化
阿里云百炼 MCP服务使用教程合集
阿里云百炼推出首个全生命周期MCP服务,支持一键部署、无需运维,具备高可用与低成本特点。该服务提供多类型供给、低成本托管及全链路工具兼容,帮助企业快速构建专属智能体。MCP(模型上下文协议)作为标准化开源协议,助力大模型与外部工具高效交互。教程涵盖简单部署、GitHub运营、数据分析可视化及文档自动化等场景,助您快速上手。欢迎加入阿里云百炼生态,共同推动AI技术发展!
6561 0
|
人工智能 弹性计算 安全
【Hello AI】GPU容器共享技术cGPU
GPU容器共享技术cGPU是阿里云基于内核虚拟GPU隔离的容器共享技术。即多个容器共享一张GPU卡,从而实现业务的安全隔离,提高GPU硬件资源的利用率并降低使用成本。
【Hello AI】GPU容器共享技术cGPU
|
存储 分布式计算 大数据
odps是什么
【5月更文挑战第5天】odps是什么
4634 6
|
JavaScript 前端开发 算法
rollup 是什么?如何使用?
继 Webpack、Vite 等前端工具链系列的了解之后,又碰到了 Rollup,我之前对 Rollup 的了解仅停留在 Vite 打包时使用、组里的大佬使用 Rollup 写过一个静态官网页面,为了
|
SQL 分布式计算 大数据
MaxCompute ODPS 重装上阵,QUALIFY
MaxCompute支持QUALIFY语法过滤Window函数的结果,使得查询语句更简洁易理解。Window函数和QUALIFY语法之间的关系可以类比聚合函数+GROUP BY语法和HAVING语法。
660 0
|
传感器 物联网 C语言
CTP协议的组成原理与具体实现(实验篇,含代码)_物联网竞赛挑战赛
CTP协议的组成原理与具体实现(实验篇,含代码)_物联网竞赛挑战赛
467 0
|
SQL 关系型数据库 数据库
openGauss容器版本升级指南——抽丝剥茧(一)
openGauss容器版本升级指南——抽丝剥茧
406 0
|
人工智能 文字识别 自然语言处理
阿里云峰会 | AI搜题加速在线教育行业场景创新
过去的2020年的让所有人难忘的一年,受新冠疫情的影响,各行各业都在挑战中变化,在教育方面也催生了新的商业格局。在线教育平台发展迅猛,阿里云也积极相应,为在线教育的众多客户提供了高效稳定的技术保障。本文介绍了阿里云开放搜索为在线教育掠夺流量的重要工具-拍照搜索的技术原理。
1219 0
阿里云峰会 | AI搜题加速在线教育行业场景创新
|
小程序 程序员 开发者
|
缓存 JavaScript 前端开发
如何更好的进行webpack的打包优化
在前面的一篇文章里提到了,现有项目的升级,但升级结束并不意味这整个任务的结束。还有针对项目打包速度的提升,当一个vue的项目页面在200以上的时候,这个打包速度就会大幅度的降低。那么针对webpack的打包优化就是一件不得不做的事情了,webpack打包优化分为两部分,一部分是大小优化,另一部分是速度优化。
447 0
如何更好的进行webpack的打包优化