無標題文檔

如何调试 XMLHttpRequest

在编写 XMLHttpRequest 请求时,需要掌握服务器端返回的内容。

针对 Firefox 浏览器,我们常用的 Firebug 就能非常好的完成这一任务。打开 Firebug 针对目标站点的网络监视选项,则在每次使用 XMLHttpRequest 时,控制台会增加条相应的信息(同时会标明是 GET 方法还是 POST 方法)。

https://friable.rocks/_/2008_08_11/1218449715.gif

点击该信息条目后,就会出现 Params、Headers 以及 Response 三个标签,分别对应的是 HTTP 参数、HTTP 头、以及 回应信息。其中,Response 信息就是服务器返回的信息(图示中为服务器返回的 JSON 格式的数据)。

https://friable.rocks/_/2008_08_13/1218628504.png

另外,Headers 标签中显示的是 HTTP 头信息(分别为请求头以及回应头),在这里可以找到额外有用的信息,比如服务器信息、缓存信息、浏览器发送的 Cookie 头,以及 Content-type 属性(内容属性,可能会包含 charset 参数,指明字符编码)。

https://friable.rocks/_/2008_08_13/1218624529.png

同时,在控制台信息比较多时,会显得比较杂乱。Firebug 还专门提供的网络监控面板,根据上图所示有个 XHR 标签,它主要的功能就是提供异步调用监测。

针对 Explorer 等浏览器,监视 XMLHttpRequest 需要第三方工具的支持。在这里推荐的是 Fiddler ,这一强大的网络监视工具。

在安装好 Fidder 以后,先打开 Exploer 浏览器,到需要监视 Exploer 浏览器的网络使用况时,打开 Fidder(通常在 Exploer 工具栏上有相应的启动按钮),就可以看到如下的界面

https://friable.rocks/_/2008_08_13/1218628924.png

选择某个具体的项目,查看其相应的内容。比如选取 Raw 按钮,则可以看到原始的 HTTP 相应记录

https://friable.rocks/_/2008_08_13/1218628608.png

这样,使用 Fidder 就可以获取某个针对特定程序的 HTTP 记录。

OpenSearch 初探

很多现代的浏览器在地址栏的右边有个搜索框,默认的安装有 Google 搜索等。如下图所示

https://friable.rocks/_/2008_06_17/1213670001.png

其实这是 OpenSearch 的一个应用,只要编写相应的微格式的 xml 文件,就可以制定相应的搜索框。

参考 OpenSearch 的定义文档 ,可以基本获得基本的 xml 格式。比如某个典型的的搜索 xml 文件可以这样指定。

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <InputEncoding>utf-8</InputEncoding>
    <ShortName>ShortName</ShortName>
    <Description>Description</Description>
    <Image type="image/vnd.microsoft.icon">favicon</Image>
    <Url type="text/html" template="http://who.am.i/search?word={searchTerms}"/>  
</OpenSearchDescription>

上面的 xml 文件很容易理解,除了固定的 xml 根以外,其他的定义从字面上就可以理解:

  • InputEncoding 指定搜索的编码,根据网站的实际情况而定
  • ShortName 这个是搜索的短名称,比如「Google 搜索」
  • Description 针对这个搜索框的描述,比如「淘宝购物搜索 - 只有你想不到,没有你淘不到」
  • Image 类似网页的 favicon ,用于标识搜索
  • Url 这个是最重要的参数,指定搜索的链接。它有很多参数,一般使用 {searchTerms} 参数指定搜索词即可。参数 type=\"text/html\" 注明返回的是页面(浏览器会跳转到这个页面),如果是其他格式就会使用相应默认程序打开(比如 type=\"application/rss+xml\" 就会使用 RSS 阅读器打开)。

编写 OpenSearch 的 xml 格式就完成了,详细信息可以参阅其 OpenSearch 定义文档

下面要在页面中加入这个搜索,基本上可以分为两种方式。分别是页面的在 head 中加入 link 标记(类似 RSS),以及使用 Javascript 方式添加(比如定义某个按钮触发)。

