BlogJava-J2EE社区-随笔分类-Javascript

解决ajax跨域访问问题

xcp — Fri, 06 May 2016 04:39:00 GMT

前端js:
$.ajax({
      url:'http://localhost/xxxx/test', //后台处理程序
         async:true,
         type:'get',         //数据发送方式
         dataType:'jsonp',     //接受数据格式
         jsonp: "callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的接受的参数名(默认为callback)
    /*jsonpCallback:"jsonpCallback",*///可选项，写上表示返回函数的函数名用“ jsonpCallback”，不写默认为jQuery自动生成的随机函数
         success:function(result){
        var eTime = new Date(); //结束时间

        //设置在线人数
        $("#server_count_1").html(result+"人");
       },
      error:function(){
        alert("服务器1连接失败");
      }
   });

后端处理类：
@Override
public String execute() throws Exception {
  int zxrs = SessionCounter.getRealCount();
  response.setContentType("text/plain");
     response.setCharacterEncoding("utf-8");
     String callbackparam=request.getParameter("callbackparam");
     //System.out.println("callbackparam:"+callbackparam);
     PrintWriter writer=response.getWriter();

     //如果ajax请求写了 jsonpCallback:"jsonpCallback",
     //writer.write("jsonpCallback("+zxrs+")");

     //如果ajax请求没有写 jsonpCallback:"jsonpCallback",
     writer.write(callbackparam+"("+zxrs+")");//需要callbackparam参数接收随机函数名
  return null;
}

xcp 2016-05-06 12:39 发表评论

微博返回顶部

xcp — Thu, 02 May 2013 08:49:00 GMT

返回顶部

xcp 2011-06-26 20:27 发表评论

javaScript 获取窗口左右宽高大小　大全

xcp — Thu, 16 Jun 2011 03:17:00 GMT

http://www.360doc.com/content/11/0125/12/5480484_88885141.shtml

1、基础知识：网页的大小和浏览器窗口的大小
    首先，要明确两个基本概念。
        一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport（视口）。很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。

