基础概念

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

同源策略和跨域概念

同源策略（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. Servlet、JSP选择题

    Java EE软件工程师认证考试 试题库-选择题   一.    选择题(包括单选和双选) 1.A 对于B/S架构的工作流程,以下说法正确的是(   )(选择一项) A. 浏览器接受用户的输入--&g ...

  2. WebStorm快捷键操作

    1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文件. 2. ctrl + j: 输出模板 3. ctrl + b: 跳到变量申明处 4. ctrl + al ...

  3. 化工厂装箱员（洛谷 P2530）

    题目描述 118号工厂是世界唯一秘密提炼锎的化工厂,由于提炼锎的难度非常高,技术不是十分完善,所以工厂生产的锎成品可能会有3种不同的纯度,A:100%,B:1%,C:0.01%,为了出售方便,必须 ...

  4. 学习hadoop，搭建hadoop遇到一些特殊问题

    我执行下面步骤: 1.  动态增加DataNode节点和TaskTracker节点 以host9为例 在host9上执行: 指定主机名 vi  /etc/hostname 指定主机名到IP地址的映射 ...

  5. CentOS下配置Hadoop集群：java.net.NoRouteToHostException: No route to host问题的解决

    我用的是hadoop 1.2.1 遇到的问题是: hadoop中datanode无法启动,报Caused by: java.net.NoRouteToHostException: No route t ...

  6. 编译预处理命令--define和ifdef的使用

    这里将对常用的预处理命令进行学习. 一.宏定义  ·defined 格式:`defined     宏名      数值 或者 `define      宏名 注意:后面没有‘;‘,和单片机不一样: ...

  7. AndroidDev站点推荐-zz

    Android-Dev-Bookmarks 项目目前可以生成书签文件导入到浏览器中了,ADB 站点上的内容也是一样的,方便在线浏览.现在内容更新开始按期发布同时也会有个简短的介绍,内容逐渐增多比较难直 ...

  8. 如何解决adb devices 端口被占用的问题zz

    在win xp ,win 7 上使用adb时, 越来越多的人出现了 adb devices 命令长时间无响应.adb start-server 失败.eclipse adt初始化时卡在dbms-ini ...

  9. 14、Silverlight 滤镜到 UWP 滤镜的移植（二）

    上一篇文章 大致介绍了,移植戴震军大哥的 Windows Phone7 中,对于高斯模糊滤镜的移植,主要是 int[] 数组和 byte[] 数组的互相转换.同样的思路,只要把前文的方法封装一下,就能 ...

  10. java错题本

    1.判断题: Java程序一般应当含有main方法,因为它是所有JaVa程序执行的入口(错) 解析:applet(java小程序)不用,application(java应用程序)需要.(见java a ...