JS的传递数据不刷新页面的应用

 

以下文章纯是转抄,只因其中有一些东西是要用的,又怕忘掉,所以….作者看到可不要生气哟!
————————————————————————-
结合我最近的学习经历.整理一下jsp和js的混合应用的一个方法.

1 用途.

很常见的情况，比如你发一个帖子，或者写一个email,文章正文什么的写的差不多了，突然想起来，还要发个附件或者发个照片.这个时候，就要用倒一个上传功能.

在大多数的web页上，这个应用是很常见的。我们叫这个页面a,在a上,往往有个链接,名字叫”附件”,好了，点它,弹出一个窗口b.其实大多数b也就是个这个

<input type=”file”>用他浏览到我们需要找的文件,然后再次回到这个b页,在浏览按钮旁边，应该有个”上传”或者”粘贴”的一个按钮,点一下,好了，这个我们硬盘上的文件，应该已经发到服务器上去了.一般来说，这个时候，会返回一个字符串,往往是这个文件在服务器的地址，或者名字什么的.

这个时候.就涉及到现在讨论的这个问题了.就是.

如何把这个在b上返回的字符串发送到一开始的a页上.而且不刷新a页面.—关键就在这个不刷新了.

如果用常规的post一个parameter到a上，会导致a的刷新.那我们写了半天的正文可能就消失了。使用者会骂人的.

如果为了保护这些已经写了的数据，在当初点”附件”的时候，就一起把那些写了一半的东西也从a这里post到b上.那么如果a中的表单数据众多，也是很消耗资源的.而且这个方法显的很笨.算是下策.

下面就说说,如何利用js混合jsp解决这个问题的方法.

 

2 解决

 

Javascript有许多内建的方法来产生对话框，如：window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如：

　　showModalDialog() (IE 4+ 支持)
　　showModelessDialog() (IE 5+ 支持)

 window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。
 window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

 

——————————–

在继续看下去前，我要在这里先说说为什么要用他，他有什么好处值得去用.

就我的理解.

首先 他可以在a页里边，利用js边传递一些参数到b,然后在b里边,还是用js,对这些参数进行操作后，还可以返回a,不需要刷新a页.这些返回的参数就可以显示出来.

也许有些奇怪.为什么不刷新也会显示出来?其实我的理解很简单.是这样的流程.在a.jsp里边，我们写下这个js.

<scrpit language=”javascript”>

…….

//首先定义一个需要传递的参数

var a=”111222″;

//定义一个接收返回用的变量

var obj=window.showModalDialog(“b.jsp”,a)

//注意，这个obj就是用来接收发出去经过操作又返回的数据用的。当初我window.showModalDialog(“b.jsp”,a)这样用，怎么都接收不到返回的数.

……………..

</script>

-这个时候，showModalDialog()函数就弹出一个网页对话框,这个框就是b.jsp,这个时候，js的操作，就转移到了b.jsp上.我把他理解问当前的操作焦点，从a.jsp转到了b.jsp.等一系列操作结束后，焦点再返回a.jsp.

在b里边我们的js开始操作了.

<scrpit language=”javascript”>

//我们在b里边定义一个变量,用途是接受发过来的数据.

var obj2=window.dialogArguments;

 

//-其实这个obj2 就是发过来这个a.我们可以对这个obj2进行操作，其实就是对发过来的参数a进行操作.如下.

alert(“obj2就是传过来的a!  “+obj2);     //可以看到alert出来就是 111222

 

obj2=”33333333″;

 

alert(“改变了!”+obj2)   //这个时候，alert出来的就是33333333 了.

 

window.returnValue=obj2;   //returnValue方法用来返回修改后的数据到a.jsp，就是返回这个obj２，在a中，obj会接受到这个数据．这个就是开始定义个var obj=window.showModalDialog(“b.jsp”,a)　后，obj的用途．是用来接收的．

 

这个时候，操作焦点再次回到a.jsp，在里边，js又开始再次往下走．假若我们a.jsp的表单名字叫myform．这个显示文件上传后的input框是<input type=”text” name=”mytext”>这样的话．

在js里边，我们可以继续控制，操作如下．

document.myform.mytext=obj;

