标签归档：jQuery

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

以 0.9.1 版本来说明，开头有这么几行代码：

(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' & amp; & amp; localdom & amp; & amp; 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 或更前的某些版本，可能会碰到类似这样的报错：

 "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. 不想用模版的就依然手动拼字符串；仍想用模版的就切换到别的不是使用 ${} 来解析的模版。

添加页内跳转

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

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

HTML/PHP 代码

<?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文件即可。

[ccewln_javascript]
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’);
});
});
[/ccewln_javascript]

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

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

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

Update:

继续阅读 →