url:http://localhost/CORS/ajax/index.html
文件目录:
1586850844.png
一,首先,ajax使用:
// 创建对象
var ajax = new XMLHttpRequest();
// 建立连接
ajax.open("GET", "http://192.168.1.3/CORS/ajax/test.json", true);
// 发送请求
ajax.send();
// 接收数据
ajax.onreadystatechange = function() {
if (ajax.readyState === 4 && ajax.status === 200) {
var data = JSON.parse(ajax.responseText);
console.log(data);
}
};
XMLHttpRequest对象可以实现跨域,但是浏览器不允许,这是个伪命题
1,服务器代理:简单粗暴,向后端发送一个url,然后又后端代理获取其他域名下的内容,然后再把获取的内容返回到前端,这种属于后端跨域,不属于前端
2,jsonp跨域
json:一种轻量级的数据交换格式
jsonp:是json的一种使用模式,用jsonp抓取的资料并不是json,而是任意javascript
二,js使用jsonp:
<button onclick="jsClick()">js发送请求</button>
function createScript() {
var eleScript = document.createElement("script");
eleScript.type = "text/javascript";
eleScript.src = "http://192.168.1.3/CORS/ajax/test.php?callback=test";
document.getElementsByTagName("head")[0].appendChild(eleScript);
}
// 传入的回调
function test(name) {
console.log("跨域:" + name);
}
function jsClick() {
// 问题,创建之后没有删除
createScript();
}
jsonp原理:创建script标签,src指向后端地址,在后端调用前端传过去的方法,不过这个简单写法有个问题:script标签没有删除,需要手动删除
1586850901.png 1586850935.png有点尴尬
三,jquery方法:
<button onclick="jqueryClick()">jquery发送请求</button>
function jqueryClick() {
$.ajax({
type: "get",
url: "http://192.168.1.3/CORS/ajax/test.php?callback=test",
dataType: "jsonp",
jsonp: "callback", // 传回调的方式有几种
success: function(data) {
alert("jquery:" + data);
}
});
}
前端 -- 浏览器创建临时函数 -- 后端 -- 调用临时方法 -- 使用success中的回调方法 -- 销毁临时函数
1586850976.pngscript标签也会被销毁
其他跨域方式:https://juejin.im/post/5c23993de51d457b8c1f4ee1#heading-12
网友评论