jsonp前后端交互（解决跨域问题）
目标
- 掌握jsonp的原理
- 会搭建node服务器创建jsonp接口
- 学会封装jsonp
- 学会jsonp的实际运用
知识要点
- 跨域解决
- jsonp原理及封装
- jsonp服务器搭建
- jsonp实际运用
ajax问题
- 浏览器同源策略
- 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源
- 源 ：协议、域名和端口号
- 跨域
- 不受同源策略影响的资源的引入
- <script src="..."></script>，<img>，<link>，<iframe>
jsonp
JSONP*(JSON with Padding)解决跨域问题；可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
- jsonp原理
- 通过script来实现跨域；
- 服务端实现
- jsonp代码封装
function ajax(options) { let opts = Object.assign({ method: 'get', url: '', headers: { 'content-type': 'application/x-www-form-urlencoded' }, jsonp:"cb", data: '', success: function () { } }, options) //处理jsonp请求； if(opts.dataType==="jsonp"){ jsonpFn(opts.url,opts.data,opts.jsonp,opts.success); return false; } function jsonpFn(url,data,cbName,cbFn){ // cbName cb/callback let fnName = "KKB_"+Math.random().toString().substr(2); window[fnName] = cbFn; let path = url+"?"+o2u(data)+"&"+cbName+"="+fnName; // console.log(path); let o = document.createElement("script"); o.src = path; document.querySelector("head").appendChild(o); } let xhr = new XMLHttpRequest(); if (options.method == "get") { let data = o2u(opts.data) options.url = options.url + "?" + data; } xhr.open(options.method, options.url, true); for (let key in opts.headers) { xhr.setRequestHeader(key, opts.headers[key]); } let sendData; switch (opts.headers['content-type']) { case 'application/x-www-form-urlencoded': sendData = o2u(opts.data); break; case 'application/json': sendData = JSON.stringify(opts.data); break; } xhr.onload = function () { let resData; if (xhr.getResponseHeader("content-type").includes("xml")) { resData = xhr.responseXML; } else { resData = JSON.parse(xhr.responseText); } options.success(resData); } if (options.method == "get") { xhr.send(); } else { xhr.send(sendData); } } function o2u(obj) { let keys = Object.keys(obj); let values = Object.values(obj); return keys.map((v, k) => { return `${v}=${values[k]}`; }).join("&"); }
- 请求百度接口
```js
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=hello&cb=succFn
```
<!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">
<script src="jsonp.js"></script>
<title>Document</title>
</head>
<body>
<h1>百度搜索</h1>
<input type="text" class="myinput" />
<div class="exchange"></div>
</body>
<script>
// console.log(ajax);
document.querySelector(".myinput").onblur = function(){
ajax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
dataType:"jsonp",
data:{
wd:this.value
},
success:function(res){
let data = res.s;
let html = "<ul>";
data.forEach(v=>{
html += "<li>"+v+"</li>";
})
html += "</ul>";
document.querySelector(".exchange").innerHTML = html;
}
})
}
</script>
</html>
