整理下初学时做过的js基础编程题目和大家分享以下,如果大家觉得有用,别忘了点一下赞哦
JSONP跨域的原理
1.img、script等标签的src属性,它不受同源策略限制
2.JSONP请求数据时,服务端返回的时一段可执行的js代码
JSONP用途:解决请求其他服务器时的跨域问题
JSONP局限:只能get方式,需要服务器做一些处理,配置
客户端
<button id="btn">跨域请求按钮</button>
<script>
let btn = document.querySelector("#btn")
btn.addEventListener('click',function(e){
let script = document.createElement('script')
let name = "xiaoliu" + parseInt(Math.random()*1000,10)
window[name] = (data) =>{
console.log(data)
}
script.src = "http://localhost:3001/jsonp_data?callback=" + name
document.body.appendChild(script)
script.onload = (e)=>{
e.currentTarget.remove()//运行完,删除script标签
delete window[name]
}
})
</script>
服务端
const express = require('express')
let app = express()
app.get("/jsonp_data",(req,res)=>{
console.log(req.query)
let callback = req.query.callback
//返回一段可执行的js代码
let data = callback + "({'name':'xiaoliu'})"
res.send(data)
})
app.listen(3001,()=>{
console.log('小刘的服务器')
})
这里扩展下
event.target:触发事件的事件源对象。
event.currentTarget:事件绑定的那个对象, 也就是绑定处理函数内部的this