1.跨域体验
<!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>
<script src="./libs/jquery/jquery.js"></script>
</head>
<body>
<button>发起跨域请求</button>
<script>
// document.querySelector('button').onclick = function() {
// let xhr = new XMLHttpRequest()
// xhr.open('get', 'http://127.0.0.1:3001/getStudentsJSONP.js')
// xhr.send()
// }
$('button').on('click', function() {
$.ajax({
url: 'http://127.0.0.1:3001/getStudentsJSONP.js',
// 跨域请求
dataType: 'jsonp',
success: function(res) {
console.log(res)
}
})
})
</script>
</body>
</html>
2.jsonp跨域的原理
<!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>
<script src="./libs/jquery/jquery.js"></script>
<link
rel="stylesheet"
href="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superui/css/ubase_9376fdcf.css"
/>
</head>
<body>
<button>发起跨域请求</button>
<script>
function test(res) {
console.log(res)
}
</script>
<!-- <img
src="https://img2.baidu.com/it/u=1931533531,716385319&fm=26&fmt=auto&gp=0.jpg"
alt=""
/> -->
<script src="http://127.0.0.1:3001/getStudentsJSONP.js?callback=test">
// 跨域的原理：
// 1.src和href天然可以跨域，没有任何的跨域请求的限制
// 2.jsonp跨域的本质是利用了script标签的src属性的天然跨域特性
// 3.具体的操作是：在发起跨域请求的时候传入一个本地拥有的函数名称，服务器会返回调用函数的形式，且拼接好返回的数据
// 4.通过script请求获取的内容会默认以js语法来解析
// 5.jsonp跨域和异步对象没有任何的关系
// 6.jsonp只能发起Get请求
</script>
</body>
</html>
3.jsonp的原理
<!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>
<script>
function abc(res) {
console.log(res)
}
</script>
<!-- 通过script的src属性发出的请求获取的返回内容默认会为js语法解析 -->
<!-- <script src="http://127.0.0.1:3002/getdata?callback=success"></script> -->
<script>
let $ = {
ajax: function(option) {
if (option.dataType === 'jsonp') {
// 1.创建一个script标签
let script = document.createElement('script')
// 2.为script标签设置src属性
script.src = option.url + '?callback=abc'
// 3.将script添加到body中
document.body.appendChild(script)
} else {
let xhr = new XMLHttpRequest()
// /.....
}
}
}
$.ajax({
url: 'http://127.0.0.1:3002/getdata',
dataType: 'jsonp'
})
</script>
</body>
</html>