09. ajax跨域问题,同源策略
有三个标签允许跨域加载资源
<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