开发者学堂课程【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);
放置标签
v
ar
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);