JSONP - 跨域AJAX

时间 2019-11-10

标签 jsonp ajax 栏目 JSON 繁體版

原文原文链接

基础概念

在进入本文正题以前，咱们须要先了解一些基础概念（若是你已经对这些基础有所了解，可跳过此段落）。javascript

同源策略和跨域概念

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

同源以外的请求均可以称之为跨域请求。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例：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	失败	主机名不一样

咱们能够简单粗暴地理解为同一站点下的资源相互访问都是同源的，跨站点的资源访问都是跨域的。java

跨域资源共享

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

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

JSONP概念

因为同源策略，通常来讲不容许JavaScript跨域访问其余服务器的页面对象，可是HTML的<script>元素是一个例外。利用 <script> 元素的这个开放策略，网页能够获得从其余来源动态产生的 JSON资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并非 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。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属性方法来调用