跨域_封装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);

相关文章
|
5月前
|
JSON 前端开发 JavaScript
前端如何实现跨域
前端如何实现跨域
|
6月前
|
JSON 前端开发 安全
前端解决跨域的六种方法
跨域问题是指当一个网页试图访问来自不同源(域名、协议、端口)的资源时,浏览器会出于安全考虑而限制这种访问。这是因为浏览器的同源策略防止了恶意网站获取其他网站的敏感信息。
|
6月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
6月前
|
Web App开发 JavaScript 前端开发
深入理解前端跨域方法和原理
深入理解前端跨域方法和原理
|
JavaScript 前端开发 中间件
前端解决跨域问题(9个方法)
前端解决跨域问题(9个方法)
1716 0
|
移动开发 JSON 前端开发
前端跨域
跨域是指在浏览器中,一个页面的脚本试图去访问不同域名下的资源时,浏览器会阻止这种跨域的请求。这是为了保护用户的安全,防止恶意代码获取用户数据。但是,在一些场景下,我们需要进行跨域请求,这时就需要一些跨域解决方式。
|
前端开发
前端学习案例5-jsonp实现跨域方式5
前端学习案例5-jsonp实现跨域方式5
70 0
前端学习案例5-jsonp实现跨域方式5
|
前端开发
前端学习案例2-jsonp实现跨域方式2
前端学习案例2-jsonp实现跨域方式2
64 0
前端学习案例2-jsonp实现跨域方式2
|
前端开发
前端学习案例3-jsonp实现跨域方式3
前端学习案例3-jsonp实现跨域方式3
72 0
前端学习案例3-jsonp实现跨域方式3
|
前端开发
前端学习案例1-jsonp实现跨域方式
前端学习案例1-jsonp实现跨域方式
60 0
前端学习案例1-jsonp实现跨域方式