开发者学堂课程【Ajax 前端开发入门与实战：淘宝提示词案例】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8546
淘宝提示词案例
目录：
一、课程回顾：跨域的实现
二、淘宝提示词案例
三、淘宝提示词接口
四、测试
五、创建 taobao_sug.html
六、跨域的实现技术方案
七、编写代码
一、课程回顾：跨域的实现
XMLHttpRequest. 对象默认情况下是无法获取到非同源服务器下的数据。
那么怎么获取别人服务器的数据呢?
使用 XMLHttpRequest 是达不到的，只能另辟蹊径。
可以通过 script 标签，用 script 标签的 src. 属性引入一个外部文件，这个外部文件是不涉及到同源策略的影响的。
例如:
Kscript type="text/javascript"
src="http://www.lisi.com/test.js"></script>
跨域的本质其实就是服务器返回一个方法调用,这个方法是事先定义好的,而方法中的参数就是想要的数据。
A、访问外部 s 文件
B、访问外部 php,文件
c、动态创建 script 标签传入动态参数
D、前端界面决定方法名称
E、给 window 增加属性进行方法定义
小案例:淘宝提示词接口、百度提示词接口
二、淘宝提示词案例
例子：在网页打开 taobao.com
在搜索的位置搜索 java 就会看到相关的提示关键字出现在输入框的下边
关键字是从淘宝服务器库中获取的
三、淘宝提示词接口
地址：
https://suggest.taoba9.com/sug
作用描述：
获取淘宝提示词接口
请求类型：
Get 请求
参数：
q∶ 关键字
callback: 回调方法名称
返回数据格式：
Jsonp 格式
四、测试
复制 https://suggest.taoba9.com/sug到预览器当中
需要两个参数 q 关键字和 callback 回调方法
插入相关参数
https://suggest.taoba9.com/sug?q=java&callback=haha
会发现开头是 haha 后面是括号
括号当中就是想要的数据是一个对象
如果把 haha 变为 hehe 会发现回调的方法从 haha 变成了 hehe 改为任意一个字符串函数名称都会有一个对应的变化。
五、创建 taobao_sug.html
输入代码
<script type="text/javascript">
window.onload = function()i
var btn = document.querySelector( "#btn");btn.onclick = function()i
var keywordValue = document.querySelector( " #keword" ).value;
console. log(keywordvalue);
};
};</script>
</ head>
<body>
<input type="text" id="keyword" placeholder="请输入相关的关键字">
<input type="button" id="btn" value="查询">
保存打开预览器
输入 www.zhangsan.com 打开调试工具
搜索123会发现 Console 发现错误，表示访问了一个空对象
回到代码 var keywordValue = document.querySelector( " #keword").value;这一行，找到 keyword 发现少了一个 y 填写上去
看到相关错误日志一定要找到错误日志，把关注点放在那
发现没有保存还会出现错误，保存之后刷新网页
请求 https://suggest.taoba9.com/sug?q=java&callback=haha
接口位置会发现无法请求 ajaxacross
六、跨域的实现技术方案
创建标签
var script = document.createElement( "script");
script.src = "https://suggest.taobao.com/sug?q="+keywordValue+"&callback=xixi";T
var head = document.queryselector("head");head.appendChild();
请求
https://suggest.taobao.com/sug?q="+keywordValue+"&callback=xixi地址就是方法的一个回调
打开预览器搜索 java
在 Consoie 下发现相关的数据
v0bject iresult: Array[10]] 团 vresult: Array[10]
0: Array [2]
: "java从入门到精通”1:"6888""
length: 2
_proto__: Array [0]v1: Array[2]
e: "java编程思想"1: "2121"
length: 2
_proto_: Array [0]2:Array [2]
0: "javascript"1:"35061"
length: 2
__proto__: Array[0]3:Array[2]
e: "java公路车”1: "1486"
length: 2
__proto_: Array [0]v4: Array[2]
: "java核心技术"1:"4044""
length: 2
_proto_: Array[0]
var liTag = "";
for(var i=o;i<data.result.length;i++){
var temp = data.result[ i];
var tempSug = temp[0];
liTag ="<li>"+tempSug+"</li>";
}
var ulTag-document.querySelector(“ul"); IulTag.innerHTML = liTag;
七、编写代码
var script = document.createElement( "script" );
script.src = "https://suggest.taobao.com/sug?q="+keywordValue+
"&callback=hehe";
window[ "hehe"] = function(data){
var liTag = "";
for(var i-o;i<data.result.length;i++){
var temp = data.result[i];
var tempSug = temp[0];
liTag +="<li>"+tempSug+"</li>";}
var ulTag = document.querySelector();;
var head=
document.querySelector( "head");head.appendchild(script);
};};/script>
