AJAX跨域请求获取JSON数据的方法

本文详细介绍了如何使用 JSONP 实现 AJAX 的跨域请求,通过 jQuery、MooTools 和 Dojo Toolkit 三个库分别展示了 JSONP 的应用,强调了 JSONP 在跨域数据获取中的重要性和简便性。
摘要由CSDN通过智能技术生成

我们都知道,由于受到浏览器的限制,AJAX 是不允许跨域请求,不过可以通过使用 JSONP 来实现,本文介绍了 JSONP 的是怎么在 jQuery,MooTools 的,Dojo Toolkit 中实现的,感兴趣的朋友跟随小编一起看看吧

Asynchronous JavaScript and XML (AJAX ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序。

我们都知道,由于受到浏览器的限制,AJAX 是不允许跨域请求。不过可以通过使用 JSONP 来实现。JSONP 是一种通过脚本标记注入的方式,它是可以引用跨域 URL 的 js 脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果。 本文介绍了 JSONP 的是怎么在 jQuery,MooTools 的,Dojo Toolkit 中实现的。 

jQuery 的 JSONP

1. 什么是 JSONP

要了解 JSONP,不得不提一下 JSON,那什么是 JSON?

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding) 是一个非官方的协议,它允许在服务器端集成 Script tags 返回至客户端,通过 javascript callback 的形式实现跨域访问(这仅仅是 JSONP 简单的实现形式)。

2. JSONP有什么用

由于同源策略的限制,XmlHttpRequest 只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过 script 标签实现跨域请求,然后在服务端输出 JSON 数据并执行回调函数,从而解决了跨域的数据请求。

jQuery.getJSON 方法:

Js 代码如下:

1

2

3

4

5

6

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{

    q: "Arsenal"

},function(tweets) {

    // Handle response here

    console.info("Twitter returned: ",tweets);

});

或者类似

Js 代码如下:

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax是一种用于在网页上进行异步通信的技术,可以通过发送HTTP请求来获取数据或更新页面内容。然而,由于同源策略的限制,我们通常无法直接在网页上通过Ajax请求跨域的资源,包括本地的JSON文件。 跨域请求本地的JSON文件并不常见,因为同源策略主要用于防止恶意行为和安全问题。但是有时我们可能遇到需要跨域请求本地JSON文件的情况,例如在开发过程中需要模拟服务器返数据。 要实现跨域请求本地的JSON文件,可以通过以下几种方式: 1. JSONP(JSON with Padding) JSONP是一种通过动态创建<script>标签,实现跨域访问的方法。在本地JSON文件中,我们可以通过在JSON数据外面包裹一个函数调用来返数据。 例如,在本地JSON文件中添加如下代码: ```javascript jsonpCallback({"name": "John", "age": 25}); ``` 然后在网页上使用Ajax请求: ```javascript function jsonpCallback(data) { console.log(data); } var script = document.createElement('script'); script.src = 'local.json?callback=jsonpCallback'; document.body.appendChild(script); ``` 这样就可以通过JSONP方式跨域请求获取本地的JSON数据。 2. CORS(Cross-Origin Resource Sharing) CORS是一种通过在服务器端设置响应头来实现跨域访问的方法。在本地JSON文件中,我们需要在服务器端设置Access-Control-Allow-Origin响应头,允许指定域名的跨域请求。 例如,在服务器端的响应头中添加如下代码: ```javascript Access-Control-Allow-Origin: http://example.com ``` 然后在网页上使用Ajax请求: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'local.json', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); console.log(data); } }; xhr.send(); ``` 这样就可以通过CORS方式跨域请求获取本地的JSON数据。 总结:通过使用JSONP或CORS方式,我们可以实现跨域请求本地的JSON文件。JSONP通过创建<script>标签,而CORS则通过在服务器端设置响应头,使得跨域请求合法化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值