2、clientLeft,clientTop,clientWidth,clientHeight

                （图一 clientHeight和clientWidth属性）
        clientWidth=width+padding
        clientHeight=heigt+padding
        function getViewport(){
                if (document.compatMode == "BackCompat"){
                    return{
                        width:document.body.clientWidth;
                        height:document.body.clientHeight;
                        //整个网页的大小
                    }
                else{
                    return{
                        width:document.documentElement(一个div).clientWidth
                        height:document.documentElement.clientHeight;
                         //一个div的大小
                    }
                }
        }

3、screenLeft,screenTop,screenWidth,screenHeight
    网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积.那么，document对象的scrollHeight和scrollWidth属性就是网页的大小，意思就是滚动条滚过的所有长度和宽度。
        function getViewport(){
                if (document.compatMode == "BackCompat"){
                    return{
                        width:document.body.screenWidth;
                        height:document.body.screenHeight ;
                        //整个网页的大小（包括不同见的滚动条大小,如没有滚动条，screenwidth=clientwidth）
                    }
                else{
                    return{
                        width:document.documentElement(一个div).screenWidth
                        height:document.documentElement.screenHeight ;
                         //一个div的大小
                    }
                }
        }



4、offsetLeft,offsetTop,offsetWidth,offsetHeight(获取网页元素的绝对位置)
    网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。
    首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标.
    offsetWidth=width+padding+border
    offsetHeight=height+padding+border

                              （图二 offsetTop和offsetLeft属性）
     下面两个函数可以用来获取绝对位置的横坐标和纵坐标：
     function getElementLeft(element){
            var actualLeft = element.offsetLeft;
            var current = element.offsetParent
            while (current !== null){
                actualLeft += current.offsetLeft;

              current = current.offsetParent;
         }
         return actualLeft;
    }
    function getElementTop(element){
          var actualTop = element.offsetTop;
          var current = element.offsetParent;
          while (current !== null){
               actualTop += current.offsetTop;
               current = current.offsetParent
          }
          return actualTop;
    }
    由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用.

5、获取元素位置的快速方法
     除了上面的函数以外，还有一种快速方法，可以立刻获得网页元素的位置.那就是使用getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。
    var X= this.getBoundingClientRect().left;
    var Y =this.getBoundingClientRect().top;
    再加上滚动距离，就可以得到绝对位置
    var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
    var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
   目前，IE、Firefox 3.0+、Opera 9.5+都支持该方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持

xcp 2011-06-16 11:17 发表评论

判断 iframe 是否加载完成的完美方法

xcp — Thu, 02 Jun 2011 10:36:00 GMT

般来说，我们判断 iframe 是否加载完成其实与判断 JavaScript 文件是否加载完成采用的方法很类似：

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美)

我自己的实例:

<div class="contentRight">
<iframe name="myframe" id="myframe" src="" frameborder="0" scrolling="no" width="100%" height="500">iframe>
div>

几点补充说明：
1、IE 支持 iframe 的onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
2、第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

xcp 2011-06-02 18:36 发表评论

得到当前对象的EVent

xcp — Mon, 23 May 2011 12:25:00 GMT

xcp 2011-05-23 20:25 发表评论

锚点是什么？锚点的使用

xcp — Fri, 28 Jan 2011 01:54:00 GMT

1：锚点是什么？
锚点也可以理解成为一种超级链接，只不过它是网页内部的超级链接（注意不是网站内部）。
比如我们有一个网页很长很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。
2：锚点的使用。
锚点从代码上看，仍然是超级链接的一种应用。
这样的一个无内容的标签，便是一个锚点了，我们可以把它放在网页中与之间的任意位置。当然，究竟放在哪个位置，就要看我们的实际需要了。
下面举一个例子：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

锚点示例

网页第一部分
网页第二部分

1返回顶部

2返回顶部

另外再说一下，中的name与id，可以只使用一个，但某些情况下，只是用name会造成锚点无效的错误。建议还是name与id同时使用。

来自：http://www.douban.com/group/topic/4128250/

xcp 2011-01-28 09:54 发表评论

javascript 用var和不用var声明的变量区别

xcp — Sat, 22 Jan 2011 01:49:00 GMT

加var的变量　就要看声明在哪个位置，如果没有在任何方法里面，就是全局的，如果在方法里面就只能是在方法里面全局

不加var的变量　　就是整个window都有用，也就是页面全局，　可以用window.变量来调用

xcp 2011-01-22 09:49 发表评论

img标签的usemap的用法

xcp — Fri, 21 Jan 2011 08:17:00 GMT

例一：http://www.w3school.com.cn/tiy/t.asp?f=jseg_imagemap

onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
href ="/example/html/venus.html" target ="_blank" alt="Venus" />
onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
href ="/example/html/sun.html" target ="_blank" alt="Sun" />

例二：http://jwfpd.javaeye.com/blog/56468








所以注意关键字：usemap,
shape="rect"和shape="circle" 矩形和圆

xcp 2011-01-21 16:17 发表评论

7款Flash和Javascript网页视频播放器

xcp — Fri, 21 Jan 2011 03:28:00 GMT

款Flash和javascript网页视频播放器。梦想中的视频播放器是这样的: 支持所有格式，兼容所有主流视频网站，支持播放列表、视频缩略图、全屏播放、画面调节、预加载、体积贼小，功能贼多……. 也许你的要求并没有这么高，找找下面有没有你满意的！

1. Videobox

Videobox是一个只有6k大小的脚本,用于在页面中显示视频。Videobox使用swfobject来嵌入Flash。视频可以来自Youtube、Metacafe、Google Video、iFilm和自己设置的Flash。

2. Panda

Panda是一个开源的视频平台，能够处理视频的uploading、encoding与streaming。所有处理过程都通过REST API完成。Panda设计运行在云计算平台中，利用Amazon的Web服务群来实现。因此你需要有Amazon Web Services账号。Panda使用SimpleDB来存储所有视频数据和账号。Panda支持Flash的FLV、h264格式和iphone格式等。Panda使用

3. OpenVideoPlayer

采用Adobe Flash与Microsoft Silverlight开发的开源Web视频播放器。

4. Xe-VideoGalV3 FX

Xe-VideoGalV3 FX是一个开源的Flash视频播放器。该播放器能够展示多部电影中某一画面的缩略图，供用户选择播放。支持在视频上添加一个透明的消息提示框。下载FLV文件。调整播放器屏幕大小等。

5. ToobPlayer

ToobPlayer是一个轻量级（大约14-8KB）FLV播放器组件。支持图像预览，播放窗口大小调整，全屏播放模式，加载状态条提醒，支持鼠标滚轮播放进度/播放声音高低，自动重播，时间缓冲。

6. FlowPlayer

FlowPlayer是一个开源的Flash视频播放器。提供所有你可能需要的功能并且这些功能都可以通过JavaScript按你的实际需求进行配置。提供良好的用户体验，支持预加载，长时间播放，播放列表，全屏播放模式等。

7. JCPlayer (演示地址)

JCPlayer是一个免费的Flash视频文件播放器。该播放器支持全屏播放，并且所有功能都完全可自定义包括默认可用的皮肤。

xcp 2011-01-21 11:28 发表评论

不可多得的Javascript(AJAX)开发工具－ Aptana

xcp — Tue, 18 Jan 2011 01:56:00 GMT

自从开始做Web开发起，一直都没有找到一个很让人满意的Javascript开发工具。从Editplus、Dreamweaver到FrontPage、Visual Studio，没有一样是很称手的。你是不是还在为Visual Studio中的那一点点智能提示感到兴奋不已？的确VS比其他的好那么一点点，但是相对于VS中的C#、VB等来说对javascript的支持实在是太少了。

下面我要向你介绍一款非常优秀的Javascript(AJAX) 开发工具：Aptana。应为它实在太棒了，所以我忍不住想向你推荐它。

Aptana中的智能提示称为 Code Assist，相当于VS中的Intellisense。

看到后面的浏览器图标了吗？那是浏览器兼容性的提示。如果你是一个JS老鸟你应该知道那对开发者来说有多重要。

不仅仅是javascript，智能提示的范围还包括DOM 1,2 for HTML：
CSS：

看到后面的黄框框了吗？那是VS里称为Quick Info的东西。

错误提示－－一个都不能少：

Doument outline（文档结构）CSS、HTML、JS统一显示：

代码折叠、项目管理这些小菜不用讲了，都支持。Aptana还有很丰富的在线文档，是以wiki形式不断更新的，当然在连线的情况下你可以在Aptana中直接访问这些文档。

最新版的Aptana（0.2.6）已经开始支持Debug了，不过要通过Firefox插件的形式。

Aptana是一个java开源项目（.NET程序员应该扪心自问了吧），现在还在beta阶段（从版本号你就可以看出来了）。所以它是跨平台的。你在windows上运行它可能会觉得有一点点慢（比VS快多了）。其实Aptana的内存占用很少，才2M多，不过JVM...我就不想说什么了。

幸运的是你可以通过javascript扩展它，这里是它的API。

Aptana还有太多让人惊艳的地方，你一定要自己用过了才知道。

JavaScript调试工具
第一个：Microsoft Script Debugger: 集成在IE中的一款很原始的调试工具，具备基本的调试功能，除了可以用于调试客户端脚本，还能调试在Microsoft IIS上运行的服务器端脚本。该工具命令窗口是基于文本的，针对VBScript和IE环境进行调试会更加适用。

第二个：Firefox JavaScript Console:可以记录JavaScript中出现的所有警告和错误，诊断出大多数错误。工具比较简单实用。

第三个：Venkman: 一个基于Mozilla的浏览器的JavaScript调试环境，是Mozilla浏览器的一个扩展。Venkman基于Mozilla JavaScript调试API（js/jsd），js/jsd API 构成了 Netscape JavaScript Debugger 1.1的基础，Netscape浏览器4.x系统都提供了这个调试工具。Venkman是目前比较流行的JavaScript调试工具。

xcp 2011-01-18 09:56 发表评论

table 动态添加行删除行

xcp — Wed, 22 Dec 2010 04:08:00 GMT

摘要: <%@ page language="java" pageEncoding="utf-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <% String path =&nb... 阅读全文

xcp 2010-12-22 12:08 发表评论

ie6下使用frameset或者iframe嵌入网页花屏去取X抽滚冻

xcp — Wed, 27 Oct 2010 04:35:00 GMT

一、ie6下使用框架嵌入网页花屏，其它浏览器正常

解决办法：的背景去掉就好了
如：/*background:url(../../images/main/article.png) right top repeat-y;
padding-right:4px;*/

终于解决这个垃圾问题了

二、使用框架（无论是frameset、frame、iframe）嵌套网页的时候，如果子网页的高度超过了预先设定的高度，会出现滚动条，也就是尺寸溢出，一般来说如果高度超了就出现垂直滚动条，宽度超了就出现水平滚动条，但是在IE6中，只要尺寸大于等于预定高度，就会两个滚动条一起出现，这好象是一个bug。

解决方法：
在子网页设置css如下：

html {
overflow-y:auto!important;
*overflow-y:scroll;
}

这段最重要的一点是设置overflow-y为scroll，这样强制出现垂直滚动条的话，水平滚动条就不会显示出来了，但如果宽度超出过多，水平滚动条还是会超出，这时可以考虑设置:overflow-x:hidden;，但相应的，这样用户就无法滚动子页面了。

之所以要加overflow-y:auto!important;，是因为IE7中已没有这个bug，并且firefox也能认到overflow-y这个据说是IE的私有属性……，所以我们还要把overflow设回来。

上面这个方法还可以有改进的地方
既然只有IE6有这个BUG那就只针对IE6写就行了
html {_overflow-y:scroll;}
_下划线是IE6专有的这样就又省了一行代码又提高了效率

xcp 2010-10-27 12:35 发表评论

身份证验证

xcp — Mon, 30 Aug 2010 09:07:00 GMT

一。常用的身份证验证

xcp 2010-08-30 17:07 发表评论

JavaScript API 对象参考手册

xcp — Mon, 09 Aug 2010 01:37:00 GMT

http://www.w3school.com.cn/js/jsref_match.asp

xcp 2010-08-09 09:37 发表评论

从JSON加载

xcp — Thu, 29 Jul 2010 11:23:00 GMT

从JSON加载树需要有JSON对象或者文件,并且使用以下方法加载:
tree.loadJSONObject(JSON_OBJECT);//for loading from script object
tree.loadJSON(FILE);//for loading from file

loadJSON指定一个文件路径就可以了。。

loadJSONObject有两种：
第一种在服务端设定返回协议，返回一个JSON对象

response.setContentType("application /json;charset=UTF-8");
  PrintWriter out= response.getWriter();
          out.write(json);
          out.flush();
          out.close();

第二种就是返回一个字符串，用eval或者JSON提供的方法来搞定。。。

var jsondate = eval('(' + json + ')');

从JS数组加载

文章出处：飞诺网(www.firnow.com):http://dev.firnow.com/course/3_program/java/javashl/20090820/169311_4.html

tree.loadJSArrayFile(FILE);//for loading from file
tree.loadJSArray(ARRAY);//for loading from array object

xcp 2010-07-29 19:23 发表评论

常用ＣＳＳ属性

xcp — Tue, 20 Jul 2010 02:18:00 GMT

1.点击链接的虚线框
    1)．a：focus{ outline:none }来设置点击链接时是不显示虚线框
    2)．a：focus{background:#555;}来设置虚线显示样式
    3).   用图片做为链接后，在图片的周围出现了一个带颜色边框，其实是由border属性来控制的。要删除边框，需要在图片标签里加上border=“0“。用 border="0">就去掉了。可是当点击图片时，又出现了虚线框，这就是链接on focus的问题,与图片无关,去掉虚线框可用onfocus=this.blur(); >解决.

