共计 1300 个字符，预计需要花费 4 分钟才能阅读完成。
简述：
jsonp 可以解决 $.ajax 无法跨域请求的问题，其基本原理是利用 web 调用 js 文件不受跨域影响，在 html 标签中类似 <script>、<img>、<iframe> 具有 src 属性的都不会受跨域的影响，jsonp 就是利用这个特性，实现对跨域数据请求，需要注意的是，jsonp 只能是 GET 请求。
简单实现
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="http://10.0.0.5/test.js"></script>
</body>
</html>其中 test.js 是在虚拟机 nginx 服务器放置的一个 js 文件，内容为:
alert('this is a test')访问页面成功弹窗显示:
自定义函数调用
这次我们将远端的 js 文件写上前端的函数名，达到实现数据交互的功能
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function Test(data) {alert(data)
}
</script>
<script src="http://10.0.0.5/test.js"></script>
</body>
</html>目标 js 文件
Test('来自远方的问候')访问页面成功弹窗显示：
动态调用
服务端要是可以动态生成 js 脚本，这样服务端就可以对客户端发送的请求做验证，从而返回相应的内容。
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<button onclick="Test()">test</button>
<script src="jquery.js"></script>
<script>
function Test() {
$.ajax({
url:'http://10.0.0.1:8000/index2',
data:{'data':$('input').val()},
dataType:'jsonp',
Callbacks:'callbacks',
jsonpCallback:'fun',
})
}
function fun(data) {alert(data)
}
</script>
</body>
</html>服务端 (django)
def index2(req):
messget = req.GET.get('data')
data = req.GET.get('callback')+'(" 啦啦啦, 服务器收到你的数据啦, 你发送的是 %s")' %messget
print(data)
return HttpResponse(data)效果如下，当按下 test 按钮
备注
对了，还有一种请求也可以跨域，就是服务端返回的数据中 HTTP 响应报文包含了正确 CORS 响应头
正文完
发表至： javascript
2019-07-09
