使用 jQuery.windowName 进行 ajax 提交数据时的一个注意事项

0.9.1 版本来说明,开头有这么几行代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function ($) {
$ = $ || window.jQuery;
var origAjax = $.ajax, idx = 0;
$.extend({
ajax: function (s) {
var remote = /^(?:\w+:)?\/\/([^\/?#]+)/,
data = '', status = '', requestDone = false,
xhr = null, type = s.type.toUpperCase(), ival = setTimeout(function () {}, 0),
onreadystatechange = null, success = null, complete = null,
localdom = remote.exec(s.url);
if (s.windowname || (type === 'POST' && localdom && localdom[1] !== location.host)) {

// more code...
} else {
return origAjax.apply(this, arguments);
}
}
});
})():

留意第 11 行的判断条件,当不满足的时候将使用回普通的非跨域的 ajax 提交。

那行的判断条件是:配置中存在着为 true 的 windowname 属性或是 post 类型的提交且存在着非同域的有效提交地址。

所以当想确保使用跨域 ajax 提交时,需要确保进入 if 分支才行,不然服务器那边用跨域的方式返回数据,js 这边却认为是非跨域的,结果就报错了。

由于测试的时候可能忘记了使用不同的域,所以最保险的方法是在 .ajax 方法中显式加上 windowname: 1

今天被测试机上的这个问题搞了 2 个小时,找到真相后欲哭无泪。

使用jquery windowname插件实现跨域提交的几个要点也提到些值得注意的地方。

IE9 下 jQuery 报 getElementsByTagName 不支持问题

在 IE9 下使用 jQuery 1.5 或更前的某些版本,可能会碰到类似这样的报错:

1
 "Object doesn't support this property or method..." for code elem.getElementsByTag("*")

debug 将会发现,那个时候 elem 元素会是 DocumentFragMent,而在 IE9 中没对这个元素提供 getElementsByTagName 这个方法。

解决方法则很简单,把 jQuery 的版本升级上去即可。

参考链接

jQuery tmpl

动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。

这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。

如同为解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版,JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl,现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里,内置的 demo 也尽情地演示了各种用法。

就我自己的几次使用,感觉很不错,用更加直观方面的 HTML 写法而不是 JavaScript 拼凑 来写结构,然后用 JSON 变量来占位的方式来填充数据,代码看起来好多了。

Update

需要说明的是,由于我相对熟悉的是 PHP,尽管是使用 $ 作为变量开始符号,但与 tmpl 的 ${} 标识没有冲突;而 JSP 本身使用 ${} 来作为变量内容输出,所以在 JSP 会导致模版无法正常工作,这里是一些相关问答

解决方法:

  1. 禁用(本项目) JSP 的 ${} 标签功能, 方法见相关问答;但明显代价太大。
  2. 对 tmpl 中的 ${} 进行转义,即使用 \${}的方式;这样将静态 demo 转为 开发版本需要细心更正一下。
  3. 不想用模版的就依然手动拼字符串;仍想用模版的就切换到别的不是使用 ${} 来解析的模版。

make a “view source” button

为页面添加一点查看源码的功能

各家浏览器皆有查看源码的功能,就我用来,还是IE家的最丑,Chrome的漂亮。不过此处说的是为页面建立一个button,点击此即可显示源码,参考自此文,有所修改。

效果如下:
效果图
继续阅读“make a “view source” button”

添加页内跳转

为博客添加回到顶部、直达底部、阅读评论这三个快速页内跳转

页内跳转,在我这里,其实就是锚跳转(包括回到顶部、直达底部、阅读评论这三个),只是做了些美化和 JS 效果而已,最终效果见页面右侧(单页和非单页有所不同)。

一开始,我是直接把 HTML/PHP 代码放进 footer.php 文件中的,后来采用 hook 的方法。虽说,就得到的 HTML 结构来说,可能不是非常好;但个人感觉比直接修改 footer.php 好。

HTML/PHP 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
    // add updown access, needs hook wp_footer() in footer.php
    function up_down() {
?>
    <div id="updown">
        <a href="#" title="返回顶部" id="goUp"></a>
        <?php if(is_single()):?>
        <a href="#comments" title="阅读评论" id="goComments"></a>
        <?php endif;?>
        <a href="#footer" title="直达底部" id="goDown"></a>
    </div>
<?php
    }
    add_action('wp_footer', 'up_down');
?>

使用这种方法,需要 footer.php 文件中有调用到 wp_footer() 函数,否则是无法 hook 的。
继续阅读“添加页内跳转”

为跳转添加加载提示

loading直观地来说,就是指左边所展示的这玩意。这个东西很多博客上都有,而且添加起来也是一件很简单的事情。

我这里只是对博客文章post内的链接添加,别的没有。

代码很简单,如下:

将以上代码加到主题中的JS文件即可。

1
2
3
4
5
6
7
8
9
10
11
jQuery(document).ready(function($) {
    $('.post a').click(function(){
    var text = $(this).text();
    $(this).fadeOut('slow')
        .text("正在努力加载…")
        .fadeIn('slow')
        .delay(3000)
        .fadeOut('slow', function(){$(this).text(text);})
        .fadeIn('slow');
    });
});

由于以上代码是jQuery的,所以必须保证在主题的JS文件前已加载了jQuery库,如果还没,可以使用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

来加载google托管的jQuery库;或者加载自己博客上的jQuery库。

Update:

继续阅读“为跳转添加加载提示”