xcp 2010-07-20 10:18 发表评论

Content-type 的说明 ,即 HTTP请求头的类型有哪些?

xcp — Mon, 05 Jul 2010 12:21:00 GMT

摘要: 'hqx' => 'application/mac-binhex40', 'cpt' => 'application/mac-compactpro', 'doc' => 'application/msword', 'bin' => 'application/octet-stream', ... 阅读全文

xcp 2010-07-05 20:21 发表评论

javascript数据类型转换

xcp — Fri, 11 Jun 2010 02:03:00 GMT

parseFloat 转换成浮点数
parseInt 转换成整数.

这两个函数都有些容错性的,比如"123abc"会变成123.
如果楼主希望更准确一些,其实可以判断一下,然后用eval,像这样

不过也可以使用这样的方法:
var a = "234" ;
a = a.replace(/(^[\\s]*)|([\\s]*$)/g, "");
if( a !="" && !isNaN( a ) )
{//如果是数字
a = eval( a )
}
else
{//如果不是数字
a = null
}

javascript有两种数据类型的转换方法：一种是将整个值从一种类型转换为另一种数据类型（称作基本数据类型转换），另一种方法是从一个值中提取另一种类型的值，并完成转换工作。

基本数据类型转换的三种方法：

1.转换为字符型：String(); 例：String(678)的结果为"678"
2.转换为数值型：Number(); 例：Number("678")的结果为678
3.转换为布尔型：Boolean(); 例：Boolean("aaa")的结果为true

