Browsed by
标签: AJAX

Javascript 装载和执行

Javascript 装载和执行

一两个月前在淘宝内网里看到一个优化Javascript代码的竞赛,发现有不少的人对Javascript的执行和装载的基础并不懂,所以,从那天起我就想写一篇文章,但一直耽搁了。自上篇《浏览器渲染原理简介》,正好也可以承前启后。

首先,我想说一下Javascript的装载和执行。通常来说,浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)。于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入,并依次执行。

因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载js文件,因为这是js文件的特殊性造成的。所以,如果你的javascript想操作后面的DOM元素,基本上来说,浏览器都会报错说对象找不到。因为Javascript执行时,后面的HTML被阻塞住了,DOM树时还没有后面的DOM结点。所以程序也就报错了。

传统的方式

所以,当你写在代码中写下如下的代码:

<script type="text/javascript"
        src="https://coolshell.cn/asyncjs/alert.js"></script>

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (66 人打了分,平均分: 4.27 )
Loading...
一次Ajax查错的经历

一次Ajax查错的经历

先说故事,再说想法吧。

我有一朋友做网站,用jQuery的Ajax方法从后端载入一段HTML代码然后动态插入到网页的Div元件中。这个东西太普遍了。jQuery强大的load方法可以完成这个事情。朋友的代码是这么写的:

[javascript]var tab = jQuery("#dynamic_tab");
var url = "/list_ajax/";
tab.load(url);[/javascript]

简单到不能再简单了。在Chrome,Firefox,Safari下运行一点问题也没有,只有IE不行,不管是IE7,IE8,还是IE9。问题的症壮是,使用IE访问那个Ajax的链接,没有问题,但是在jQuery的Ajax方法返回了“undefined”的respons对象。没有任何报错!

怎么搞也搞不定,只好Google了一下——“jQuery load IE”,一看,很多人都在问这个问题。于是开始了散弹枪编程方式

排在第一的就是StackOverflow被浏览了33K次的这个问题:jQuery’s .load() not working in IE – but fine in Firefox, Chrome and Safari,答案没有被打勾(不靠谱),StackOverflow还有很多人问相似的问题,不过都没有答案。不管三七二十一,先试了一下,散弹枪嘛。试了半天都没有用。

然后上Google查,又看到有人说的IE缓存的问题,什么,要把cache设置成false,或是用下面的方法来解决:

[javascript]var tab = jQuery("#dynamic_tab");
var fuckie = Math.random();
var url = "/list_ajax/"+"?fuckie="+fuckie;
tab.load(url);[/javascript]

反正还是一样,统统不Work,几乎所有的都试了,都不Work。搞了一天的朋友恼怒道:“Microsoft应该快点倒闭吧,产品太烂了”。IE的确是太烂了。

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (35 人打了分,平均分: 3.86 )
Loading...
一些非常有意思的杂项资源

一些非常有意思的杂项资源

下面是一些最近在互联网上看到的一些各式各样的资源和文章,当然,都是英文社区的,本来想每一个写一篇文章,但是觉得一篇文章一句话真没劲,所以,把这些东西合并写成一篇文章,这样有利于减轻本站的负载,也有利于节省网络带宽,同样,也就节省了能力和电力,因此也就很环保,很低碳。呵呵。

  • 说到这些很酷很炫的东西,大家一定会想到使用Flash,不过,目前的Flash正在受到HTML5的强力挑战,目前,对于HTML5的展示网站很多,让我们看到了HTML5完全可以做出Flash的样子,比如前些天本站说到的这个演示,还有给大家展示的纯HTML5的小游戏,不过,那些都是一些演示和展示罢了。今天在网上看到一个更强大的HTML5游戏,相当有可玩性,大家不妨一去试玩:http://www.phoboslab.org/biolab/

  • HTML5 可以应用的还不只是游戏,这不,有文章指出,用VexFlow还可以很轻松地在网页上发布乐谱。而这个网页还可以让你制作Hi-PoP音乐。

Rendered music

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (18 人打了分,平均分: 2.67 )
Loading...
Web版的VNC

Web版的VNC

想在Web上远程控制远端的电脑吗?Guacamole开源项目提供了这样的解决方案,其主要使用了HTML5和Ajax。下面是一个载图。如果你能够访问Youtube的话,你可以看看这个视频

Guacamole 一个 HTML5 + JavaScript (AJAX) 的 VNC 客户端

是啊,HTML5强大了,什么都能干了,连Flash也要取代了。现如今,什么事都在往Web上移植了,Chrome也OS了。可以预见在HTML5出来后,未来这样的事情会越来越多,以后的一些移动和掌上设备真的只需要一个Web Browsers.

