AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换，实现网页的局部刷新。但是出于安全的考虑，ajax不允许跨域通信。如果尝试从不同的域请求数据，就会出现错误。如果能控制数据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？

一、关于ajax跨域的思考

　　1、Ajax为什么不能跨域？到底是卡在哪个环节了？(下面项目中具体说，这里先说下结论)。 Ajax其实就是向服务器发送一个GET或POST请求，然后取得服务器响应结果，返回客户端。理论上这是没有任何问题的，然而普通ajax跨域请求，在服务器端不会有任何问题，只是服务端响应数据返回给浏览器的时候，浏览器根据响应头的Access-Control-Allow-Origin字段的值来判断是否有权限获取数据，一般情况下，服务器端如果没有在这个字段做特殊处理的话，跨域是没有权限访问的，所以响应数据被浏览器给拦截了，所以在ajax回调函数里是获取不到数据的(来自园友补充)。所以现在ajax跨域的问题可以转化为数据怎么拿回客户端的问题。

　　2、既然不能直接访问第三方站点，我们可以在服务器上面做代理，通过ajax向代理发送请求，代理获得数据后在返回给客户端，当然这是一种解决办法，但是一次请求要从客户端经过代理到第三方站点，然后再原路返回，响应速度是个问题。

　　3、我们发现我们可以将一些js、css等文件放在第三方的服务器上面，如CDN等来加快网页的打开速度，这样是没有任何问题的，也就是说web页面可以加载放在任意站点的js、css、图片等资源，不会受到"跨域"的影响。这个时候，我们会想到：既然我们可以调用第三方站点的js,那么如果我们将数据放到第三方站点的js中不就可以将数据带到客户端了吗？

下面我们来做一个实验，来验证一下我们的猜想成不成立：

　　打开Visual Studio，新建一个Web项目，这里用WebForm，然后我们在项目中添加一个名为remoteJs的js文件，写入如下代码：

function GetRemoteData() {

    return "remote data";

}

很简单，就一个方法，返回一个字符串，下面我们来写一个客户端调用，既然是跨域，那就写个html静态页面来测试吧，新建local.html，输入以下代码：

<!DOCTYPE html>

<html>

<head>

    <title>本地站点</title>

    <meta charset="UTF-8">

    <script type="text/javascript" src="http://localhost:4071/remoteJs.js"></script>

</head>

<script type="text/javascript">

    var data = GetRemoteData();

    alert(data);

</script>

<body>

</body>

</html>

让我们的Web项目跑起来，然后打开local.html，可以看到弹出一个窗口，显示信息remote data。这里证明我们的想法是正确的。接下来的问题是，我们如何根据需要发送请求和获取请求的结果呢？下面我们来认识一下JSONP。

二、JSONP

 1、什么是JSONP

　　JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。其核心思想是利用JS标签里面的跨域特性进行跨域数据访问，在JS标签里面存在的是一个跨域的URL，实际执行的时候通过这个URL获得一段字符串，这段返回的字符串必须是一个合法的JS调用，通过EVAL这个字符串来完成对获得的数据的处理。

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

2、JSONP的实现

　　下面我们通过一个例子来说明一下JSONP是如何实现ajax跨域请求的。这里我们模拟图书馆图书的查询，在刚刚我们建立的web项目里面添加一个名为SearchBook的一般处理程序，写入如下代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace BookLibrary