从一个值中提取另一种类型的值的方法：

1.提取字符串中的整数：parseInt(); 例：parseInt("123zhang")的结果为123
2.提取字符串中的浮点数：parseFloat(); 例：parseFloat("0.55zhang")的结果为0.55
3.执行用字符串表示的一段javascript代码：eval(); 例：zhang=eval("1+1")的结果zhang=2

xcp 2010-06-11 10:03 发表评论

Javascript文档对象结构

xcp — Sat, 29 May 2010 09:37:00 GMT

Javascript文档对象结构

浏览器对象 navigator
屏幕对象 screen
窗口对象 window
　历史对象   history
　地址对象   location
　框架对象   frames[]; Frame
　文档对象   document
　　连接对象    anchors[]; links[]; Link
　　Java小程序对象   applets[]
　　插件对象    embeds[]
　　图片对象     images[]; Image
　　表单对象    forms[]; Form
　　　按钮对象     Button
　　　复选框对象    Checkbox
　　　表单元素对象    elements[]; Element
　　　隐藏对象     Hidden
　　　密码输入区对象    Password
　　　单选域对象    Radio
　　　重置按钮对象    Reset
　　　选择区（下拉菜单、列表）对象 Select
　　　　选择项对象     options[]; Option
　　　提交按钮对象    Submit
　　　文本框对象    Text
　　　多行文本输入区对象   Textarea

xcp 2010-05-29 17:37 发表评论

BlogJava-J2EE社区-随笔分类-Javascript

解决ajax跨域访问问题

微博返回顶部

javaScript 获取窗口左右宽高大小 大全

判断 iframe 是否加载完成的完美方法

得到当前对象的EVent

锚点是什么？锚点的使用

javascript 用var和不用var声明的变量区别

img标签的usemap的用法

7款Flash和Javascript网页视频播放器

1. Videobox

2. Panda

3. OpenVideoPlayer

4. Xe-VideoGalV3 FX

5. ToobPlayer

6. FlowPlayer

7. JCPlayer (演示地址)

不可多得的Javascript(AJAX)开发工具 － Aptana

table 动态 添加行 删除行

ie6下 使用frameset或者iframe嵌入 网页花屏 去取X抽滚冻

身份证验证

JavaScript API 对象参考手册

从JSON加载

常用ＣＳＳ属性

Content-type 的说明 ,即 HTTP请求头的类型有哪些?

javascript数据类型转换

Javascript文档对象结构

javaScript 获取窗口左右宽高大小　大全

不可多得的Javascript(AJAX)开发工具－ Aptana

table 动态添加行删除行

ie6下使用frameset或者iframe嵌入网页花屏去取X抽滚冻