美文网首页
Ajax实现跨域

Ajax实现跨域

作者: 戏之地 | 来源:发表于2017-03-22 23:05 被阅读9次

同源策略

所谓同源是指,域名,协议,端口相同。
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。
如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

浏览器的同源策略为:当你用ajax发请求时,若请求的地址不同源,则不能访问。此为浏览器的一个安全机制。

JSONP的思路

使用ajax虽然不能直接访问请求的url路径,但是可以引用非同源的js,css等一般情况下具有src属性的标签。

    function submit_Jsonp_cross_domain() {
        var tag = document.createElement('script');
        //下面这句话返回一个HTTP__RESPONSE字符串
        //返回fuck("arg"),正好调用下面的参数 
        tag.src = 'http://localhost:9191/cross_domain';
        document.head.appendChild(tag);
        document.head.removeChild(tag);
    }
    function fuck(arg) {
            alert(arg)
    }

注意一下:

  • 也可以在ajax的请求后面添加参数,告诉被请求的URL这就是我想要的回调函数的名字

用jQuery实现

function submitJsonp4() {
    $.ajax({
        url: 'http://127.0.0.1:9000/xiaokai.html',
        type: 'POST',
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'func'
    })
}
function func(arg) {
    console.log(arg);
}

小江总结:

  • 标志这个请求和别的请求不一样,dataTypejsonP
  • jsonp的请求参数要设置一下啊,jsonpcallback
  • 回调函数的名字: func, 在本地执行的

相关文章

  • AJAX

    题目 手写一个ajax 跨域的常用实现方式 知识点 XMLHttpRequest 状态码 跨域:同源策略,跨域解决...

  • 解决ajax跨域问题

    Jsonp解决ajax跨域问题 CORS解决ajax跨域问题

  • 4种方法解决js跨域的实现方式

    一、JSONP 使用ajax实现跨域: 二、CORS跨域资源共享 三、Nginx反向代理 四、webpack (在...

  • 前端跨域

    什么是ajax跨域 ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参...

  • JavaScript面试题(一)

    一、ajax原理是什么?ajax如何实现跨域?原理及过程? Q1:Ajax的工作原理:通过XmlHttpReque...

  • 关于跨域

    跨域的几种方法及优缺点 1. JSONP跨域 优点:它不像XMLHttpRequest对象实现的Ajax请求那样受...

  • Ajax实现跨域

    同源策略 所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百...

  • 跨域

    跨域:ajax 不能跨域img css script 标签 可以跨域例如:《img src="images/...

  • JQuery的jsonp跨域

    Jsonp原理 ajax请求是不能跨域的,但是静态资源的引用是可以跨域的,利用这一点结合 就可以实现跨域通讯 前台...

  • ,汇总

    1、原生ajax实现步骤,ajax怎么实现跨域? 第一步:获得XMLHttpRequest对象 第二步:设置状态监...

网友评论

      本文标题:Ajax实现跨域

      本文链接:https://www.haomeiwen.com/subject/wodanttx.html