今天在做取消申请的时候遇到了一个跨域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提交,感觉还不错~