同源策略
+ 同源策略主要是为了安全性
=> 协议：http https ftp
=> 域名：www.baidu.com www.jd.com
=> 端口：80 8080 40等等
=> 只要其中有一个不相同我就不让你访问
=> 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
同源策略给前端带来的问题
+ 例如：百度、京东、淘宝这些大公司下面有很多的子公司，每一个公司都有自己的网站，不同的网站是放在不同的服务器上面的，
根据同源策略来讲，只有有一个不相同都访问不了，问题是公司都是属于一个总公司资源要共享，共享不了的
+ 百度公司
=> https://www.baidu.com/ 百度首页
=> http://news.baidu.com/ 百度新闻
=> https://tieba.baidu.com/index.html 百度贴吧
=> 很多都不满足同源策略的条件，需要共享数据，解决方案是需要进行跨域
跨域
+ 域，根据同源策略来说不同网站之间不能相互访问
+ 为了解决访问问题，有人提出跨域
*/
//http://localhost/SecondStage/day25/code/data/hello.php
//注意点：ajax技术受同源策略影响，不同域的地址访问不了的
pAjax({
url: 'http://127.0.0.1/kuayu/day25/code/data/hello.php'
}).then((res)=>{
console.log(res)
})
<!--
地址
+ https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576
+ http://localhost/SecondStage/day25/code/03-jsonp.html
+ 思考：通过地址对比，发现没有一项可以满足同源策略的需求的，应该访问不了才对
=> 规则：在html里面src属性，比较特殊可以不受同源策略影响，可以进行跨域访问
=> 哪些标记上面有src属性，img、script
script标记上的src属性
+ 不受同源策略影响
+ 可以把引入地址返回的结果无论是什么都会以js代码的形式进行解析
+ src属性确实可以向服务器发送请求，也可以接收服务器返回的请求
+ jsonp跨域的原理：就是利于了script上面的src不受同源策略影响
+ 注意点：jsonp接收的请求，默认把json格式转成js对象形式，让咱们使用
-->
<img src="https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576" alt="" width="500">
<!--框架集标记，在一个网页中可以引入另一个网站，以框形式显示-->
<!-- <iframe src="https://www.jd.com"></iframe> -->
<!-- <script src="data/hello.txt"></script> -->
<script src="data/hello.php"></script>
<script>
//问题：没有办法把数据获取到，处理业务逻辑？
<script>
//思路：后端可以把前端代码返回并执行，给后端传递一个函数名称，让在返回数据的时候执行函数
// function fn(res){
// console.log(res)
// }
// function fn(res){
// console.log('看我能不能执行')
// console.log(res.code)
// }
function fn(res){
console.log('看我能不能执行')
console.log(res.code)
}
</script>
<script src="data/hello.php"></script>
<!--ajax和jsonp都是发送和接收信息的技术，jsonp可以跨域-->
<!--注意点：并不是每一次都需要告诉后端咱们函数名称是什么，因为太麻烦，所以可以通过传递参数解决这个问题-->
<script>
//思路：后端可以把前端代码返回并执行，给后端传递一个函数名称，让在返回数据的时候执行函数
// function fn(res){
// console.log(res)
// }
function jsonp(url){
//先创建一个script标记
let script = document.createElement('script')
//把地址赋值
script.src = url
//把创建的标记放body标记里面
document.body.appendChild(script)
}
function fn(res) {
console.log('看我能不能执行')
console.log(res.code)
}
jsonp('data/hello.php?cb=fn')
</script>
<!--cb--callback回调函数-->
<!-- <script src="data/hello.php?cb=sb"></script> -->
搜索功能
<input type="text" placeholder="请输入要搜索的内容">
<ul></ul>
<script src="js/jsonp.js"></script>
<script>
let container = document.querySelector('ul')
let search = document.querySelector('input')
function fn(res){
container.innerHTML = ''
res.s.forEach((item)=>{
container.innerHTML += `
<li>${item}</li>
`
})
}
//当咱们输入内容的时候触发这个事件，发送请求返回内容
onkeyup = ()=>{
container.innerHTML = ''
let wd = search.value
if(wd.trim().length == 0){
container.innerHTML = ''
return
}
jsonp(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=fn&wd=${wd}`)
}
cors跨越
<?php
header("Access-Control-Allow-Origin: *");//允许所有地址跨域请求
ajax load方法
<script>
let xhr = new XMLHttpRequest()
xhr.open('get', 'data/hello.php')
xhr.send()
//这是ajax新增的一个事件，当所有的请求完成后把结果直接返回给咱们
xhr.onload = ()=>{
console.log(xhr.response)
}
</script>
