jQuery Ajax 跨域下调用webservice返回jsonp格式数据实例

最新推荐文章于 2020-01-07 14:24:33 发布
最新推荐文章于 2020-01-07 14:24:33 发布
阅读量3.5k 收藏
点赞数
文章标签： jquery ajax jsonp webservice
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scailin/article/details/43705067
版权

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

URL

说明

是否允许通信

http://www.a.com/a.js
http://www.a.com/b.js

同一域名下

允许

http://www.a.com/lab/a.js
http://www.a.com/script/b.js

同一域名下不同文件夹

允许

http://www.a.com:8000/a.js
http://www.a.com/b.js

同一域名，不同端口

不允许

http://www.a.com/a.js
https://www.a.com/b.js

同一域名，不同协议

不允许

http://www.a.com/a.js
http://70.32.92.74/b.js

域名和域名对应ip

不允许

http://www.a.com/a.js
http://script.a.com/b.js

主域相同，子域不同

不允许

http://www.a.com/a.js
http://a.com/b.js

同一域名，不同二级域名（同上）

不允许（cookie这种情况下也不允许访问）

http://www.cnblogs.com/a.js
http://www.a.com/b.js

不同域名

不允许

特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol+window.location.host，也可以理解为“Domains, protocols and portsmust match”。

 以上借鉴http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html的内容。

Javascript用soap方式 访问webservice并且调用webservice的函数，再得到返回的结果是可以的，这种方式应该主要是解析xml，这个方式我试了一下，一是麻烦，二是在IEok的情况下，谷歌浏览器却不可以，其中问题我还不清楚。

jQuery ajax访问webservice在跨域下请求返回json，xml，html，scaipt，text的格式数据会报错。

Error :XMLHttpRequest cannot load “XXX” Origin null is notallowed by Access-Control-Allow-Origin.

jQuery ajax访问webservice在不跨域下请求返回json，xml，html，scaipt，text的格式数据是可以的。

jquery ajax跨域下请求jsonp格式是ok的。

下面是一个跨域实例：

Webservice端：

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using Newtonsoft.Json;

using System.Data;

using System.Web.Script.Services;//这个好像也不需要

using System.Runtime.Serialization;

 

namespace WebService2

{

    ///<summary>

    /// Summary description for Service1

    ///</summary>