加入 link 标记非常简单,格式如下

<link rel="search" type="application/opensearchdescription+xml" 
            href="http://who.am.i/search.xml" title="ShortName" />

与 RSS 相似,rel 和 type 是固定的,我们主要指定 href (上述 xml 的 url 路径,保险起见使用绝对路径,即 http:// 开头)以及 title (也就是搜索的短标题)即可。

就这样,在 Explorer 以及 Firefox 中打开这个页面就可以看见相应的菜单了,如图所示

https://friable.rocks/_/2008_06_17/1213670018.png

使用 Javascript 添加比较麻烦(或许现在的情况会很好多)。我们主要会使用浏览器的扩展功能,在 Explorer 有个 window.external.AddSearchProvider 参数( 详细文档 )。

典型的调用方法如下

window.external.AddSearchProvider('http://who.am.i/search.xml');

参数中的链接就是上述 link 中的内容。在 Firefox 下可以使用

window.sidebar.addSearchEngine(
    "http://who.am.i/search.xml",  /* engine URL */
    "favicon.ico",  /* icon URL */
    "ShortName", /* engine name */
    "Description" );            /* category name */

参数和例子如示例代码中所述( 官方文档 )。值得注意的是在 Firefox2 版本以后已经「兼容」 Explorer 的 window.external.AddSearchProvider 调用方法( 详细信息 )。

那么我们对应的 Javascript 代码就可以这样编写(为了兼容 Firefox2 之前的版本,加入 else if 判断)

function addEngine()
{
    if (window.external || window.external.AddSearchProvider) {
        window.external.AddSearchProvider('http://who.am.i/search.xml');
    } else if (window.sidebar && window.sidebar.addSearchEngine) {
                window.sidebar.addSearchEngine(
                    "http://who.am.i/search.xml",
                    "favicon.ico",  /* icon URL */
                    "ShortName", /* engine name */
                    "Description" ); /* category name */
    }
}

这样,就可以将这个函数注册到某个链接或者按钮的点击事件中,就会跳出个确认框,如图

https://friable.rocks/_/2008_06_17/1213670034.png

用户点击确认以后,就加入到浏览器搜索框中了。

--EOF--

Firefox3 即将发布支付宝 的兄弟们正在完善对于 Firefox 的支持,在这里表示关注和支持。

使用 Google 工具栏追踪 Blog 留言

每个开 Blog 的兄弟都会时刻关注 Blog 上的留言,上次已经说道如何 使用 Gtalk 追踪网站的留言

在使用 Google 工具条时发现其实 Google 工具条本身也开放了 API 供用户调用。第一步要做的就是将用户留言做成 RSS 格式的输出(其实也就是 XML 格式,Wordpress 已经有这样的功能了)。

然后我们再写个针对 Google 工具条的 XML 文件即可。格式如下

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
    <button>
       <site>在这里设置点击按钮以后进入的网址</site>
       <title>我是按钮的标题</title>
       <description>我是按钮的描述</description>
       <feed refresh-interval="1800">RSS 地址</feed>
       <icon mode="base64" type="image/x-icon">
           base64 以后的 ico 文件内容
       </icon>
    </button>
</custombuttons>

具体的例子可以 参看这里 ,其中 title 与 description 不言而喻,是标题以及描述,最为重要的是 feed 标签。feed 的值就是任何的 RSS 链接,针对本文就是其留言的 RSS 地址。refresh-interval 属性是刷新的间隔时间,单位是秒。

然后我们可以根据 Google 工具栏提供的链接将我们已经做好的 XML 格式的按钮添加到 Google 工具条中。格式为

http://toolbar.google.com/buttons/add?url=<XML 文件 URL 地址>

https://friable.rocks/_/2009_11_05/362615738b19.jpg

访问这个生成的链接就可以加入到 Google 工具条了,效果如图上所示。比如

点击这里将 Gracecode.com 的文章加入 Google 工具条

最后,有关多的信息,可以参看 Google 工具条的 中文 API 文档

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章