开发者学堂课程【Ajax 前端开发入门与实战：跨域_封装02】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8549
跨域_封装02
目录：
一、使用 myAjax 跨域封装的一个获取
二、将代码进行完善
三、将 hehe 的方法进行一个自定义
四、总结：增加的两段字符
五、完整代码
一、使用 myAjax 跨域封装的一个获取
这个方法需要一个对象
使用这个方法要确定 myutils.js 文件
先把文件引入进来
传入一些参数
myAjax({
url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",data: {wd : keywordValue},
success:function(data){
运行代码
打开预览器搜索123
会出现报错
对于提示应该是 cb 而不是 callback
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su？wd=123&=haha
这样才会通过 cb 一个值得到 haha 的关键字
无论什么样百度的服务器是通过 cb 的字符串得到 hehe 的关键字
二、将代码进行完善
defaults.url +=“&"+defaults.jsonp+"=hehe" ;
在这个位置进行一个相关的界面刷新
搜索123
在 wd=123&cb 这个地方就会有一个 hehe 的方法回调
在下方已经得到一个 object [q: "123", p: false, s: Array [10]} 正确的数据
三、将 hehe 的方法进行一个自定义
在 success:function( data){｝,
jsonp: "callback",下方加入
jsonpcallback: "hehe"
把 hehe 进行一个替换
defaults.url t="&"+defaults.jsonp+"=" + defaults.jsonpCallback;
回到 myutils.js
进行一个自定义
自定义为：jsonpCallback : "haha"
保存完之后回到网页刷新一下
搜索123点击查询
会发现有一个报错。
解决报错：
window[defaults.jsonpCallbac= function(data){defaults.success(data)；
点击 su?wd=1238cb=haha 请求会发现是关于 haha 的一个方法
根据服务器要求字段来更改
jsonp: 后面的字符
需不需要制定后面的名称都没有太大的异议
因为调用的是 defaults.success(data);
四、总结：增加的两段字符
jsonp: "callback",
jsonpCallback: "hehe"
五、完整代码
myAjax({
url: "https://spo.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data: {wd:keywordValue},
success:function(data){
console.log(data);
｝
｝）；
/ / var script = document.createElement("script");
//script.src="https ://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hh
y/su?wd="+keywordValue+"&cb=haha";
/ / window[ "haha"] = function(data){
//var liTag = "";
//for(var i=0; i<data.s.length;i++){
//var temp = data.s[i];
//liTag += “<li>"+temp+"</li>";
//var ulTag = document.querySelector("ul"');
//ulTag.innerHTML = liTag;
// };
/ / var head = document.querySelector( " head" );
// head. appendchild(script);
var params = "";
for(var attr in defaults.data){
params += attr t “=" + defaults.data[ attr] + "&";
}
if(params) {
params = params.substring(0,params. length-1);
defaults.url +="?" + params;
defaults.url += "&"+defaults.jsonp+"=" + defaults.jsonpCallback;
console. log(defaults.url);
var script = document.createElement( "script");
script.src = defaults.url;
window[ defaults.jsonpcallback] = function( data){
defaults.success(data);
};
var head = document.querySelector("head");
head.appendChild(script);
