1.jsonp的理解
浏览器发送ajax请求时会因为跨域而无法正常获取数据,而script标签请求数据时发送的是http请求,没有跨域问题。利用这个机制绕过跨域的限制来获取后端数据的技术就叫jspnp
实现原理:
在客户端定义一个函数,这个函数通常把传入的参数(数据)渲染到页面中。
在要请求数据时,新建一个script标签,设置src属性。src属性值中包含了客户端定义的函数名,以及要传递给服务器的数据
服务器接收到script标签发送的请求,返回一个js文件。这个文件的内容就是 客户端定义的函数的调用,并传入 了实参,这样就变相的请求到了数据
2.原生js实现jsonp
html页面的代码
<body>
<h1>新闻标题</h1>
<p>内容</p>
<input type="button" value="更新信息" id="btn">
</body>
<script>
function updatePage(obj){
var h1 = document.querySelector("h1")
var p = document.querySelector("p")
h1.innerHTML = obj.title
p.innerHTML = obj.content
}
//监听按钮点击
document.querySelector("#btn").onclick = function(){
//创建script标签
var script = document.createElement("script")
//设置src属性
script.src = "/jsonp/index.js"
// 插入标签
document.head.appendChild(script)
// 移除此标签
document.head.removeChild(script)
}
</script>
服务器返回的js文件代码
updatePage({
title:"火影忍者完结了",
content:"宇智波鼬的须佐能乎是最早登场的,虽然不是完全体状态,但鼬的须佐手持三大神器,可谓攻守兼备,让敌人找不到任何破绽。"
})
这里服务器端的代码写死了,实际项目中,会根据前端传递的数据动态生成js代码返回,但是本质上都是 客户端函数的调用
例如:src的格式应该是这样的
localhost:8080/jsonp?cb=updatePage&id=1
这样服务器就知道返回的js文件中要调用的函数是updatePage,而参数则根据id值去数据库中获取数据并传入到updatePage中
3.jquery实现
使用$.ajax(),传入配置项
<script>
function updatePage(obj){
var h1 = document.querySelector("h1")
var p = document.querySelector("p")
h1.innerHTML = obj.title
p.innerHTML = obj.content
}
//监听按钮点击
$("#btn").on("click",function(){
console.log("click")
$.ajax({
url:"./jsonp/index.js",
type:"get",
dataType: "jsonp",
data:{
id:1
},
jsonp:"cb",// 要调用的客户端函数的key
jsonpCallback:"updatePage",//客户端函数名称
success:function(data){
console.log(data)
}
})
})
</script>
运行代码会访问这个url
http://localhost:8080/jsonp/index.js?cb=updatePage&id=1