开发者学堂课程【Ajax 前端开发入门与实战：使用 jquery 获取跨域数据】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8550
使用 jquery 获取跨域数据
目录:
一、使用 jquery 获取跨域数据
二、跨域获取得到数据的解决方法
三、方法调用
四、jquery 实现跨域数据
一、使用 jquery 获取跨域数据
先把 jqury.js 文件
放到 06_ajaxacross_jquery 下面
打开 06_ajaxacross_jquery 在里面进行相关的修改
首先打开 taobao_sug.html
在实现相关功能之前要先把 jquery.js 输入进来
这个位置就不要
myAjax({url:"https://suggest.taobao.com/sug",data:{q:keywordValue,
success:function(data){
var liTag = "";
for(var i=0; i<data.result.length;i++){
var temp = data.result[ i];
var tempSug = temp[0];
liTag += "<li>"+tempSug+"</li>";
}
varulTag=document.querySelector("ul");ulTag.innerHTML = liTag;
url：地址就是"https:/ /suggest.taobao.com/sug"字符串
data: 所需要的参数 {q: keywordvalue},
success:成功的一个方法当中想要的一个数据function(data){
先试试consoLe. log(data) ;能不能进行一个正常的获取
是不可以正常获取的因为上方是
url："https:/ /suggest.taobao.com/sug"有同源策略限制
打开预览器
新建一个标签 www.zhangsan.com
打开 06_ajaxacross_jquery
输入123关键字点击查询
打开调试工具会发现在 Console 地方报错
就是由于前端阶段 www.zhangsan.com
在这个域名下面去访问
https:lLsuggest.taobao.com/ sug?q=123.
对于 ajaxacross是不被允许的，因为同源策略把它阻止了。
二、跨域获取得到数据的解决方法
像之前自己分装跨域去获取也能够得到
https:/ /suggest.taobao.com/sug 的数据的解决方法
介绍一个都熟悉的东西：dataType: "jsonp"
要获取跨域数据必须是 jsonp，关键就是 jsonp
dataType: "jsonp"
步骤做完之后，回到网页，点击查询，会发现没有报错。
打开调试工具点击 Network 的地址是
https:/lsuggesttaobao.com/sug?callback=jQuery111109456856830248028_1507223145671&q=123&_=1507223145672
q=123代表的是业务逻辑下面的数据
callback=jQuery111109456856830248028_1507223145671代表的是taobao 的服务器会根据 callback 来得到
jQuery111109456856830248028_1507223145671一个字符串
三、方法调用
key 默认就是 callback
value 的值以 jQuery 开头的字符串，这个字符串就是函数调用的名称
做以下步骤
dataType: "jsonp",jsonp: "cb"
保存之后刷新网页，点击123查询
会发现
https:/lsuggesttaobao.com/sug?callback=jQuery111109456856830248028_1507223145671&q=123&_=1507223145672
变成
https:/lsuggesttaobao.com/sug?cb=jQuery111109456856830248028_1507223145671&q=123&_=1507223145672
Taobao 的服务器只能识别 cb 是不能识别 callback 的
但是通过这样一个方法调用，来修改默认 callback
修改 jsonpCallback: "haha" 会发现
变成 sug?cb=haha&q=123&_=1507223357317
haha 就是服务器所需要的字符串
q=123 就是业务逻辑
通过 jsonp 可以修改 P 值
通过 jsonpCallback 可以修改 haha 值
需要注意 dataType :必须是要 "jsonp"
通过 jsonp 来制定服务器需要的 p 值
通过 jsonpCallback 来制定服务器所需要的返回方法需要调用的函数名称
四、jquery 实现跨域数据
将代码复制到 baidu 案例中进行相关的实现
修改相关代码和相关地址
<title>Document</title>
<script type="text/javascript" src="myutils.js "></script>
<script type="text/javascript" src="jquery.js "></script>
<script type="text/javascript">
window.onload = function(){
var btn = document.querySelector("#btn");
btn.onclick = function()i
var keywordValue = document.querySelector( " #keyword").value;
consoLe.log (keywordvalue);I
$.ajax({
url : "https:/lspo.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data: {q:kaywordValue},
success:function(data){
consoLe.log(data);},
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "haha"});
myAjax({url:"https:/lspo.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",data: {wd : keywordvalue},
success:function(data){
console. log(data);
dataType: "jsonp"
key 默认就是 callback
value 的值以 jQuery 开头的字符串，这个字符串就是函数调用的名称
$.ajax({
url: "https:/ /suggest.taobao.com/sug",
data: {q: keywordvalue},
success:function(data){
consoLe. log(data);
}，
dataType : "jsonp",
jsonp: "caliback",
jsonpCallback : "haha”
<title>Document</title>
<script type="text/javascript" src="myutils.js">
</script><script type="text/javascript" src="jquery.js">
</script><script type="text/javascript">
window.onload = function(){
var btn = document.querySelector("#btn");btn.onclick = functionO{i
var keywordValue = document.querySelector( " keyword").value;
consoLe.log(keywordvalue);