这个时候，就会发现．在不刷新的情况下．mytext的值已经自己变了．变成3333333333;

这个就是我们要大致的操作和思路，在混合调用jsp的时候，方法是类似的．在看完下边列出我们所用的js的函数方法的介绍后，我们详细的讨论使用方法．

 

 

当我们用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时， 打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。而模态［ＩＥ４］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。

使用方法如下：
 vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
 vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明：
 sURL
 必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
 vArguments
 可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
 sFeatures
 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
  dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
 　　dialogWidth: 对话框宽度。
 　　dialogLeft: 距离桌面左的距离。
 　　dialogTop: 离桌面上的距离。
 　　center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
 　　help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
 　　resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
 　　status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
  scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

  还有几个属性是用在HTA中的，在一般的网页中一般不使用。
  dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
  edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
  unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

 传入参数：
 要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：

 

test1.htm
 ====================
 <script>
  var mxh1 = new Array(“mxh”,”net_lover”,”孟子E章”)
  var mxh2 = window.open(“about:blank”,”window_mxh”)
  // 向对话框传递数组
  window.showModalDialog(“test2.htm”,mxh1)
  // 向对话框传递window对象
  window.showModalDialog(“test3.htm”,mxh2)
 </script>

 test2.htm
 ====================
 <script>
  var a = window.dialogArguments
  alert(“您传递的参数为：” + a)
 </script>

 test3.htm
 ====================
 <script>
  var a = window.dialogArguments
  alert(“您传递的参数为window对象，名称：” + a.name)
 </script>

 可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

 test4.htm
 ===================
 <script>
  var a = window.showModalDialog(“test5.htm”)
  for(i=0;i<a.length;i++) alert(a[i])
 </script>

 test5.htm
 ===================
 <script>
 function sendTo()
 {
  var a=new Array(“a”,”b”)
  window.returnValue = a
  window.close()
 }
 </script>
 <body>
 <form>
  <input value=”返回” type=button onclick=”sendTo()”>
 </form>

 常见问题：
 1，如何在模态对话框中进行提交而不新开窗口？
 如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe，提交时可以制定target为该iframe的name。对于IE4+，你可以用高度为0的frame来作：例子，

 test6.htm
 ===================
 <script>
  window.showModalDialog(“test7.htm”)
 </script>

 test7.htm
 ===================
 if(window.location.search) alert(window.location.search)
 <frameset rows=”0,*”>
  <frame src=”about:blank”>
  <frame src=”test8.htm”>
 </frameset>

 test8.htm
 ===================
 <form target=”_self” method=”get”>
 <input name=txt value=”test”>
 <input type=submit>
 </form>
 <script>
 if(window.location.search) alert(window.location.search)
 </script>
 2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗？
 答案是不能。但在frame里是可以的。

 

3 具体的操作

以我在jsp中的文件和图片上传的方法为例。

在我的新闻添加页addnews.jsp，有个图片上传功能。点上传按钮。弹出uploadimg.jsp。在addnews.jsp有个

<input type=”text” name=”img”>用来输入图片的url，如果想自己上传图片，在上传结束后，会自动把value设置成上传好的图片在服务器的位置。方便以后整个表单的提交。

有js如下。

<script language=”JavaScript”>
   var a=”"; //定义一个变量用来传递数据，修改后会传回来我们要的字符。
   function sendloadl()
   {
    var s=window.showModalDialog(“temp.htm”,a)；//传到temp.htm是由于不想在uploadimg提交后再弹出新页，用了  frameset ，前边例子有讲过。
    myform.img.value=s；      //我们要的返回值；
   }
   </script>

    <input type=”button” onClick=”sendload()” value=”上传”> //上传按钮，调用了定义的sendland函数。

 

temp.htm 就是个框架

 <frameset rows=”0,*”>
  <frame src=”about:blank”>
  <frame src=”uploadimg.jsp”>
 </frameset>

提交的时候，uploadimg.jsp还是起一个浏览的作用，他将会把数据post到doload.jsp，数据将在doload.jsp调用写好的imgload.class，然后返回一个文件名，就是我们要的东西了．

这个frameset就是保证我们从uploadimg.jsp提交到doload.jsp的时候，不弹出新窗口．

