微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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成功
 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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