Ajax 跨域请求

Posted 安静的女汉纸

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax 跨域请求相关的知识,希望对你有一定的参考价值。

转自:http://www.cnblogs.com/mahatmasmile/archive/2013/03/29/2989505.html   作者大圣的笑

 

客户端js:

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");
        }
    });

 服务端代码:

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

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

jsonp: "callbackparam"    //跨域请求的参数名,默认是callback
jsonpCallback:"jsonpCallback1"     //自定义跨域参数值,回调函数名也是一样,默认为jQuery自动生成的字符串


这两个参数最终会拼接在请求的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请求方式就可以获得数据。

 

 

自定义回调函数:

function TestAjax()
 {
    $.ajax({
        type : "get",
        async : false,
        url : "ajaxHandler.ashx", //实际上访问时产生的地址为: ajax.ashx?callbackfun=jsonpCallback&id=10
        data : {id : 10},
        cache : false, //默认值true
        dataType : "jsonp",
        jsonp: "callbackfun",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonpCallback:"jsonpCallback",
            //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
            //如果这里自定了jsonp的回调函数,则success函数则不起作用;否则success将起作用
        success : function(json){
            alert(json.message);
        },
        error:function(){
            alert("erroe");
        }
    });
}

function jsonpCallback(data) //回调函数
{
    alert(data.message); //
}
 

public class ajaxHandler : IHttpHandler
{
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string callbackfun = context.Request["callbackfun"];
        context.Response.Write(callbackfun + "({name:\\"John\\", message:\\"hello John\\"})");
        context.Response.End();
    }
    public bool IsReusable {get {return false;}
}

 

以上是关于Ajax 跨域请求的主要内容,如果未能解决你的问题,请参考以下文章

前端Jquery-Ajax跨域请求,并携带cookie

简单ajax跨域请求

ajax跨域请求

JQuery - Ajax和Tomcat跨域请求问题解决方法!

跨域 jquery ajax 请求

PHP中运用jQuery的Ajax跨域调用实现代码