無標題文檔

如何调试 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 记录。

Javascript 中的 Generics

  • 原版本文章理解有误,现已初步更正 *

Generics 在很多程序设计语言中都被称之为 「泛型」 ,而 Javascript 为动态类型的语言,所以称为「一般化」更为合适些。

在 Javascript 的对象模型中,函数(Function)也是对象的一种。顶层函数同时可以通过 call 和 apply 调用不属于对象自身的方法。

同时,Javascrpt 中有很多对象都会有相同的属性,比如 nodeList、Array、arguments 都有 length 属性,都可以使用下标(比如 arguments[0])。

考虑 forEach 的实现( 详细

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(func) {
        var len = this.length;
        if (typeof func != "function") {
            throw new TypeError();
        }
        var thisp = arguments[1];
        for (var i = 0; i < len; i++) {
            if (i in this) {
                func.call(thisp, this[i], i, this);
            }
        }
    };
}

根据上述的代码可以看到,虽然其为 Array 对象的方法,但函数内部仅仅调用了 this 的 length(this.length) 和 下标(this[i])两个属性。那么,期前举到的例子中,nodeList 以及 arguments 也可以应用于此函数(方法):

[].forEach.call(document.getElementsByTagName('li'), function() {...});

或者

Array.prototype.foreach.call(document.getElementsByTagName('li'), function() {...});

上面的 forEach 函数就被称之为 Generic 函数(A generic function)。下面是 ECMAScript 规范中,有关 Generices 的描述

A generic function is a function object that performs run-time dispatch to
one of several attached methods based on the actual types of the argument
values and the signatures of the available methods.

Generic 有很多的用处,对象只要支持被调用函数所需要调用的属性,就可以复用,而不需要了解此函数针对的对象类型是什么。比如,上述的 Array.forEach 虽然针对的是 Array 对象,但是仍然可以针对 nodeList 工作得很好。

其实在 ECMAScript 规范 中,定义了很多 generic 函数。以上述的 Array 对象为例,join、indexOf、lastIndexOf、forEach、map、filter、some、every 等都为 generic 函数,这可以在我们以后的编程中会很方便。

--Split--

感谢 lifesinger 兄 的解释

JavaScript 中方法分为 Generic method 和 Instance method。
Instance method,依附在实例上的方法,翻译为实例方法。Generic 
method,直接依附于对象上,与实例方法相比较,可以称为泛化方法。

PHP5.3 新特性 之 命名空间

上次说过 ,PHP 5.3 的一个新的重要特性就是 命名空间 (namespace)。

这一特性在 PHP5.0x 时候就提出过,后来被取消并安排在 PHP6 中实现。而此次又再次「提前」到了 PHP5.3 发布,可见开发人员对其的重视以及谨慎的态度。

官方发布时说明 文档的内容 可能已过期(documentation maybe out dated),所以在这里简单的说明命名空间的用法:首先是声明一个命名空间,加入了新的关键字 namespace ,其应在类文件的开头

<?php
namespace Project::Module; 

class User {
    const STATUS_OK = true;

    function register($data) {
        ...
    }
    
    ...
}

然后在控制器中(可能是其他文件)就可以这样调用

$user = new Project::Module::User(); 
$user->register($register_info);

的确与平常的并无两样,但是我们可以将两个相互独立的类联系起来。比如

Project::Module::User; 
Project::Module::Blog;

这样就能从语言本身更容易描述和理解变量、类之间的关系,从而避免了「传统」上的 Project_Module_Blog 这样冗长的命名方式。

上面的说明可能很难说明使用命名空间带来了什么好处,新增加的 use 和 as 关键字或许能更好的说明问题。use 和 as 语句可以引用和声明 命名空间的「别名」。比如,上述的控制器中实例化类的代码可以这样写

use Project::Module;
$user = new Module::User(); 
$user->register($register_info);

甚至

use Project::Module::User as ModuleUser;
$user = new ModuleUser; 
$user->register($register_info);

类中的常量也可以通过命名空间访问,比如上述类中的 STATUS_OK 就可以通过命名空间

Project::Module::User::STATUS_OK

访问。进一步的,也可以用别名简化那么长的「变量名称」

use Project::Module::User::STATUS_OK as STATUS_OK;
echo STATUS_OK;

顺便提下「 超空间(The Global Namespace) 」的概念。所谓的「超空间」,就是没有指定命名空间的变量、类和函数。比如

function foo() {
    ...
}

这的函数,可以使用 foo() 执行的同时,也可以使用 ::foo(); 这样执行。

最后,配合使用 autoload 函数即可载入指定命名空间的类。简单的函数如下

function __autoload( $classname ) {
    $classname = strtolower( $classname );
    $classname = str_replace( '::', DIRECTORY_SEPARATOR, $classname );
    require_once( dirname( __FILE__ ) . '/' . $classname . '.class.php' );
}

这样,比如调用

__autoload('Project::Module::User');

就可以自动载入 Project_Module_User.class.php 文件(虽然这样看起来并不方便多少)。

我的照片

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

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

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

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

分类

搜索

文章