基础概念

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

同源策略和跨域概念

同源策略（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. HDU1130 卡特兰数

    How Many Trees? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  2. C++多线程下的单例模式

    一.懒汉模式:即第一次调用该类实例的时候才产生一个新的该类实例,并在以后仅返回此实例. 需要用锁,来保证其线程安全性:原因:多个线程可能进入判断是否已经存在实例的if语句,从而non thread s ...

  3. vim 多窗口

    打开多个文件: 1.vim还没有启动的时候: 在终端里输入 vim file1 file2 ... filen便可以打开所有想要打开的文件 2.vim已经启动 输入 :open file 可以再打开一 ...

  4. Z.XML第二次迭代分数分配

    这是一篇简介的日志. 它关于二轮迭代Z-XML团队7名成员的分数分配. 每名成员的工作内容与之前的任务分工相同,即,大家都非常好的完成了计划的工作. 按照最初设定的分数分配原则,在今晚大家吃全家桶之前 ...

  5. 建模算法（十一）——目标规划

    求解多目标规划的思路 1.加权系数法 为每一个目标加一个权系数,把多目标模型转化成单一目标模型.但是困难时确定合理的权系数,以反映不同目标之间的重要程度. 2.优先等级法 将各目标按其重要程度分为不同 ...

  6. 误删除了mssql的表。 使用命令：drop table xxxx

    使用ApexSQL Recover工具进行恢复.教程如下: http://solutioncenter.apexsql.com/zh/%E6%B2%A1%E6%9C%89%E5%A4%87%E4%BB ...

  7. css 历史及css3 新特性

  8. CodeForces 300C 最短路

    A Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Status Pr ...

  9. JAVA项目JDK版本修改

    1.添加JDK    window-----> preferences 2.设置默认JDK版本 3.在项目上右键------>Properties

  10. ember.js:使用笔记7 页面中插入效果

    在某些情况下,我们需要根据数据生成某些效果:由于每个模版的controller可能不同,在不同页面之间跳转可能会无法随即更新的问题. controller: 直接使用标签:{{}},适用于在子项目内切 ...