使用JavaScript 实现各种跨域的方法

一、一些概念

①传统Ajax：交互的数据格式——自定义字符串或XML描述；

　　　　跨域——通过服务器端代理解决。

②如今最优方案：使用JSON格式来传输数据，使用JSONP来跨域。

③JSON：一种数据交换格式。基于纯文本、被原生JS支持。

　　

格式：两种数据类型描述符：大括号{

}、方括号[

]。分隔符逗号、映射符冒号、定义符双引好。

④JSONP：一种跨域数据交互协议，非官方。

　　1、Web页面调用js文件，可跨域。扩展：但凡有src属性的标签都具有跨域能力。

　　2、跨域服务器

动态生成数据

并存入js文件(通常json后缀)，供客户端

调用。

　　3、为了便于客户端使用数据，形成一个非正式传输协议，称为JSONP。该协议重点是允许用户传递一个callback参数给服务器，然后服务器返回数据时

将此callback参数作为函数名包裹住JSON数据，使得客户端可以随意定制自己的函数来自动处理返回数据。

二、JSONP实现

实例1——客户端单方面接收：

①客户端——在客户端设置创建一个函数对象，名称可为callFunc，用于接收服务器的js数据和对其进行处理。

　　js数据中的核心是：调用callFunc函数的同时附带着参数，此参数即data对象的值。

复制代码

代码如下:

<script

type="text/javascript">

var

callFunc

=

function(data){

alert('远程js文件传来的数据：'

+

dataresult);//data为服务器端的JSON数据对象。

};

</script>

<script

type="text/javascript"

src="http://其他域的js文件com/remotejs"></script>

②服务器端——直接调用客户端js中的函数，并传入数据。

复制代码

代码如下:

callFunc({"result":"value1"});

实例2——客户端向服务器传送

指定函数名，服务器端接收该函数名

并调用对应函数

将数据以参数形式传入。

复制代码

代码如下:

<script

type="text/javascript">

//

得到航班信息查询结果后的回调函数

var

flightHandler

=

