在本地页面使用$.ajax进行跨域访问webservice接口问题

JAVA学习笔记 同时被 3 个专栏收录
133 篇文章 0 订阅
27 篇文章 0 订阅

在本地页面使用$.ajax进行跨域访问webservice接口:

第一例:

$.ajax({

type: 'GET',

url: 'http://www.pm25.in/api/querys/aqi_details.json?city=wenzhou&token=', 

dataType: 'jsonp',

success: function(msg){

alert(JSON.stringify(msg));

},

error:function(){

alert('error');

}

});

成功输出响应数据;

第二例:

$.ajax({

type: 'GET',

url: "http://www.webxml.com.cn/WebServices/WeatherWebService.asmx/getWeatherbyCityName?theCityName=温州", 

dataType: 'jsonp',

success: function(msg){

alert('success');

},

error:function(XMLHttpRequest, textStatus, errorThrown){

alert('error');

}

});

输出error。但在谷歌浏览器的调试界面上可以看到如下界面,

 

 

证明响应中已经包含需要的数据。问题分析:dataType: 'jsonp',返回的数据类型为xml,这可能是造成失败的原因。但为什么响应中会有需要的数据?这些数据怎么取出来呢?

 

问题补充:

error的回调函数中,textStatus为parsererror,errorThrown示意回调函数没有执行,可以确定为解析异常。是不是jsonp不可以处理xml数据呢?

既然response中有需要的数据,那么总该有办法把他们提取出来吧?到底该怎么取呢?

    <script language="javascript" type="text/javascript">

        function jsonpCallback(result) {//这里是回调方法

            alert(result.msg);

            $("ws1").remove();//注意回调后如果有可能请执行删除操作

        }

        $(function () {

            $.fn.getWS({ id: 'ws1', url: 'http://host:prot/ser.asmx/method', Callback: "jsonpCallback" });

        });

    </script>

//服务器端需要执行的操作示例:

//[WebMethod]

public string method1()

{

    string str = "{\"msg\":\"这里是主要内容\"}";

   if (HttpContext.Current.Request["jsonp"] != null)//这里是执行是否需要返回JSONP字符串的唯一标识

    {

        HttpRequest Request = HttpContext.Current.Request;

        HttpResponse Response = HttpContext.Current.Response;

        string callback = Request["jsonp"];

        Response.Write(callback + "(" + str + ")");

        Response.End();//结束后续的操作,直接返回所需要的字符串

    }

    return str;

}
(function ($) {

    //向目标DOM设置值,常规表单标签则直接设置Value,Item标签设置val属性

    $.fn.getWS = function (options) {

        var defaults = {

            id: "",

            url: "",

            Callback: ""

        }

        var options = $.extend(defaults, options);

        var oHead = document.getElementsByTagName('HEAD').item(0);

        var oScript = document.createElement("script");

        oScript.type = "text/javascript";

        oScript.setAttribute("id", options.id);

        oScript.src = options.url + "?jsonp=" + options.Callback;

        oHead.appendChild(oScript);

    }

})(jQuery);

 

 

一个简单的调用方法,Jquery原始方法:       

     $.ajax({

                type: "get",

                url: "http://localhost:17180/Service1.asmx/method1",

                dataType: "jsonp",

                jsonp: "jsonp", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)

                jsonpCallback: "jsonpCallback", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

                contentType: "application/json; charset=utf-8",

                success: function (json) {

                    alert(json.msg);

                },

                error: function () {

                    debugger;

                    alert('fail');

                }

            });

 

 

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值