基础概念

在进入本文正题之前，我们需要先了解一些基础概念（如果你已经对这些基础有所了解，可跳过此段落）。

同源策略和跨域概念

同源策略（Same-orgin policy）限制了一个源（orgin）中加载脚本或脚本与来自其他源（orgin）中资源的交互方式。
如果两个页面拥有相同的协议（protocol），端口（port）和主机（host），那么这两个页面就属于同一个源（orgin）。

同源之外的请求都可以称之为跨域请求。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例：

URL 结果 原因
http://store.company.com/dir2/other.html 成功  
http://store.company.com/dir/inner/another.html 成功  
https://store.company.com/secure.html 失败 协议不同
http://store.company.com:81/dir/etc.html 失败 端口不同
http://news.company.com/dir/other.html 失败 主机名不同

我们可以简单粗暴地理解为同一站点下的资源相互访问都是同源的，跨站点的资源访问都是跨域的。

跨域资源共享

跨域资源共享（CORS）是一份浏览器技术的规范，提供了Web服务器从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是JSONP模式的现代版。与JSONP不同，CORS除了支持GET方法以外，还支持其他HTTP方法。用CORS可以让网页设计师用一般的XMLHTTPRequest，这种方式的错误处理比JSONP要来的好。另一方面，JSONP可以在不支持CORS的老旧浏览器上运作，现代的浏览器都支持CORS。

在网页http://caniuse.com/#feat=cors上列出了主流浏览器对CORS的支持情况，包含PC端和移动端的浏览器。

JSONP概念

由于同源策略，一般来说不允许JavaScript跨域访问其他服务器的页面对象，但是HTML的<script>元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

REST Web Services简介

HTTP协议是Web的标准之一，HTTP协议包含一些标准的操作方法，例如：GET, POST, PUT, Delete等，用这些方法能够实现对Web资源的CURD操作，下表列出了这些方法的操作定义。

HTTP方法 资源处理 说明
GET 读取资源（Read） 获取被请求URI（Request-URI）指定的信息（以实体的格式）。
POST 创建资源（Create） 在服务器上创建一个新的资源，并返回新资源的URI。
PUT 更新资源（Update） 指定URI资源存在则更新资源，指定URI资源不存在则创建一个新资源。
DELETE 删除资源（Delete） 删除请求URI指定的资源。

在REST应用中，默认通过HTTP协议，并且使用GET、POST、PUT和DELETE方法对资源进行操作，这样的设计风格和Web标准完全契合。

REST的最佳应用场景是公开服务，使用HTTP并遵循REST原则的Web服务，我们称之为RESTful Web Service。RESTful Web Service从以下三个方面进行资源定义：

  • 直观简短的资源地址：URI，比如：http://example.com/resources/
  • 传输的资源：Web Service接受与返回的互联网媒体类型，比如JSON，XML等
  • 对资源的操作：Web Service在该资源上所支持的一系列请求方法（比如：GET，POST，PUT或Delete）

下图展示了RESTful Web Service的执行流程

本文的服务端程序是基于ASP.NET Web API构建的。
在了解了这些基础知识后，我们就分别来构建服务端程序和客户端程序吧。

http://kb.cnblogs.com/page/139725/

方法一：在后端代码的头部加入这个代码（php示例）

header("Access-Control-Allow-Origin:*");
或者
header("Access-Control-Allow-Origin:url地址");

