Ajax 跨域请求

本文详细介绍了使用Ajax进行跨域请求的方法,包括JQuery.ajax的调用代码示例和服务端响应处理。阐述了如何通过设置jsonp参数实现跨域请求,以及在Chrome浏览器中通过设置header信息实现跨域。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

客户端JQuery.ajax的调用代码示例:

$.ajax({
    type : "get",
    async:false,
    url : "http://www.xxx.com/ajax.do",
    dataType : "jsonp",
    jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
    jsonpCallback:"success_jsonpCallback",//callback的function名称
    success : function(json){
        alert(json);
        alert(json[0].name);
    },
    error:function(){
        alert('fail');
    }
});

 

服务端返回数据的示例代码:

public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/plain";
    String callbackFunName = context.Request["callbackparam"];
    context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
}

 

 

 

var xhrurl = 'http://localhost:8001/Ajax/ticketNotify.ashx?cu=kefu1';
$.ajax({
        type : "get",
        async : false,
        url :xhrurl,
        cache : false,
        dataType : "jsonp",
        jsonp: "callbackparam",
        jsonpCallback:"jsonpCallback1",
        success : function(json){
            alert(json[0].name);
        },
        error:function(e){
            alert("error");
        }
    });

 

 

服务端代码:

             String callbackFunName = context.Request["callbackparam"];
             context.Response.Write(callbackFunName + "([ { \"name\":\"John\"}])");
 

PS:客户端的jsonp参数是用来通过url传参,传递jsonpCallback参数的参数名,比较拗口,通俗点讲:

jsonp: "callbackparam"
jsonpCallback:"jsonpCallback1"

这两个参数最终会拼接在请求的url后面,变成 http://www.xxx.com/ajax/xxx.ashx?callbackparam=jsonCallback1
服务端要获取这个参数值:"jsonCallback1" ,拼接在要输出的JSON数据最前面,不然就算请求成功你也只会看到警告:
Resource interpreted as Script but transferred with MIME type text/plain:

却看不到success定义的函数执行。



顺带一提:
在chrome浏览器里,还可以在服务端设置header信息
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
来达到跨域请求的目的,并且不需要设置ajax以下参数
dataType : "jsonp",
jsonp: "callbackparam",
jsonpCallback:"jsonpCallback1"

以正常ajax请求方式就可以获得数据。

 
 
posted on 2015-03-18 17:57  v.e.n.u.s 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/jx270/p/4347954.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值