uploadimg.jsp的表单如下．

<form method=”post”  enctype=”multipart/form-data” action=”doload.jsp” target=”_self”>
 <input name=”file” type=”file”>      
 <input type=”submit” name=”Submit” value=”upload”>
 </form>

在doload.jsp中，我们经过了jsp的操作，获得了一个imgurl，这个string imgurl 就是我们要传回去的东西。（图片地址）

这个时候，我们还需要写一个按钮，点他，执行回传数据的js，并且关掉这个窗口．

 <script language=”JavaScript”>
    function sendTo()
    {
     var a = window.dialogArguments;  //取得从addnews.jsp获得a
   　a=”<%=imgurl%>”　　　　　　//把a的的值改成我们要返回的字符串，就是上传好的图片地址．
  　// alert(“newpara:”+a);
     window.returnValue =a　　　　 //返回a
     window.close()
    }

 

   <input value=”返回” type=”button” onClick=”sendTo()”> 这个按钮，保证了点后，将数据返回，并且关掉这个窗口．

   数据在返回后，被var s 所接受，myform.img.value=s； 于是我们的这个form的输入框img的数值就变成了s，也就是我们返回的上传好的图片的地址．

 

其实在a.jsp和b.jsp里边，还可以这样操作的．

在b的js里边．

var obj2=windw.dialogArguments;

obj2.a=<%=imgurl%>; 

  //就是直接在b里边控制a里边的变量a　，原来我们定义的是个var　a＝＂＂后来经过在b里边的js的重新设置．

 

但是奇怪的是，我仅仅是看到例子这样写，自己实验还是不成功，有点奇怪。似乎

obj2.a 这样的语法是不允许的．

 

－－－－－－－－－－－别人写的例子在这里．

四、从caller页面传递数据到callee页面 上面我们介绍了创建模态和非模态窗口的语法以及如何
控制新窗口的大小、位置和外观，接下来我们研究一下实际应用中更实用的功能：如何从caller页
面传递数据到callee页面。从caller页面传递给callee页面的数据分为3类：传递值、传递数组引用
以及传递对象,它们都是通过showModalDialog()和showModelessDialog()的第2个参数实现的。

（一）传递值类型数据 在caller.htm页面中输入以下代码：
      <INPUT TYPE=”button” VALUE=”创建模态对话框” onclick=”fnOpenModal()”>
      <br><br>
      <INPUT TYPE=”button” VALUE=”创建非模态对话框” onclick=”fnOpenModeless()”>
     
      <script language=”javascript”>
      <!– function fnOpenModal()
      { window.showModalDialog(“callee.htm”,”打开了一个新模态窗口”) }
     
      function fnOpenModeless()
      { window.showModelessDialog(“callee.htm”,”打开了一个新非模态窗口”) }
     
      // –> </script>
     
      在callee.htm页面中输入以下代码：
     
      <SCRIPT LANGUAGE=”JavaScript”>
      <!– alert(dialogArguments); // –>
      </SCRIPT>
     
      在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的提示信息框：
      然后才出现新窗口。
      这种情况下，callee.htm页面中的window对象的属性dialogArguments将对应于caller.htm页面中
      的”打开了一个新模态窗口”或者”打开了一个新非模态窗口”。如果直接打开callee.htm，
      将会出现错误提示。