方式二：

Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>

ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心原理则是动态添加<script>标签来调用服务器提供的js脚本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" >

 <head>

     <title>Untitled Page</title>

      <script type="text/javascript" src=jquery.min.js"></script>

      <script type="text/javascript">

     jQuery(document).ready(function(){

        $.ajax({

             type: "get",

             async: false,

             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",

             dataType: "jsonp",

             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

             success: function(json){

                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');

             },

             error: function(){

                 alert('fail');

             }

         });

     });

　　　　

 var flightHandler = function(data){

        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');

</script>

</head>

<body>

</body>

</html>

jquery在处理jsonp类型的ajax时，自动帮你生成回调函数并把数据取出来供success属性方法来调用

JSONP - 跨域AJAX的更多相关文章

  1. 前端 - jsonp 跨域ajax

    jsonp 跨域ajax原理: 浏览器同源策略限制 如何解决同源策略限制: 方式一: 利用创建script块,在其中执行src属性为 远程url 异域 用函数(返回值) 的形式返回参数 方式二: jq ...

  2. 06: AJAX全套 & jsonp跨域AJAX

    目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...

  3. jsonp跨域ajax跨域get方法

    原理: 就是利用<script >标签没有跨域限制的,从而达到与第三方网站通讯的目的.当需要通讯时,本站脚本创建一个<script>标签,src地址指向第三方网站的的一个网址. ...

  4. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  5. 使用JSONP进行跨域Ajax 调用

    JSONP 是啥 JSONP 全称是JSON with Padding. 当需要进行跨域Ajax 调用的时候, 需要用到JSONP 协议. 客户端 $.ajax({ url: 'http://xxx' ...

  6. jQuery ajax的jsonp跨域请求

    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...

  7. 跨域Ajax -- jsonp和cors

    跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...

  8. jsonp 跨域只能调用一次ajax(无法多次调用或者循环调用)

    jsonp 跨域只能掉用一次ajax(无法多次调用或者循环调用) 百度搜索关键字:jsonp 只能调用一次ajax 解决方法 //回调函数设置,给后台执行        window[callback ...

  9. jquery ajax怎么使用jsonp跨域访问

    在项目中使用接口的比较多,在客户端跨域访问,jquery中只能使用jquery ajax的jsonp方法. 值得注意的是,jQuery.ajax()只支持get方式的跨域,post的方式是不支持的.& ...

随机推荐

  1. Delphi经验总结(3)

    ------------------------------------------------------- ◇删掉程序自己的exe文件 procedure TForm1.FormClose(Sen ...

  2. 六间房 繁星 酷我 来疯 秀吧 新浪秀 直播播放器 Live 1.2

    适合用于进行录制的时候 特别说明: 安装 falsh play 19 时 不能正常播放 每个按钮都有提示,不详细说明 下载地址 http://pan.baidu.com/s/1i32ETIt 下载地址 ...

  3. 【USACO】namenum

    //开始傻×了 受题目形容的误导 一心想生成所有可能的 字符串组合 之后查找非常慢 //听了同学的 将5000个dict里的字符串 转换成char型数组(不能直接用int 会越界)直接用输入的数据对着 ...

  4. Maximum sum（poj 2479）

    题意:给一段数列,将这个数列分成两部分,使两部分的最大子段和的和最大,输出和 /* 看数据没想到是(O)n的算法,求出从前向后的最大子段和和从后向前的最大子段和, 然后枚举断点. 第一次提交不小心折在 ...

  5. android 实现自定义卫星菜单

    看了hyman老师的视频,听起来有点迷糊,所以就想把实现卫星菜单的实现总结一下.长话短说,下面总结一下: 一.自定义ViewGroup1).自定义属性文件 属性的定义: <attr name=& ...

  6. Visual Studio 2012 使用免费的Team Foundation Service（转载）

    转载地址:http://www.cnblogs.com/chsword/archive/2012/12/14/visualstudio2012_tfs.html VS2012提供了在线的TFS服务,免 ...

  7. OpenStack Swift集群与Keystone的整合使用说明

    之前已经介绍了OpenStack Swift集群和Keystone的安装部署,最后来讲一讲Swift集群与Keystone的整合使用吧. 1. 简介 本文档描述了Keystone与Swift集群的整合 ...

  8. [译]ASP.NET 性能监控

    概述:在性能测试中性能监视器是非常强大的工具,本文主要简述了几个关键的计数器和相关的阈值. 监控性能计数器 很多的性能计数器在性能调优中是非常重要的,由于性能计数器太多,很多人不知道选择那些计数器. ...

  9. cocos2dx游戏开发——捕鱼达人mini版学习笔记（一）——FishAchor的搭建

    一.创建文件· FishAchor.h还有FishAchor.cpp. 主要就是创建每种鱼的类,方便以后的取用~,很多是重复性的操作,然后我们是mini版,暂时也就加入大概6钟鱼就好= =,然后我们现 ...

  10. 无法获得锁 /var/lib/dpkg/lock - open (11: 资源临时不可用)

    转自:http://www.cnblogs.com/ManMonth/archive/2010/01/14/1648010.html 问题: 运行程序更新时出现报错: 无法获得锁 /var/lib/d ...