AJAX（jQuery）与跨域
Posted 前端挖掘机
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX（jQuery）与跨域相关的知识，希望对你有一定的参考价值。
$.ajax({
type:"get/post",
data:{nickname:"...", password:"..."},
dataType:"json",//可自动JSON.parse()转为js对象
success:function(res){
//res是JSON.parse()已经解析过的可直接使用的js对象/数组
}
})
跨域
浏览器同源策略，也称禁止跨不同源头访问资源错误（仅限于ajax）：浏览器规定发送ajax请求时，只有相同域名的客户端和相同域名的服务端之间才能发送请求。
跨域：从一个域名下的网页，向另一个域名下的服务端发送ajax请求——受浏览器的同源策略控制，禁止发送的。
域名不同
http://www.a.com/index.html -> http://www.b.com/index.html
子级域名不同
http://oa.... -> http://hr....
端口号不同
http://localhost:5500/index.html->http://localhost:3000
协议不一样
http://... (:80) -> https://... (:443)
即使同一台机器，域名和IP之间不能相互访问
http://localhost/index.html -> http://127.0.0.1
实现跨域请求：
CORS方式
同源策略本质：可以发送ajax请求，也可以正常执行服务端的程序，也可以顺利返回正确的结果，但是浏览器经过检查数据的来源，发现和当前网页的来源不一致，所以，到手的数据不让用。
解决：在服务器端返回响应的响应头中伪装成指定的源头
res.send()
res.writeHead(200,{
"Content-Type":"application/json;charset=utf-8"
});
res.write(JSON.stringify(result));
res.end();
JSONP方式
JSON with padding 填充式JSON
方案一：
服务器端：将要发送的数据填充在一条js语句中
res.write(`document.write("${weather}")`)
客户端：<script > 发送请求到服务器端，并收到服务器端返回的js语句字符串：
document.write("${name}")
然后自动执行
问题：要在客户端执行的js语句在服务器端写死了，不可改变
方案二：
提前在客户端定义一个函数，用于处理服务端返回的请求，服务端仅使用函数名拼接一条函数调用的js语句。
客户端：function show(name){
任意js语句
}
服务端：res.write(`show("${name}")`)
问题：本该定义在客户端的函数名，在服务端是写死的
方案三：
用请求参数将函数名传递给服务器
客户端：<script ></script>
服务端：接收客户端传来的名为callback的参数中保存的函数名，将callback函数名动态拼接到要返回的函数调用语句中。
问题：<scripr>在页面中写死，只能在页面加载过程中执行一次，无法按需反复执行，比如每次点击按钮时，随时发送请求。
方案四：
每次单击按钮时动态创建<script>元素
客户端：用DOM创建
问题：每次单击都会创建<script>元素，导致<script>堆积
解决：在回调函数（上文的show函数）结尾删除body最后一个<script>
$("body>script:last").remove();
方案五：
jQuery对JSONP方式跨域进行了终极的简化：
$.ajax({
url:
type:
data:
dataType:"jsonp", （自动生成随机函数名）
success:function(){
...
}
})
以上是关于AJAX（jQuery）与跨域的主要内容，如果未能解决你的问题，请参考以下文章
jquery .getJSON 跨域请求 报 Url错误 。callback=?用与跨域的参数，急啊 高手帮忙解决一下。