function(data){

alert('你查询的航班结果是：票价

'

+

dataprice

+

'

元，'

+

'余票

'

+

datatickets

+

'

张。');

};

//

动态添加链接服务器js文件的script。

　　//

在url地址中传递了一个code参数匹配JSON数据中的某个key，callback参数则告诉服务器：本地回调函数名为callFuncName。

var

url

=

"http://flightQuerycom/jsonp/flightResultaspxcode=CA1998&callback=callFuncName";

var

script

=

documentcreateElement('script');

scriptsetAttribute('src',

url);

//

将script元素在网页加载时插入head头部

documentgetElementsByTagName('head')[0]appendChild(script);

</script>

总结：实现的代码并不复杂，但在实现Ajax跨域、frameset/iframe跨域等却是效率颇高的。

js不能直接调用服务器端的方法

只能通过提交页面，或者调用一个专门的页面来返回需要的结果

或者用ajax来实现

LZ的方法<%# %>只能是在生成页面时把后台的变量或函数返回值作为字符串写入页面而已。

一般的浏览器中是无法通过js调用本地java程序的，但是可以调用嵌入到网页的applet的方法。交互方式如下：

<applet codebase = "" width = "400" height  = "400"

  name= "MyApplet" code = "testappletsMyApplet1class"> 

<script>

// js访问applet属性：documentappletNameappletField (属性必须是public的) 

// js访问Applet方法：documentappletNameappletMethod (方法必须是public的)

function showLable{

     // 调用testappletsMyApplet1类的invokeByJS方法 

     documentapplets["MyApplet"]invokeByJS('myvalue');

}

</script>

javaScript函数中执行C#代码中的函数

方法一：

1、首先建立一个按钮，在后台将调用或处理的内容写入Button1_Click中;

代码如下:

protected void Button1_Click(object sender, EventArgs e)

{

thisTextBox1Text = "voodooer";

} 

2、在前台可以这样调用：

代码如下:

<input type="button" value="访问C#的方法" onclick='documentgetElementById("Button1")click();' /> 

方法二：

1、函数声明为public 或者protected

代码如下:

public string ss()

{

return("voodooer");

} 

2、 前台调用方法

代码如下：

<script language=javascript>

var a = " <%=ss()%>";

alert(a);

</script> 

方法三：

<script language="javascript">

代码如下:

<!--

function __doPostBack(eventTarget, eventArgument)

{

var theForm = documentForm1; //指runat=server的form

theForm__EVENTTARGETvalue = eventTarget;

theFrom__EVENTARGUMENTvalue = eventArgument;

theFormsubmit();

}

-->

</script>

<input type="button" value="按钮" > 

方法四：

代码如下:

<script language="javascript">

function SubmitKeyClick()

{

if (eventkeyCode == 13)

{

eventcancelBubble = true;

eventreturnValue = false;

documentallFunNamevalue="你要调用的函数名"；

documentform[0]submit();

}

}

</script>

<INPUT type="text">

<input type="hidden" > 〈！--用来存储你要调用的函数 --〉 

在JavaScript访问C#变量

方法一：1、通过页面上隐藏域访问 <input type="hidden" runat="server">

方法二：1、如后台定义了PUBLIC STRING N;前台js中引用该变量的格式为' <%=n%>'或"+ <%=n%>+"

方法三：1、或者你可以在服务器端变量赋值后在页面注册一段脚本

" <script language='javascript'>var temp=" + tmp + " </script>"

tmp是后台变量，然后js中可以直接访问temp获得值。 

注意：

在CS里有： 

public Page_OnLoad()

{

if (!PageIsPost())

{

string strFunName=RequestForm["FunName"]!=nullRequestForm["FunName"]:"";

//根据传回来的值决定调用哪个函数

switch(strFunName)

{

case "enter()":

enter() ; //调用该函数

break;

case "其他":

//调用其他函数

break;

default:

//调用默认函数

break;

}

}

}

public void enter()

{

//……比如计算某值

} 

　Web远程过程调用（以下简称WebRPC）是在不刷新页面的前提下 对远程方法进行调用 是最近的一个热点 在一些场合下 他甚至成为不可替代的实现方式 WebRPC的实现方式经历了从普通URL读取 隐藏帧 IFrame XMLHTTP乃至 Flash等 本文将对目前存在的WebRpc方案（产品）进行列表 并作简单评价

　

　评价将在以下几个方面进行 客户端实现方式 服务器端实现方式 是否自行封装协议 是否支持序列化/反序列化 序列化支持是否完备（原子类型 对象类型） 是否支持异步/同步方式 注意 由于Web方式的远程调用没有得到大规模运用 笔者自己并没有在企业应用中采用WebRPC的经验 但在娱乐应用 在线游戏中 已经得到了相当好的运用 这些应用已经在《面向异步消息的Web应用(AMOWA)》中得到详细论述 有兴趣的可以在产品指南栏目中阅读这篇文章

　

　 MSRS (Microsoft Remote Scripting)

　地址 url=/library/en us/rmscpt/Html/rmscpt asp

　简介 在网页出现的早期 浏览器功能有限 Applet的出现 为MSRS提供了平台 在这项方案中 MSRS通过一个applet类以及页面上的参数配置 来与服务器端交互 从而实现了远程调用 采用此项技术实际上将页面不刷新的工作交给了一个名为rsproxy class的不可见Applet完成 我见过早期的在线Web象棋采用此项方案 优点 轻而易举跨浏览器 缺点 服务器端采用微软asp applet加载缓慢 不支持数据类型序列化/反序列化

　

　 JSRS (Javascript Remote Scripting)

　地址

　简介 支持两种数据访问方式 HTTP GET方式（动态加载JS文件） HTTP POST方式（用JS动态创建一个Iframe 在其中提交一个表单） 不用刷新页面 支持简单数据的序列化/反序列化

　

　 XML RPC

　地址

　简介 XML RPC定义了一种协议规范 由于它的轻量级 概念完整 因此目前绝大多数语言都有实现 包括Java（Apache xml rpc） PHP javascript VBScript python等等 最大的交流方式Blog协议 管理方法也遵循XML RPC规范 优点 绝大多数语言都支持 简单 规范 缺点 Java实现对数据类型序列化支持有限

　

　 dwr (Direct Web Remoting)

　地址

　

　简介 一个在适当时候提出适当概念的小东西 采用xml传递请求 服务器端利用反射找到相应方法执行后将结果返回 较有创意的是 他将服务器端需要进行远程调用的代码动态转换为相应的js代码 前端可以直接显式调用 简单 可以作为WebRPC学习入门 不支持数据序列化

　

　 JSON RPC

　地址

　简介 采用一种没听说过的数据交换协议JSON(JavaScript Object Notation ) 作为协议基础 在此之上进行数据调用 采用xml发送/接受请求 支持完整的数据序列化/反序列 目前 jason Web框架采用json rpc为底层方式

　

　 Burlap ()

　简介 也许会奇怪 为什么Burlap也能够算得上远程协议 实际上 与Hessian实现方式基本相同的Burlap（前者为二进制 后者为文本） 在协议完整性上能够超过上述任一产品 目前我已经实现了JS调用Burlap服务的代码 是目前所有远程调用方式中最为优雅的实现

　

　 XINS (XML Interface for Neork Services)

　地址

　简介 按照官方网站的说法 SOA + Java + XML + code_generation plexity => XINS 这个庞大的东西需要定义一揽子描述文件然后才能在HTML中进行调用 从外观上看 这是最像样子的解决方案 对其了解不多 不做评价

　

　 WebService SOAP

　简介 除了微软有一个webservice htc控件 mozilla也有相应的webservice访问方式 因此 在HTML中访问webservice也是可行的 只是这种协议过于笨重 除非必要 没有人会在web客户端中使用

　客户端实现方式

　服务器端实现方式

　是否自行封装协议

　序列化/反序列化

　同步方式/异步方式

　Applet

　Microsoft ASP

　Iframe/动态加载js

　多种 php java等

　XML RPC

　Xml等多种方式

　绝大多数语言都有支持

　XML RPC

　支持 Java实现有限支持 不支持自定义对象

　Xml

　JSON RPC

　Xml

　Burlap

　Xml

　Burlap

　Xml

　WebService

　IE采用 htc mozilla内置支持

　不定 遵循webservice规范以及SOAP协议

用jquery的ajax就可以的，实例如下：

<script src="Jquery/jquery-142-vsdocjs" type="text/javascript"></script>

<script type="text/javascript">

$(document)ready(function() {

$("#btnOK")click(function() {

$ajax({

//要用post方式

type: "POST",

//方法所在页面和方法名

url: "AjaxPageaspx/ABC",

data: "{abc:111}", //带参数的,参数名称abc,参数“111”

//date:"{}",//没有参数的初始化

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

dataType: "json",

success: function(data) {

//返回的数据用datad获取内容

alert(datad);

}

});

});

});

</script>

<body>

<form id="form1" runat="server">

<asp:Button ID="btnOK" runat="server" Text="ShowText" />

</form>

</body>

后台：引入using SystemWebServices;

[WebMethod]

public static string ABC(string abc) //带参数的方法

{

return abc;

}

webconfig下得有如下配置节：

<httpModules>

<add name="ScriptModule" type="SystemWebHandlersScriptModule, SystemWebExtensions, Version=3500, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

</httpModules>

这个在vs2008里是可行的，版本低的话，可能不能直接这么调用

1 JS方法名拼写错误：请再次确认所调用的JS方法名是否正确拼写，并且确保大小写匹配。

2 JS方法未定义：请确保所调用的JS方法已经在前端代码中定义，并且在回调之前已经加载或者执行。

3 参数错误：请检查传递给JS方法的参数是否正确，包括参数类型、数量和顺序。

4 代码逻辑错误：请检查JS方法内部的代码逻辑是否有错误导致回调执行错误，例如异常捕获不当、逻辑错误等。

建议在调试过程中使用浏览器的开发者工具来查看JS方法的调用情况，并检查是否有错误信息或者异常抛出。此外，可以尝试在服务器返回成功后立即执行一个简单的JS方法来检查是否能够成功执行，以确定问题是否出在回调方法上。