09. ajax跨域问题,同源策略

有三个标签允许跨域加载资源

可以做防盗链图片功能

前端使用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

09. ajax跨域问题,同源策略

猜你喜欢