{

    public class SearchBook : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            string callback = context.Request["callback"];

            context.Response.Write(callback + "({'BookName':'English','Pages':562})");

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

暂时先不解释，我们写完客户端看到效果后在详细说明，然后修改刚刚的local.html，代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>跨域请求</title>

    <meta charset="UTF-8">

</head>

<body>

<input type="button" value="发送请求" onclick="GetAjaxData();" />

</body>

<script type="text/javascript">

    var GetData = function (data) {

      alert(data.BookName + " " + data.Pages);

   };

    function GetAjaxData(){

        var url = "http://localhost:4071/SearchBook.ashx?callback=GetData";

        var script = document.createElement('script');

        script.setAttribute('src', url);

        document.getElementsByTagName('head')[0].appendChild(script);

    }

</script>

</html>

　　

这个html页面有一个按钮，绑定方法GetAjaxData，当我们单击发送请求时，就会向Web站点发送请求，获取查询的数据，我们让Web站点跑起来，然后打开local.html，单击按钮，看到弹出如下信息：

我们成功的取得了web站点的数据，实现了跨域请求。下面我们来说一下他的实现原理：

var url = "http://localhost:4071/SearchBook.ashx?callback=GetData";

这一行代码我们定义了请求的url,问号前面的是web站点一般处理程序SearchBook的地址，问号后面我们传入了一个参数callback，值为GetData，也就是我们上面定义的方法名，及回调函数名称。当然我们可以传入更多的参数。

var script = document.createElement('script');

        script.setAttribute('src', url);

        document.getElementsByTagName('head')[0].appendChild(script);

这三行代码就是添加script节点，url指向第三方站点

3、普通Ajax请求在哪个环节出错了

下面，我们用JQuery的ajax来说明一下ajax请求到底是卡在哪个环节了，修改GetAjaxData方法如下：

           $.ajax({

                type: "get",

                async: false,

                url: "http://localhost:4071/SearchBook.ashx",

                dataType: "text",

                success: function (data) {

                    alert(data.BookName + " " + data.Pages);

                },

                error: function () {

                    alert('fail');

                }

            });

在SearchBook里面context.Response.Write(callback + "({'BookName':'English','Pages':562})");这行下断点，然后运行，会发现可以走到断点，然后就出错了。

4、用JQuery实现ajax跨域

其实JQuery里面也封装了跨域的ajax方法，我们来看一下上面的方法用JQuery怎么写：

<script type="text/javascript">

    function GetAjaxData() {

        $.ajax({

            type: "get",

            async: false,

            url: "http://localhost:4071/SearchBook.ashx",

            dataType: "jsonp",

            jsonp: "callback",//传递给请求处理程序或页面的，标识jsonp回调函数名(一般为:callback)

            jsonpCallback: "GetData",//callback的function名称

            success: function (data) {

                alert(data.BookName + " " + data.Pages);

            },

            error: function () {

                alert('fail');

            }

        });

    }

</script>

下面我们来看一下，我们自己写的js执行后的DOM结构：

三、总结

　  1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

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

　　3、其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

　　4、jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。

　　5、jsonp整个过程中，本地站点一直处于主动的地位，主动的发送请求，主动的加载远程js.而第三方站点则处于被动的响应。

其他跨域请求相关博文

http://www.cnblogs.com/zuqing/p/5470238.html

http://www.cnblogs.com/shy1766IT/p/7077104.html

JQuery实现ajax跨域的更多相关文章

  1. JQuery的Ajax跨域请求的

    JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的 ...

  2. PHP+JQuery实现ajax跨域

    jQuery实现ajax跨域 1.dataType:'jsonp'2.type: 'get'3.把要传的参数以url方式传出去  url:'http://gameapi.feiliu.com/lqzg ...

  3. jQuery使用ajax跨域请求获取数据

    jQuery使用ajax跨域请求获取数据  跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...

  4. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  5. [转载]JQuery的Ajax跨域请求的解决方案

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...

  6. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  7. jQuery的ajax跨域 Jsonp原理

    1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...

  8. JQuery的Ajax跨域请求的解决方式

            今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...

  9. jQuery的ajax跨域实现

    今天有人问我跨域ajax请求是否可以发送,之前没接触过此类问题,没答上,后来查了下,以下备忘. 我在本地建了三个站点,并设置了host文件模拟跨子域和跨全域 coolkissbh.com blog.c ...

随机推荐

  1. 15、Flask实战第15天：Flask-WTF

    WTForms表单验证基本使用 Flask-WTF是简化了WTForms操作的一个第三方库.WTForm表单的两个主要功能是验证用户提交数据的合法性以及渲染模板.当然还包括一些其他的功能:CSRF保护 ...

  2. (转)python之并行任务的技巧

    Python的并发处理能力臭名昭著.先撇开线程以及GIL方面的问题不说,我觉得多线程问题的根源不在技术上而在于理念.大部分关于Pyhon线程和多进程的资料虽然都很不错,但却过于细节.这些资料讲的都是虎 ...

  3. Plus One Linked List -- LeetCode

    Given a non-negative number represented as a singly linked list of digits, plus one to the number. T ...

  4. 【贪心】【堆】bzoj1029 [JSOI2007]建筑抢修

    按完成时限排序,一个个修复.若当前建筑花费时间+之前花费的总时间不超过时限,则ans++:否则,从之前已修复的建筑中挑一个耗时最多的,与当前建筑比较,若当前建筑更优,则更新ans. #include& ...

  5. 【计算几何】bzoj2338 [HNOI2011]数矩形

    对于两条线段,若其中点重合,且长度相等,那么它们一定是某个矩形的对角线. N*N地处理出所有线段,排序,对每一部分中点重合.长度相等的线段进行暴力枚举,更新答案. 用 long double 注意EP ...

  6. spring boot 2.x静态资源会被HandlerInterceptor拦截的原因和解决方法

    在spring boot 1.5.x中,resources/static目录下的静态资源可以直接访问,并且访问路径上不用带static,比如静态资源放置位置如下图所示: 那么访问静态资源的路径可以是: ...

  7. css中width和height默认值

    width和height默认都是auto自动伸缩的,但不同的标签效果却不一样比如div默认是width:100%,通常不用写100%如果是table,如果div内的table没有设定100%,那就是最 ...

  8. PythonGUI编程--向列表框添加滚动条

    代码如下: from tkinter import * window = Tk() window.title("New England") yscroll = Scrollbar( ...

  9. easyui combobox 的取值问题

    easy-combobox 取值问题 例子:<select id="cc" class="easyui-combobox" name="cc&q ...

  10. IIS5/6/7 ASP.net 请求处理过程

    tks:http://www.cnblogs.com/TomXu/p/3756774.html 主要内容 本文讲解的是:服务器接受Http Request请求之后,是如何进入.Net CLR,从而进一 ...