广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何理解ajax跨域请求
  • 182
分享到

如何理解ajax跨域请求

ajax 2022-10-19 10:10:20 182人浏览 泡泡鱼
摘要

本篇内容介绍了“如何理解ajax跨域请求”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!同源策略限制同源策略

本篇内容介绍了“如何理解ajax跨域请求”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 WEB 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。——摘自developerWorks
所谓同源是指,域名,协议,端口相同。

平地一声吼

本文讲解的是怎么利用ajax实现跨域请求,那么知道“同源策略”,就可以解决很多疑问:“为毛我的ajax加载不了数据!”“为毛浏览器控制台会对我如此漂亮的代码报错!”

例子1
先上一个错误示范

客户端代码:

复制代码 代码如下:


<script>
    // 客户端使用getJSON方法请求另一台机子上的脚本
    $.getjsON("Http://172.22.22.120/new/ajax.PHP",function(json){
        alert(json.website);
    });
</script>

服务端php脚本代码:

复制代码 代码如下:


<?php
    // ajax.php
    header('Content-type: application/json');

    echo json_encode(array('website'=>'hcoding'));
?>

firefox下的错误提示:

如何理解ajax跨域请求

根据同源策略的概念,localhost和172.22.22.120是出于不同的域名下的,所以跨域请求理所当然地被浏览器拒绝了。

JSONP

JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料。另一个解决这个问题的新方法是跨来源资源共享。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通,而 html 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的 javascript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。——摘自维基百科
这话该怎么理解呢!我个人是这样认为的,用<script>跨域的请求数据,跨域的服务器返回一段【JavaScript代码】,是 的,你没看错,不是json格式数据,是JavaScript代码,这样,这段代码就由JavaScript 直译器执行。上例子更直观:

例子2
客户端代码:

复制代码 代码如下:


<script>
    // 这是回调方法
    function cb(data){
        alert(data.website);
    }
</script>
<!--这是跨域请求的代码,切记,这段代码要在回调函数之后-->
<script src="http://172.22.22.120/new/ajax_jsonp.php?callback=cb"></script>

服务端PHP脚本代码:

复制代码 代码如下:


<?php
    $cb = htmlspecialchars($_GET['callback']);  // 注意了,这里要做好过滤,防止xss攻击
    echo $cb,'(',json_encode(array('website'=>'hcoding')),')';  // 返回客户端的数据为:cb({"name":"hcoding"})  这是一段js代码
?>

浏览器会发生什么事呢,我就不说了,当然是cb方法被调用啦:

如何理解ajax跨域请求

所以,再说jsonp的概念,利用<script>不受同源策略的限制,跨域的服务器把要返回的json数据作为参数和回调函数一起返回客户端。

JQuery对JSONP的支持

本文要讲ajax的跨域请求,前面说了那么多,下面当然要讲主题啦。

从 1.2 版本开始,Jquery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调,就可以加载位于另一个域的 JSON 数据,回调的语法为:url?callback=?。jQuery 自动将 ? 替换为要调用的生成函数名。

例子3:$.getJSON方法跨域请求
例子4:$.ajax方法自定义回调方法
例子3
客户端代码:

复制代码 代码如下:


<script>
    // 客户端使用getJSON方法请求另一台机子上的脚本
    // 浏览器会生成一个随机的callback参数
    $.getJSON("http://172.22.22.120/new/ajax_jsonp.php?callback=?",function(json){
        alert(json.website);
    });
</script>

服务端PHP脚本代码:

复制代码 代码如下:


<?php
    $cb = htmlspecialchars($_GET['callback']);  // 注意了,这里要做好过滤,防止xss攻击
    echo $cb,'(',json_encode(array('website'=>'hcoding')),')';  // 返回客户端的数据,这是一段js代码
?>

如何理解ajax跨域请求

$.getJSON简单易用,但就是不能指定回调函数。

例子4
客户端代码:

复制代码 代码如下:


<script>
    $.ajax({
        type : "GET",
        url : "http://172.22.22.120/new/ajax_jsonp.php",
        dataType : "jsonp",    // 数据格式指定为jsonp
        jsonp: "callback",     // 服务点通过这个键值获取回调方法
        jsonpCallback:"cb",   // 指定回调方法
        success : function(json){
        },
    }); 
    // 回调方法
    function cb(data){
        alert(data.website);
    }
</script>

服务端PHP脚本代码和例子3的相同。

如何理解ajax跨域请求

“如何理解ajax跨域请求”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: 如何理解ajax跨域请求

