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提交，感觉还不错~