（二）传递数组引用类型数据
      第一种值类型数据的传递中，在callee.htm页面中只能读取caller.htm页面的传递数据。
      当需要对caller.htm页面的传递内容进行修改时，就需使用到数组引用类型的传递方式。
      首先，在caller.htm页面中输入以下代码：
     
      <INPUT TYPE=”button” VALUE=”创建模态对话框” onclick=”fnOpenModal()”>
      <br><br> <INPUT TYPE=”button” VALUE=”创建非模态对话框” onclick=”fnOpenModeless()”>
     
      <script language=”javascript”>
      <!– var a = new Array; a[0]=”first”;
       a[1]=”second”;
       a[2]=”third”;
      
       function fnOpenModal()
       { window.showModalDialog(“callee.htm”,a) }
      
       function fnOpenModeless()
       { window.showModelessDialog(“callee.htm”,a) }
      
       // –> </script>
      
       然后在callee.htm页面中输入以下代码：
       <SCRIPT LANGUAGE=”JavaScript”>
       <!– a = dialogArguments; alert(a); a[0] = “fourth”; // –>
       </SCRIPT>
      
       最后，在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的对话框：
       接着关闭这个对话框以及新打开的窗口，再次点击一个按钮，又出现一个对话框：
       从运行结果我们看到，在caller.htm页面中通过对数组a的地址引用
       就可以实现在callee.htm中修改数组a的内容。
       注意在callee.htm中要首先建立对传递数据的附值：a = dialogArguments。
      
       （三）传递对象类型数据
            在caller.htm和callee.htm中传递数据的最有效方式是通过对象方式进行
       ，这不仅能实现从caller.htm到callee.htm的传递，还能从callee.htm传递到caller.htm。
       而且，我们还可以在caller.htm中定义对象的方法，再在callee.htm中使用它们。实际上，
       我们可以将caller.htm的window对象传递给callee.htm，这样就可以在callee.htm中访问
       caller.htm的变量及函数。 来看看一个实际的例子。在caller.htm中输入以下代码：
      
       <HTML> <HEAD> <TITLE>传递对象数据</TITLE>
       <SCRIPT> var sColor=”";
       function callDialog()
       { showModelessDialog(“callee.html”,window,”status:false;dialogWidth:300px;dialogHeight:150px”); }
 function update() { oColor.innerText = sColor; }
       </SCRIPT> </HEAD> <BODY> <P>输入你最喜欢的颜色:
       <SPAN ID=”oColor” STYLE=”color:red;font-size:24″>
       Yellow</SPAN></P>
       <INPUT TYPE=”button” VALUE=”Display Modeless Dialog” onclick=”callDialog()”>
       </BODY> </HTML>
      
       在callee.htm中输入以下代码： <HTML> <HEAD>
       <TITLE>callee.html</TITLE>
       <SCRIPT>
       function getInfoAndUpdate()
       { var callerWindowObj = dialogArguments;
       callerWindowObj.sColor = oEnterColor.value;
       callerWindowObj.update(); }

       function cancel()
       { var callerWindowObj = dialogArguments;
         callerWindowObj.sColor = “Yellow”;
  callerWindowObj.update(); }
 
  </SCRIPT>
  </HEAD>
  <BODY> 输入你最喜欢的颜色:
  <INPUT ID=oEnterColor><BR><BR>
  <INPUT VALUE=”Apply” TYPE=button onclick=”getInfoAndUpdate();”>
  <INPUT VALUE=”Ok” TYPE=button onclick=”getInfoAndUpdate();window.close();”>
  <INPUT VALUE=”Cancel” TYPE=button onclick=”cancel();window.close();”>
  </BODY> </HTML>
         在浏览器中打开caller.htm，点击“显示非模态对话框”按钮，出现新对话框：
  在对话框中输入其他颜色名称，点击“Apply”按钮后，
 
  执行callee.htm中的getInfoAndUpdate函数：
  function getInfoAndUpdate()
  { var callerWindowObj = dialogArguments;
  callerWindowObj.sColor = oEnterColor.value;
  callerWindowObj.update(); }
 
  因为在caller.htm中传递给callee.htm的是对象类型数据window，
  所以经过第一条语句的附值，callerWindowObj就指向了caller.htm页面，
  然后就可以在callee.htm中按照callerWindowObj.xxx的形式引用caller.htm中的变量及函数
  ：callerWindowObj.sColor = oEnterColor.value负责将callee.htm中输入的颜色名称传
  递给caller.htm中的变量sColor，然后再执行caller.htm中的 update()函数更新显示信息。
  可以看到，通过对象方式传递数据，功能很丰富强大，而且使用起来也不复杂。
 
  六、结 语 以上对使用JavaScript语言操作模态和非模态对话框进行了详细介绍，
  相信你又掌握了在html页面中创建窗口的一个新技术。在实际应用中，模态对话框的功能
  比较实用，可用于必须让访问者阅读相关内容的情况下。另外，利用对象方式在窗口间传
  递数据，功能非常强大但使用却不复杂，是非常值得一用的技术。