有三个标签允许跨域加载资源
<img src=“”/>
<link href=“”/>
<script src=“”>
可以做防盗链图片功能
前端使用jsonp实现原理
后端设置http header
手动编写一个ajax
var xhr= new XMLHttpRequest()
xhr.open('GET','/api',false)
xhr.onreadystatechange=function(){
//这里的函数异步执行,可参考之前js基础中的异步模块
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.responseText)
}
}
}
xhr.send(null)
如果同页面，使用iframe的跨域问题,
cross-origin
服务端增加
response.addHeader("Access-Control-Allow-Origin", "http://write.blog.csdn.net");
后端处理可以写cors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
// 面试题：什么是跨域？解决跨域的办法有哪些？
/*
1.同源策略
- 浏览器安全策略
- 协议名、域名、端口号必须完全一致
2.跨域
-违背同源策略就会产生跨域
3.解决跨域
jsonp、cors、服务代理...
(前端) （后端）
*/
//创建script标签
var script=document.createElement('script');
//设置回调函数
function getDate(data){
console.log(data);
}
//设置script 的src属性，设置请求地址
script.src='http://localhost:3000?callback=getDate';
//让script生效
document.body.appendChild(script);
</script>
</body>
</html>
ajax的传输方式
如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete
跨域问题，Ajax返回值有哪几个
1xx 信息提示
2xx成功
3xx重定向
200,请求成功
206,请求内容局部成功
4xx客户端
404未找到
400,客户端请求语法错误,一般是连接地址不对.
5xx服务端
500,服务器出现异常.宕机.
jQuery中ajax的4种常用请求方式： 1.$.ajax()返回其创建的 XMLHttpRequest 对象。
2.通过远程 HTTP GET 请求载入信息。
3. 通过远程 HTTP POST 请求载入信息。
4.通过 HTTP GET 请求载入 JSON 数据。
2. 请求方式：
一共有8种请求方式,常用的请求方法有OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT