Ajax如何跨域访问数据

最近在做项目的过程中遇到的问题,一个网站需要访问另外一个网站的数据,并且是通过脚本的方式,而由于同源策略的限制,开发人员不能再与外部服务器进行通信的时候使用XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法,即通过使用JSON与<script>标记相结合的方法,从服务器端直接返回可执行的JavaScript函数或者JavaScript对象。目前JSONP已成为大部分公司的Web应用程序跨域首选,尽管JSONP是一个非官方的协议,关于JSONP的介绍,网上一大把;现在开始介绍如何跨域访问数据。

  开发环境:Visual Studio 2008 + jQuery

  前端代码(调用方):

  var baseUrl = "http://localhost:59334/";

  $.ajax({
            url: baseUrl + "Account/ValidateCode?validateCode=" + code + "&jsoncallback=?",
            type: 'GET',
            dataType: 'JSON',
            success: function(data) {
              console.log(data.Content);
            },
            error: function() {
                  console.log(arguments);
            }
      });

  后台代码(被调用方,C#):

  public String ValidateCode(String validateCode)
        {
            String callback = Request["jsoncallback"];
            String result = "";
            if (Session["CaptchaCode"] != null)
            {
                if (Session["CaptchaCode"].ToString().ToLower() != validateCode.ToLower())
                {
                    result = "0";
                    if (!String.IsNullOrEmpty(callback))
                    {
                        result = callback + "({Success:'True',Content:'0'})";
                    }
                }
                else
                {
                    tick = 0;
                    emailValiCodeExpired = false;
                    result = "1";
                    if (!String.IsNullOrEmpty(callback))
                    {
                        result = callback + "({Success:'True',Content:'1'})";
                    }
                }
            }
            if (String.IsNullOrEmpty(result))
            {
                if (!String.IsNullOrEmpty(callback))
                {
                    result = callback + "({Success:'True',Content:'0'})";
                }
                else
                {
                    result = "0";
                }
            }
            return result;
        }

  调用方和被调用方是两个Web应用程序;

  关于"jsoncallback=?",在发送ajax请求时,jQuery自动把jsoncallback后面的 "?" 替换为正确的函数名(回调函数)

  (一般长这个样:"jQuery1830798391871119546_1449898179923"),以执行回调函数,所以在C#返回的字符串应该这样写:

  String result = callback + "({Success:'True',Content:'1'})";

  其实返回的是形如下方的一段jQuery脚本:

  "jQuery1830798391871119546_1449898179923({Success:'True',Content:'1'})"

  注意红色字部分,这是一段json格式的数据,因为,发送ajax请求时要求返回的数据格式是JSON

  切不可将result写成这样:return Json(result, JsonRequestBehavior.AllowGet);写成这样的话,回调函数就被序列化了,最终也没法执行;

  常见的错误: 1 jQuery1830798391871119546_1449898179923 was not called

         2 parsererror

         3 已阻止跨源请求:同源策略禁止读取位于 http://localhost:59334/Account/ValidateCode?validateCode=rucr 的远程资源。(原因:CORS 头缺少             'Access-Control-Allow-Origin')。

  第一个错误可能是由于发送ajax请求时未加入"jsoncallback=?"这一句

  如果dataType写的是"JSONP",那么请求的url里面可以不带"jsoncallback=?",服务器端需要用Request["callback"]来获取回调函数,也就是形如下方代码:

  前端代码:

  $.ajax({
            url: baseUrl + "Account/ValidateCode?validateCode=" + code,
            type: 'GET',
            dataType: 'JSONP',
            success: function(data) {
              console.log(data.Content);
            },
            error: function() {
                  console.log(arguments);
            }
      });

  后台代码(简写):

  String callback = Request["callback"];
      String result = callback + "({Success:'True',Content:'1'})";
      return result;

  一般错误2会和错误1一起出现,可能是返回的结果中{Success:'True',Content:'1'}这部分代有误,造成回调函数没法解析JSON数据;

  至于错误3则是跨域失败,在发送ajax请求时就有问题,可能是请求的url没加"jsoncallback=?"也可能是dataType没指定为"JSONP"格式,注意:

  在URL里面加jsoncallback=?和dataType指定为"JSONP",二选一即可;如果dataType是"JSONP",那么发送请求时,jQuery会自动在url里面加上             callback=jQuery1830798391871119546_1449898179923这句,上面有说明,不再赘述;

  OK说明完毕!

  

  

  

Ajax跨域访问的更多相关文章

  1. 浅析JSONP-解决Ajax跨域访问问题

    浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...

  2. ajax跨域访问的解决方案

    今天的工作中要访问摄像机内部的一个web站点,这就涉及到jquery的ajax跨域访问的问题.我使用的是jquery1.7的版本,下面总结如下: 问题一:一开始用IE调试,总是返回No Transpo ...

  3. Ajax跨域访问解决办法

    方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...

  4. Web Api 2(Cors)Ajax跨域访问

    支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示   随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...

  5. ajax 跨域访问的解决方案

    ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...

  6. Hbuilder编辑App时,ajax跨域访问失败问题

    今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错, 显示这样的错误 XMLHttpRequest cannot loadhttp://w ...

  7. 关于JQuery Ajax 跨域 访问.net WebService

    关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...

  8. JS Ajax跨域访问

    js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...

  9. ajax跨域访问http服务--jsonp

    在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...

  10. Ajax跨域访问wcf服务中所遇到的问题总结。

    工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...

随机推荐

  1. java的覆盖重写隐藏和C#中的不同

    先看下C#中的: C#中覆盖 隐藏 重写这三种有不同的意义,而Java中不同. 1. java中没有new ,使用new会报错,编译不通过. 2. java中重写和覆盖应该是一个意思 static c ...

  2. 各种报错各种坑 webpack让我在学习的过程中一度想要放弃

    由于拓展部分不是必须的,只是可以增强用户体验,但是有些时候页面给分页预留的位置不够,这个时候我们就可以通过设置来除去这一部分 子分区由两种创建方法,一种是不定义每个子分区子分区的名字和路径由分区决定, ...

  3. MySQL5.7.11安装

    1.官网下载mysql-5.7.11-winx64.zip 2.将压缩包解压至D:\Program Files,配置环境变量

  4. js 事件冒泡

    一. 什么是事件的冒泡:      在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个程序,如果没有定义此事件处理程序或者事件返回true ...

  5. 简述 C、C++程序编译的内存分配情况【转】

    面试题 9:简述 C.C++程序编译的内存分配情况  C.C++中内存分配方式可以分为三种:  (1)从静态存储区域分配:  内存在程序编译时就已经分配好,这块内存在程序的整个运行期间都存在.速度快. ...

  6. Python之路,day3-Python基础

    三级菜单 menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, '汽车之家':{}, ...

  7. Oracle学习笔记(二)

    2.Oracle用户管理 (1)创建用户:create user 用户名 identified by 密码(需要dba权限); sql>create user yzw identified by ...

  8. fastdfs-nginx扩展模块源码分析

    FastDFS-Nginx扩展模块源码分析 1. 背景 在大多数业务场景中,往往需要为FastDFS存储的文件提供http下载服务,而尽管FastDFS在其storage及tracker都内置了htt ...

  9. mysqlbinlog 导出日志

    1.找到日志所在的位置 ls 正好我需要的日志在000011这个二进制文件里,所以直接执行下面的语句: mysqlbinlog --no-defaults --start-datetime=" ...

  10. AT Tool --- android手机发送at指令

    之前网上也有一款类似的软件,估计是华为内部人员开发的,不过很变态,不但只支持华为的几款手机,而且只能发一条AT命令,然后就不让你发了:所以很气愤,今天花了一天时间自己写了这么款程序,而且是支持所有An ...