ajax请求js跨域,Ajax跨域请求数据实例（JSOPN方式）

今天在做取消申请的时候遇到了一个跨域ajax提交的问题。

情景是：

系统A是asp.net的站点，其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面，然后返回提交成功或失败)

系统B为调用系统，php的站点，需要在页面中通过js调用这个取消接口。

由于A，B分别在不同的域名下，因此ajax调用的时候遇到了跨域的情况。

参考了：http://www.cnblogs.com/twobin/p/3395086.html

于是采用JSONP的方式进行了尝试。

首先，在接口页面中，通过get的参数进行处理逻辑，成功和失败后，均返回了一个jsonp的函数调用。

if (Request.QueryString["type"] != null)

{

if (Request.QueryString["type"].ToString() == "cancel")

{

string usercode = Request.QueryString["usercode"].ToString();

int userid = int.Parse(Request.QueryString["userid"].ToString());

int recordId = int.Parse(Request.QueryString["recordId"].ToString());

FLogic.Security.IIdentity id = new CDC.PowerESS.BLL.Workflow.Common.Model.IdentityImpl(userid, usercode, Guid.NewGuid());

var service = new CDC.PowerESS.FlexProvider.MonitorService();

try

{

service.SuspendProcess(id, recordId);

Response.Write("jsonp({\"IsSuccess\":true});");

}

catch (Exception ex)

{

Response.Write("jsonp({\"IsSuccess\":false});");

}

}

}

在调用方的js中，进行了如下的调用。

//取消申请

function cancelApply(recordId){

if (!confirm('确定取消申请？')) {

return false;

}

$("#ItemContainer").empty();

$("#loadingDiv").show();

//跨域调用取消接口

if (oScript) {

document.body.removeChild(oScript);

}

oScript = document.createElement('script');

oScript.src = gCancelApplyURL + '?type=cancel&usercode=' + gUserCode.Trim() + '&userid=' + gUserId.Trim() + '&recordId=' + recordId;

document.body.appendChild(oScript);

}

这段代码的主要功能是：

在页面中动态创建了一个script标签，动态分配src属性来完成数据的提交(get请求)。

同时，为了防止页面中不出现过多的script标签，动态创建的script标签对象保存在了全局变量 oScript中，每次create的时候检查一下全局对象有没有值，如果有，就先remove掉。

最后，由于这个get请求返回的是一个js 的方法调用，因此，在js里还要建立对应的处理方法：

//取消回调

function jsonp(json){

if (json['IsSuccess'] === true) {

alert('取消申请成功！');

}

else {

alert('取消申请失败！');

}

$("#loadingDiv").hide();

initPage();

}

这样，就可以对跨域请求到的结果进行处理了(json的方式)。

第一次亲自使用跨域ajax提交，感觉还不错~

ajax跨域请求数据

最近开始接触ajax的跨域请求问题,相比网上说的一大堆,我这里就说得比较浅显了. 关于为什么要跨域这个问题,实际的需求是当网站项目部署在一个域名上的时候,分域可以很好地解决网站卡顿问题(拥有多台服务器 ...

关于试用jquery的jsonp实现ajax跨域请求数据的问题

我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

【前端_js】解决ajax跨域请求数据

1.ajax发送请求必须遵循同源策略,即请求方和相应方的协议头.域名.端口全部一样.只要三者有一个不一样都视为跨域,浏览器出于安全考虑不允许跨域访问. 解决ajax跨域访问的常用方法: a.使用jso ...

jsonp跨域请求数据实例——手机号码查询

前言 网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 知识准备 上篇博客 ...

ajax跨域请求--jsonp实例

ajax请求代码: //区域事件选择配送点 function changeDistrict(value){ if(value == 0){ $('#transport_node').empty(); ...

AJAX 跨域请求 - JSONP获取JSON数据

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

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

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

AJAX 跨域请求的解决办法：使用 JSONP获取JSON数据

由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...

【转】AJAX 跨域请求 - JSONP获取JSON数据

来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...

随机推荐

程序员眼中的 SQL Server－非聚集索引能给我们带来什么？

写在前面 最近在做的一个项目,页面访问的时候很慢(大概几秒钟的样子),然后用日志记录的方式,来排查这个问题,最后发现是 Entity Framework 初始化的一个坑(大概要花 6-7 秒),详见: ...

跨平台日志清理工具 Log-Cutter v2.0.1 RC-1 发布

Log-Cutter 是JessMA开源组织开发的一个简单实用的日志切割清理工具.对于服务器的日常维护来说,日志清理是非常重要的事情,如果残留日志过多则严重浪费磁盘空间同时影响服务的性能.如果用手工方 ...

OpenStack 新加计算节点后修改

Contents [hide] 1 前提 2 iptables禁止snat= 3 vlan支持 4 Quota支持 5 修改物理资源设置. 6 添加collectd 7 重启服务 前提 我们使用fue ...

nodejs包管理

包管理 :npm cnpm yarn Node Package Manager node的包管理工具 cls清除控制台 npm install jquery 下载依赖包 就自动下载最新版本的jq np ...

java递归删除指定目录下的文件和文件夹

public static boolean deleteFolder(String delDir) { File delFolder = new File(delDir); File[] delFil ...

java与.net比较学习系列(7) 属性

文章摘自:http://www.cnblogs.com/mcgrady/p/3411405.html 说起属性,实际上java中没有属性这个概念,只有字段和方法,但是可以通过私有字段和声明get,se ...

四、Hbase

一.什么情况下使用Hbase 例子: 这里Order By无时不刻的处理,我们要看到刚才的足迹,不能使用缓存技巧. 根据时间戳来查询,显然很快,应为Hbase就是以时间戳来存的. 将最近的数据放在内存 ...

JAVA设计模式——开篇

设计模式很重要,重要性我就不再复述了.最主要的是,通常我们在写一定量代码后,常用的方法什么的都熟悉后,想再提高代码能力,我找到的最好的方法还是去学习,理解设计模式.不理解设计模式,看一些开源框架和ja ...

洗礼灵魂，修炼python(72)--爬虫篇—爬虫框架：Scrapy

题外话: 前面学了那么多,相信你已经对python很了解了,对爬虫也很有见解了,然后本来的计划是这样的:(请忽略编号和日期,这个是不定数,我在更博会随时改的) 上面截图的是我的草稿 然后当我开始写博文 ...

Ikki's Story IV - Panda's Trick POJ - 3207(水2 - sat 在圈内 还是 在圈外)

题意: 就是一个圈上有n个点,给出m对个点,这m对个点,每一对都有一条边,合理安排这些边在圈内或圈外,能否不相交 解析: 我手残 我手残 我手残 写一下情况 只能是一个在圈外 一个在圈内 即一个1一个 ...