本文链接: https://www.lsjlt.com/news/81995.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何理解ajax跨域请求
    本篇内容介绍了“如何理解ajax跨域请求”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!同源策略限制同源策略...
    99+
    2022-10-19
    ajax
  • 如何解决Ajax请求跨域问题
    这期内容当中小编将会给大家带来有关如何解决Ajax请求跨域问题,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。一、解决方案:1,在服务器端的响应头中添加一个http参数:res.setHeader(&quo...
    99+
    2023-06-08
  • AJAX如何跨域请求数据
    这篇文章主要为大家展示了“AJAX如何跨域请求数据”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“AJAX如何跨域请求数据”这篇文章吧。由于浏览器的同源策略 aj...
    99+
    2022-10-19
    ajax
  • 如何解决Ajax请求WebService跨域问题
    这篇文章主要介绍如何解决Ajax请求WebService跨域问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、背景  用Jquery中Ajax方式在asp.net开发环境中Web...
    99+
    2022-10-19
    ajax webservice
  • Ajax请求跨域的解决方案
    这篇文章主要讲解了“Ajax请求跨域的解决方案”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Ajax请求跨域的解决方案”吧!  由于浏览器实现的同源策略的限...
    99+
    2022-10-19
    ajax
  • Vue如何用Ajax实现跨域请求
    本篇内容主要讲解“Vue如何用Ajax实现跨域请求”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue如何用Ajax实现跨域请求”吧!一.设置config/index.js || proxyTa...
    99+
    2023-07-04
  • Ajax中如何实现jsonp跨域请求
    这篇文章主要介绍Ajax中如何实现jsonp跨域请求,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是跨域?简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他...
    99+
    2022-10-19
    ajax jsonp
  • Ajax怎么进行跨域请求
    这篇文章主要为大家展示了“Ajax怎么进行跨域请求”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax怎么进行跨域请求”这篇文章吧。下面我们在本地建两个站点演...
    99+
    2022-10-19
    ajax
  • AJAX请求以及解决跨域问题详解
    目录AJAX 介绍一.原生AJAX请求(GET)二.jQuery AJAX请求(GET 和POST)三.跨域问题的解决四.其他解决跨域问题方法总结AJAX 介绍 AJAX其实就是异步...
    99+
    2022-11-13
    ajax跨域请求 ajax跨域解决方案 怎么发送ajax请求
  • 如何使用$.getJSON实现跨域ajax请求
    本篇内容主要讲解“如何使用$.getJSON实现跨域ajax请求”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用$.getJSON实现跨域ajax请求”吧...
    99+
    2022-10-19
    $.getjson ajax
  • ajax如何实现前台后台跨域请求处理
    这篇文章主要为大家展示了“ajax如何实现前台后台跨域请求处理”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“ajax如何实现前台后台跨域请求处理”这篇文章吧。跨...
    99+
    2022-10-19
    ajax
  • ajax请求报错php怎么开启跨域请求
    这篇文章将为大家详细讲解有关ajax请求报错php怎么开启跨域请求,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在php文件头部加入header(“Access-Control-Allow-Origin:...
    99+
    2023-06-15
  • ajax本地跨域请求以及解决方法
    什么是跨域? 我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没有同时满足这三个条件的请求即为跨域请求,跨域请求控制台一般会出...
    99+
    2023-09-15
    ajax php apache Powered by 金山文档
  • 基于CORS如何实现WebApi Ajax跨域请求
    这篇文章主要介绍了基于CORS如何实现WebApi Ajax跨域请求,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。概述ASP.NET Web...
    99+
    2022-10-19
    ajax webapi cors
  • Nginx中怎么实现AJAX跨域请求
    这篇文章给大家介绍Nginx中怎么实现AJAX跨域请求,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。AJAX从一个域请求另一个域会有跨域的问题。那么如何在nginx上实现ajax跨域请...
    99+
    2022-10-19
    nginx ajax
  • 如何配置服务端实现AJAX跨域请求
    这篇文章主要介绍“如何配置服务端实现AJAX跨域请求”,在日常操作中,相信很多人在如何配置服务端实现AJAX跨域请求问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何配置服务...
    99+
    2022-10-19
    ajax
  • 怎么用iframe设置代理解决ajax跨域请求问题
    本篇内容介绍了“怎么用iframe设置代理解决ajax跨域请求问题”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有...
    99+
    2022-10-19
    iframe ajax
  • ajax跨域请求js拒绝访问的问题如何解决
    本篇内容介绍了“ajax跨域请求js拒绝访问的问题如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
    ajax
  • 如何解决ajax跨域请求数据cookie丢失的问题
    本篇内容介绍了“如何解决ajax跨域请求数据cookie丢失的问题”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有...
    99+
    2022-10-19
    ajax cookie
  • 如何解决JQuery Ajax执行跨域请求数据的问题
    这篇文章将为大家详细讲解有关如何解决JQuery Ajax执行跨域请求数据的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下原来的ajax请求如下:$.ajax...
    99+
    2022-10-19
    jquery ajax
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作