>

js跨域调用WebService的归纳实例,js实现跨域访问的

- 编辑:www.bifa688.com -

js跨域调用WebService的归纳实例,js实现跨域访问的

刚刚从培训班学习完,总想写一下东西,自从进入了这个院子,每次出现问题,总是能找到一些答案,给我一些帮助.

步骤1.   在web.config中的system.web节点里加入

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法:
1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数,代码如下:
页面一: 

作为新手,就写一下简单的吧,院子里面有很多大牛, 说句实话,他们的很多代码我都看不懂. 我就写一下新手看的懂得吧, 多说一句,我觉得大牛写的代码应该通俗易懂才可以。.

<!--此节点可允许脚本跨域调用webservice-->

  <webServices>
   <protocols>
    <add name="HttpPost"/>
    <add name="HttpGet"/>
   </protocols>
  </webServices>
  <!--此节点可允许脚本跨域调用webservice-->
<html> 
<head> 
 <script> 
  document.domain = "xx.com"; 
  function aa(){ 
   alert("p"); 
  } 
 </script> 
</head> 
<body> 
  <iframe src="http://localhost:8080/CmsUI/2.html" id="i"> 

  </iframe> 
  <script> 
 document.getElementById('i').onload = function(){ 
   var d = document.getElementById('i').contentWindow; 
   d.a(); 

 }; 
  </script> 
 </body> 
</html> 

代码非常的简单,但是写的过程中,仍然发生了一些小错误,最后还是解决了。

步骤2. webservice代码

页面二: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>手写js跨域</title>
</head>
<body>
<button>search</button>
<input type="text"/>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
<script>

  var head=document.getElementsByTagName('head')[0];
  var text=document.getElementsByTagName('input')[0];
  var textarea=document.getElementsByTagName('textarea')[0];
  var bt=document.getElementsByTagName('button')[0];

  bt.onclick=function(){
    var _script=document.createElement('script');
    head.appendChild(_script);
    _script.src='http://www.qjdongsheng.com/uploads/allimg/190703/22535450T-1.jpg'
         text.value 
        '&json=1&p=3&sid=1443_20972_18241_21119_21191_21160_20929&req=2&csor=1&cb=getdata';  //百度的一个借口,用getdata函数把数据返回
  }
  function getdata(data){
    console.log(data);
   for(i in data.g){
     console.log(data.g[i].q);
     textarea.value =data.g[i].q 'n';
   }
  }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Mvc;
namespace WebService
{
  /// <summary>
  /// WebService1 的摘要说明
  /// </summary>
  [WebService(Namespace = "http://tempuri.org/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  [System.ComponentModel.ToolboxItem(false)]
  // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
  [System.Web.Script.Services.ScriptService]
  public class WebService1 : System.Web.Services.WebService
  {
    [ValidateInput(false)]
    [WebMethod(Description = "测试")]
    public void getDBTableInfos(string EnterpriseCode)
    {
      HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
      string jsonCallBackFunName = string.Empty;
      jsonCallBackFunName = HttpContext.Current.Request.Params["jsoncallback"].ToString();
      HttpContext.Current.Response.Write(jsonCallBackFunName   "({ "Result": ""   EnterpriseCode   "" })");
    } 
  }
} 
<html> 
 <head> 
 <script> 
  document.domain = "xx.com"; 
  function a(){ 
  alert("c"); 
   } 
 </script> 
 </head> 
 <body> 
 </body> 
</html> 

以上就是小编为大家带来的js原生跨域_用script标签的简单实现的全部内容了,希望对大家有所帮助,多多支持脚本之家~

步骤3. html页面部分

这时候父页面就可以调用子页面的a函数,实现js跨域访问
2.基于script标签实现跨域 script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签,代码如下:

您可能感兴趣的文章:

  • AngularJS iframe跨域打开内容时报错误的解决办法
  • js iframe跨域访问(同主域/非同主域)分别深入介绍
  • js跨域调用WebService的简单实例
  • js判断请求的url是否可访问,支持跨域判断的实现方法
  • Vuejs第九篇之组件作用域及props数据传递实例详解
  • 详细谈谈AngularJS的子级作用域问题
  • Node.js配合node-http-proxy解决本地开发ajax跨域问题
  • javascript iframe跨域详解
<!DOCTYPE html>
<html>
<head>
  <title>Index</title>
  <script src="http://www.cnblogs.com/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnSubmit").click(function () {
        var EnterpriseCode = "39"; //企业代码        
        var dataStr = "EnterpriseCode="   EnterpriseCode;
        $.ajax({
          type: "get",
          url: "http://xxx/xxx.asmx/AntiWebQuery_Ajax?jsoncallback?",
          dataType: "jsonp",
          jsonp: 'jsoncallback',
          data: dataStr,
          success: function (result) {
            //返回结果
            alert(result.Result);
          }
        });
      });
    });
  </script>
</head>
<body>
  <div>
    <input id="btnSubmit" type="button" value="查询" />
  </div>
</body>
</html> 
var script = document.createElement('script'); 
script.src = "http://aa.xx.com/js/*.js"; 
document.body.appendChild(script); 

以上就是小编为大家带来的js跨域调用WebService的简单实例的全部内容了,希望对大家有所帮助,多多支持脚本之家~

这样通过动态创建script标签就可以加载其它域的js文件,然后通过本页面就可以调用加载后js文件的函数,这样做的缺陷就是不能加载其它域的文档,只能是js文件,jsonp便是通过这种方式实现的,jsonp通过向其它域传入一个callback参数,通过其他域的后台将callback参数值和json串包装成javascript函数返回,因为是通过script标签发出的请求,浏览器会将返回来的字符串按照javascript进行解析执行,实现了域与域之间的数据传输。
jquery中对jsonp的支持也是基于此方案。
3.后台代理方式
这种方式可以解决所有跨域问题,也就是将后台作为代理,每次对其它域的请求转交给本域的后台,本域的后台通过模拟http请求去访问其它域,再将返回的结果返回给前台,这样做的好处是,无论访问的是文档,还是js文件都可以实现跨域。

您可能感兴趣的文章:

  • AngularJS iframe跨域打开内容时报错误的解决办法
  • js iframe跨域访问(同主域/非同主域)分别深入介绍
  • js原生跨域_用script标签的简单实现
  • js判断请求的url是否可访问,支持跨域判断的实现方法
  • Vuejs第九篇之组件作用域及props数据传递实例详解
  • 详细谈谈AngularJS的子级作用域问题
  • Node.js配合node-http-proxy解决本地开发ajax跨域问题
  • javascript iframe跨域详解

以上js实现跨域访问的三种方法分先给大家,大家仔细研究学习,一定会有所收获

您可能感兴趣的文章:

  • js同源策略详解
  • JS实现的ajax和同源策略(实例讲解)
  • Javascript 跨域访问解决方案
  • js iframe跨域访问(同主域/非同主域)分别深入介绍
  • jquery下利用jsonp跨域访问实现方法
  • AJAX javascript的跨域访问执行
  • AJax与Jsonp跨域访问问题小结
  • JSONP跨域GET请求解决Ajax跨域访问问题
  • js跨域访问示例(客户端/服务端)
  • AngularJS实现的JSONP跨域访问数据传输功能详解
  • JavaScript同源策略和跨域访问实例详解

本文由必发88官网发布,转载请注明来源:js跨域调用WebService的归纳实例,js实现跨域访问的