好烂啊有点差凑合看看还不错很精彩 (9 人打了分,平均分: 2.33 )
Loading...
Ajax开发利器UIzard

Ajax开发利器UIzard

正如UIzard这个名字所暗示的,这是一个User Interface 的Wizard,从字面上理解,这是一个做界面的向导。这有什么奇怪的,Dreamwave之流已经是相当的成熟了,还能好得过它?是的,这个开源的项目,也许并没有那些商业软件那么成熟,不过,我想告诉你的是,这个开源软件绝对是值得我们重点关注的一个软件。

你可以理解为这是一个Web开发的IDE,不过其集成了Ajax方面的东西。这并不仅仅简单的是那种“所见即所得”的编辑器。而且,它也不信仅可以让那些非程序员非常简单地创建一个从前端到后端的Web应用,而且,他还可以让你连接数据库,创建非常复杂的布局和时间线,甚至于一些套件(白板,在线的类Word,Excel,PPT等功能),所有这些,你只需要简单的点几下按钮就可以了。真是相当的强大。(下面是个抓图)

UIzard

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (9 人打了分,平均分: 1.89 )
Loading...
7个免费强大的Ajax文件管理器

7个免费强大的Ajax文件管理器

如果你正在开发一个WEB应用,需要一个不错的强大的文件管理器,并且可以简单的定制,那么,下面的这七个免费开源的文件管理器你一会喜欢的。这些文件管理器都很强大,他们全部都支持PHP,Javascript和Ajax,有几个还支持别的WEB开发语言。这些管理理可以让你完成目录文件浏览,搜索,上传/下载,编辑,拷贝,移动,删除等等文件操作功能。

1. AjaXplorer

Ajax File Manager

AjaXplorer 是一个免费的 Ajax 文件管理器,其很容易安装。而且它的布局很丰富,可以用于多种应用,比如:文件管理,文件共享,图片库,代码库等等。不过它只支持(4 呀 5) ,不支持数据库。

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (11 人打了分,平均分: 2.18 )
Loading...
10个基于Ajax的PHP Webmail客户端

10个基于Ajax的PHP Webmail客户端

 下面是十个非常不错的,使用Ajax技术的用PHP开发Webmail的客户端。大家在使用的时候请注意其license。

1. RoundCube

RoundCube Webmail 是一个基于浏览器的IMAP 客户端,其提供了丰富的功能,包含MIME,地址本,文件夹操作,邮件搜索和拼写检查。 RoundCube Webmail 由 PHP写成,需要 MySQL 或 Postgres 数据库的支持。其UI完全遵守于XHTML 和 CSS 2.

webmail1

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (13 人打了分,平均分: 2.23 )
Loading...
十个开源的Javascript框架

十个开源的Javascript框架

下面是十个最牛的也是最流行的Javascript框架。它们完全可以担任目前世界上几乎所有一些和Ajax技术相关的和图形界面相关的一切功能。

  • jQuery

  • http://jquery.com/

    如果今天你还不知道jQuery的话,那么作为一个程序员你可能真的是从火星来的了。这恐怕是Ajax中应用最广的框架。包括了许多很不错的UI组件,做出网页的效果也是令人称道的。不过,他最牛的是它的文件大小,只有区区18K,实在是居家旅行,网站开发之首选。

     下面是一个日历控件,很不错吧。

     

    阅读全文 Read More

    好烂啊有点差凑合看看还不错很精彩 (17 人打了分,平均分: 2.59 )
    Loading...
    80个优秀的AJAX方案

    80个优秀的AJAX方案

    Ajax作为一种WEB上的技术,已经广被开发人员接受,在过去的两三年内,互联网上涌现出了很多很多的很有创意的Ajax的解决方案,令人赞叹。这里,介绍了80以上的AJAX用法以及其脚本资源,希望对你的开发有帮助。

    Auto Complete Scripts

    1. AJAX AutoSuggest

    阅读全文 Read More

    好烂啊有点差凑合看看还不错很精彩 (11 人打了分,平均分: 1.91 )
    Loading...
    你应该知道的20个Ajax技术(11-20)

    你应该知道的20个Ajax技术(11-20)

    11) 表单字段帮助信息的自动提示

    增强WEB表单的Usability有很多很多的方法,在网上一搜一大片,然后有些时候,用户会被表单搞得很混乱,而且,不同的用户会对表单有不同的理解,其输入也是千奇百怪。所以,为表单字段增加一下自动帮助信息的提示绝对是非常不错的选择。这点在淘宝网上表现得比较出现。下面是一个非常简单短小的教程。

    http://woork.blogspot.com/2008/04/improve-form-usability-with-auto.html

     

    阅读全文 Read More

    好烂啊有点差凑合看看还不错很精彩 (13 人打了分,平均分: 2.38 )
    Loading...