    [WebService(Namespace= "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo= WsiProfiles.BasicProfile1_1)]

    [System.ComponentModel.ToolboxItem(false)]

    //[System.Web.Script.Services.ScriptService]

    public class Service1 : System.Web.Services.WebService

    {

        publicService1()

        {

        }

 

 

        [WebMethod]

        //[ScriptMethod(ResponseFormat= ResponseFormat.Json)]

        public void getJson()

        {

            //这是jsonp数据格式，跨域情况下只能用jsonp格式，其他方法解决跨域问题不了解。

            Context.Response.Write("getJson({'id':'0','name':'','message':'0','ipoint':'0','gpoint':'0'})");

            Context.Response.End();

        }

 

        [WebMethod]

        //[ScriptMethod(UseHttpGet= true)]

        public string getText()

        {

            //下面是json的格式，jquery ajax在不跨域的情况下可以指定返回格式，可以是xml，json，html，script，text

            return"{'user':{'id':'0','name':'','message':'0','ipoint':'0','gpoint':'0'}}";

        }

       

    }

}

JS端：

<!DOCTYPE html>

<html>

<head>

<scriptsrc="js/jquery-1.11.2.min.js"></script>

<scripttype="text/javascript">

 

$.noConflict();

jQuery(document).ready(function(){

 jQuery("#p1").click(function(){

       jQuery(this).hide();

  });

 

 jQuery("#p2").click(function () {

       var url= "http://localhost:14023/Service1.asmx/getJson";

         jQuery.ajax(url,{

                   type:"GET",   //你选择get或者post最后都是get，跨域情况下都是get

       contentType: "application/json", //不确定什么用

       data: "{}",         //这里是要传递的参数，格式为data: "{paraName:paraValue}",     

       dataType: "jsonp",

                   jsonp:'callback',                          //服务器端获取回调函数名的key，对应后台有$_GET['callback']='getName';callback是默认值

       jsonpCallback:'getJson',                   //回调函数名

                   //beforeSend:function(x) { x.setRequestHeader("Content-Type","application/json; charset=utf-8"); },

                   success:function (result) {     //回调函数，result，返回值

                            jQuery("#p2").html(result.id+result.name+result.message+"");

                   },

                   error:function(err){alert(err.textStatus);}

         });

         });

        

});

</script>

</head>

 

<body>

<!--<p id="p1">If you click onme, I will disappear.</p>-->

<pid="p2">getJson</p>

<!--<pid="p3">getText</p>-->

</body>

</html>

scailin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery ajax jsonp跨域调用实例代码
12-04
jQuery AJAX JSONP 跨域调用是Web开发中解决同源策略限制的一种方法，它允许JavaScript从不同域名的服务器上获取数据。同源策略是浏览器实施的安全策略，阻止了一个源的文档或脚本访问另一个源的属性。JSONP（JSON ...
jQuery使用ajax跨域获取数据的简单实例
11-23
在本例中，我们关注的是如何使用jQuery的`ajax`方法实现跨域数据获取，这是一种非常常见的需求，特别是在前后端分离的项目中。下面我们将深入探讨相关知识点。 首先，跨域（Cross-Origin）是指在不同源的浏览器安全...
jQuery Ajax调用WebService返回JSON数据
anyx的专栏
05-23 1万+
转载 本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据，另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题，还有出现问题的原因. 　　jQuery调用WebService网上的介绍也比较多，最近的项目中我也用到不少，一直都很少用.NET Ajax，比较钟情于jQuery调用请求WebService有
jquery跨域调用webService
思月行云
03-13 244
jquery跨域调用webService，以及解决跨域情况下只能返回XMl格式数据的问题 http://lu.9efish.com/blog/jquery-cross-domain-call-asp.net-web-service原文地址 网上有很多文章介绍如何使用jquery调用web service，在同一个域里都没什么问题 运行都是良好的。但在实际的应用中 我们既然已经部署了web ...
JQuery跨域调用WebService
程序E生
05-22 666
 1.添加引用[ScriptService] 写在类名上 2.方法必须为Void类型 3.方法返回数据方式  string callback = HttpContext.Current.Request.QueryString["jsoncallback" ];             jsonStr = string.Format("{0}({1}
jsonp跨域请求webservice+webservice部署
陈麟的专栏
07-03 2971
webservice服务端代码： using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Prot
webservice jsonp格式调用
weixin_30536513的博客
07-24 370
前端 $.ajax({type:"get",url:"http://baiduzd.yihu.com.cn/APIService.asmx/GetHospitalStatus",dataType:"jsonp",jsonp:'callback',data:...
jQuery使用ajax跨域请求获取数据
12-10
jQuery提供了使用ajax进行跨域请求的功能，以实现与不同源的服务器进行数据交互。 首先，要启用jQuery的跨域支持，我们需要设置`jQuery.support.cors`为`true`，这允许jQuery执行跨域请求。在示例代码中，有这样一...
AJAX跨域请求JSONP获取JSON数据的实例代码
12-10
【AJAX跨域请求JSONP获取JSON数据的实例代码】 AJAX（Asynchronous JavaScript and XML）是现代Web应用程序的核心技术，使得网页可以在不刷新整个页面的情况下与服务器进行交互，提升了用户体验。XMLHttpRequest...
ajax 跨域调用webservice 使用jsonp解决方法
04-13 196
前端 ： $.ajax({ type: "POST", //访问WebService使用Post方式请求 contentType: "application/json;charset=utf-8", //WebService 会返回Json类型 url: "http://localhost...
Jquery Ajax 跨域调用asmx类型 WebService范例代码
05-08
摘要：Ajax 在 Web 2.0 时代起着非常重要的作用，然而有时因为同源策略 (SOP)（俗称：跨域问题(cross domain)） 它的作用会受到限制。在本文中，将学习如何克服合作限制。本文以asmx方式搭建webservice作为测试用后端，给出完整的前后端调用解决方案、范例代码。 本资源为代码部分。 博文请见：http://blog.csdn.net/fanrong1985/article/details/51345436
jquery跨域调用webservice
12-30
jquery跨域调用webservice,采用jsonp，在webservice返回端采用HttpContext.Current.Response.Write返回json格式。，回调函数返回执行结果。
JS-JQuery(JSONP)调用WebService跨域若干技术点
weixin_30763397的博客
05-15 97
1、JSONP:JSON With Padding，让网页从别的网域获取信息，也就是跨域获取信息，可以当做是一种“工具”，大多数架构Jquery、EXTjs等都支持。 　　由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server2.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <scr...
web应用实现跨域请求的两种常用方式（CORS、JSONP）
以码为梦
07-26 970
什么是跨域？ 由于浏览器的同源策略，不允许跨域调用其他页面的对象。所谓跨域是指跨域名。同一域名是指协议、域名、端口三者均相同，任一不同都不属于同一域名，举例如下： 当网站http://www.domain.com/work.html文件中发起一个ajax请求时，若请求的URL为下列情况时，跨域结果如下： URL 说明 是否跨域 http://www.domai...
关于C#调用WebServices的方法
softuse的博客
01-07 1424
关于C#调用WebServices的方法 https://www.cnblogs.com/CreateFree/p/8423315.html 第一种：最常见的就是直接在项目的引用中右击添加服务引用 此方法用法如下： 首先需要添加引用；然后需要实例化，实例化完了之后就可以通过实例化的对象调用webservices的方法； 这个方法以前常用，可惜这次不行了； 第二种：不用通...
jQuery跨域调用WebService简介
limengmeng9006的专栏
11-25 1835
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml"> head runat="server"> title>jqu
ajax跨域请求调用webservice接口
热门推荐
bodilove的专栏
03-17 1万+
最近突然想学习webservice，一直不知道如何跨域调用调用。如果都在同一个项目，相信大家都知道了？特此整理一下关键点，权当学习。 1.WebService 接口编写。这里不在赘述。 步骤：新建web项目=》添加web service=》编写方法接口=》然后发布。 关键如何让外部Ajax 调用。 首先，配置WebService 项目配置文件（web.config）红色部分必须配置，这样第...
POST形式 soapUI调用WebService的restful接口，传入json参数，并且返回json
weixin_34327223的博客
09-07 2797
第一次使用POST形式传JSON字符串，怎么都调不到后台方法，只是因为注解没加对……   CXF的WebService接口类 package com.zit.webservice.main; import javax.jws.WebService; import javax.ws.rs.Consumes; import javax.ws.rs.POST; import javax.ws.rs....
Ajax跨域解决方案：JSONP、CORS与代理请求
在实际应用中，例如使用jQuery的Ajax函数发送请求，当遇到跨域问题时，可以添加`jsonp`选项利用JSONP解决，或者在后端服务器设置CORS响应头，如`Access-Control-Allow-Origin: *`来允许所有源的请求。 总结，理解和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值