跨域_封装01| 学习笔记

简介: 快速学习跨域_封装01。

开发者学堂课程【Ajax 前端开发入门与实战跨域_封装01】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/595/detail/8548


跨域_封装01

 

目录:

一、复制一份代码

二、编写代码

三、实现跨域解决方案

四、编写完成

 

一、复制一份代码

05_ajaxacross function

删除一些无关紧要的代码

打开05_ajaxacross function

创建一个新的 myutils.js,保存,

命名 function myAjax(obj){

 

二、编写代码

function myAjax(obj){

编写前考虑几个问题

1. 考虑什么东西变的

2. 什么东西是不变的

3. 如何通知调用程序 

obj 是一个参数

域名:"https://suggest.taobao.com/sug?q="+keywordValue:"&callback=hehe";

业务逻辑所需要参数 q="+keywordValue

技术解决方案 callback=hehe

var defaults =i

type: "get",url: "#",data:{},

success:function(data)0o;

obj={

url : "https: / /suggest.taobao.com/sug",

data:{q: "123",pwd: "123456"?

data 是业务逻辑参数

success:function(data){

function myAjax(obj){

var defaults = {

type: "get",url: "#",data:{},

success:function(data){

覆盖成

url: "https: / lsuggest.taobao.com/sug",data: {q: "123" ,pwd: "123456"},

success:function(data){0}


三、实现跨域解决方案

创建一个元素出来

var script = document.createElement( "script");

赋值

script.src = defaults.url;

补全

var params ="";

for(var attr in defaults.data){

params += attr + "=” + defaults.data[attr]

看补全是否加上了一个日志

if(params) {i

params = params.substring(0,params. length-1);defaults.url +=“?” + params;

}

defaults.url = "&callback=hehe";consoLe.log(defaults.ur1);

放置标签

var head=document.querySelector( "head");head.appendChild(script);

增加一个方法

window[ "hehe"]= function(data){

defaults.success(data);

};

 

四、编写完成

注释代码测试一下

搜索 java

看是否使用的 url

//"https://suggest.taobao.com/sug?q="+keywordValue+"&callback=hehe";

obj={

url : "https:/ /suggest.taobao.com/ sug",

data:{q:"123",pwd:"123456"},//q=123&pwd=123456-->https://suggest.taobao.com/sug?q=123pwd=123456

success:function(data){}

}

function myAjax(obj){

var defaults = {

type: "get",

url: "#",

data:{},

success:function(data){0}

};

for(var key in obj) {

defaults[key] = obj[key];

}

var params = "";

for(var attr in defaults.data){

params +=attr + "=" +defaults.data[attr] +"&";

}

if(params) i

params = params.substring(0,params. length-1);

defaults.url += "?" + params;

}

defaults.url ="&callback=hehe";

console.log(defaults.url);

var script = document.createElement("script");

script.src = defaults.url;

window[ "hehe"] = function(data){

defaults.success(data);

};

var head = document.querySelector("head");

head.appendChild(script);

相关文章
|
开发工具 C语言 git
Vcpkg 的安装与使用
Windows 下 Vcpkg 的安装与使用
1827 0
Vcpkg 的安装与使用
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
758 23
echarts地图数据信息流向图效果
|
Cloud Native 数据库 持续交付
《阿里云产品四月刊》—提升团队工程交付能力,从“看见”工程活动和研发模式开始(2)
阿里云瑶池数据库云原生化和一体化产品能力升级,多款产品更新迭代
247 1
《阿里云产品四月刊》—提升团队工程交付能力,从“看见”工程活动和研发模式开始(2)
|
机器学习/深度学习 人工智能 安全
解读网络安全公司F5:助企业高效简化多云和应用部署
解读网络安全公司F5:助企业高效简化多云和应用部署
614 2
|
XML 数据可视化 算法
目标检测YOLO数据集的三种格式及转换
目标检测YOLO数据集的三种格式及转换
【源码共读】防抖的原理和实现
【源码共读】防抖的原理和实现
321 0
|
SQL 架构师 算法
一口气说透中台--给你架构师的视角
一口气说透中台--给你架构师的视角
|
存储 前端开发 Java
SpringMVC的文件上传&文件下载&多文件上传---详细介绍
SpringMVC的文件上传&文件下载&多文件上传---详细介绍
246 0
|
人工智能
石子合并-区间dp
石子合并-区间dp
221 0
|
XML JSON 前端开发
逐步了解Ajax和Promise
逐步了解Ajax和Promise
438 0