同源策略
是一种浏览器安全机制，源指的是 协议，域名，端口的总称，而不同的源，浏览器将不会接收数据。
如何解决跨域问题
Ajax的执行会被同源策略的限制，但是script标签却不受同源策略的影响，利用这个特点，可以在script中写一个函数，接收一个参数作为数据。
动态创建一个script标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text">
<ul></ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
function getData(data) {
var script = document.querySelector('#jsonp');
script.parentNode.removeChild(script)
$('ul').html('');
for(var i = 0; i< data.s.length;i++){
$('<li>'+ data.s[i] + '</li>').appendTo('ul');
}
}
function getList(wd) {
var script = document.createElement('script');
script.id = 'jsonp';
//cb = callback回调函数,这里是使用getData();
//wd = 返回数据
script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=getData&wd='+wd;
document.body.appendChild(script)
}
$('input').keyup(function () {
var wd = $(this).val();
getList(wd)
})
</script>
</body>
</html>
JSONP由两部分组成：回调函数和数据。通过动态script，从其他域中加载代码执行
如上代码，通过每次的输入监听，触发getList()方法建立动态script标签,然后将请求到的script标签交给回调函数getData(）进行处理
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
