Ajax跨域请求数据实例

前端之家收集整理的这篇文章主要介绍了Ajax跨域请求数据实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

原文链接:https://www.f2er.com/ajax/165612.html

猜你在找的Ajax相关文章