[转载]AJAX相关知识

最新推荐文章于 2024-04-26 17:07:18 发布

王的盛饭

最新推荐文章于 2024-04-26 17:07:18 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： ajax xmlhttprequest cgi xml javascript function

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

引自：http://searchwebservices.techtarget.com.cn/tips/277/2099777.shtml

XMLHttpRequest 和 XML DOM 的 JavaScript 基础

首先，我们需要声明一些规则。现在常用的浏览器(IE, Mozilla, Safari, Opera)都特别提供了对 XMLHttpRequest 对象的支持，同时也广泛支持 XML DOM，虽然和往常一样:微软(Microsoft)使用了一种稍微有些不同的实现并有一些需要特殊注意的地方。和我们那些更进取的朋友直接实现 XMLHttpRequest 不同，IE需要你创建一个具有相同属性的 ActiveXObject 对象的实例。Apple Developer Connection 网站上有一篇非常好的文章总览了 XMLHttpRequest，并列举了它的全部特性。

　　下面是个基础的例子:

var req;
function postXML(xmlDoc) {
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
else return; // fall on our sword
req.open(method, serverURI);
req.setRequestHeader('content-type', 'text/xml');
req.onreadystatechange = xmlPosted;
req.send(xmlDoc);
}
function xmlPosted() {
if (req.readyState != 4) return;
if (req.status == 200) {
var result = req.responseXML;
} else {
// fall on our sword
}
}

　　这个强大的工具应用前景非常广泛，而且对其潜在应用方面的探索才刚刚开始。但是在任何准备在网上建立XML园地的人失控前，我建议我们先架起一个安全网以防止任何抱负极高的人摔断他们的脖子。

　　JavaScript错误处理基础

　　JavaScript在其早期版本就支持简单的错误处理，但是非常简陋，只有少数的特性，并且实现的很差。新近的浏览器不仅支持了类似于C++和Java用于错误处理的关键字try/catch/finally，而且实现了onerror事件提供捕捉在运行期产生的任何错误。其使用方法非常简单而且直接:

function riskyBusiness() {
try {
riskyOperation1();
riskyOperation2();
} catch (e) {
// e是错误类型对象
// 至少有两个属性：name及message
} finally {
// 清理工作
}
}
window.onerror = handleError; // 架起捕获错误的安全网
function handleError(message, URI, line) {
// 提示用户，该页可能不能正确回应
return true; // 这将终止默认信息
}

一个实例:将客户端的错误传递个服务器

　　现在我们已经了解了XMLHttpRequest和JavaScript错误处理的基础，让我们通过一个简单的例子来看一下如何将这两个联系在一起使用。你也许会认为JavaScript错误应该很容易通过状态栏的黄色三角认出，但是我仍然在几个可靠组织的面向公众的网站上发现他们躲过了质量评估部门。

　　因此，在这我将提供一种捕捉错误并将他们在服务器上记录，希望能够提醒某个人去修改这些错误。首先，我们考虑客户端。客户端需要提供一个产生日志记录的类，这个类在使用时必须只实例化一次，并能够透明地处理那些复杂的细节。

　　我们首先创建构造器:

// 一个类构造方法
function Logger() {
// 域
this.req;

// 方法
this.errorToXML = errorToXML;
this.log = log;
}

　　其次，我们定义一个将Error对象转成XML的方法。默认情况下，Error对象只有两个属性:name和message，但我们需要核对第三个可能很有用属性location。

// 将一个错误映射到XML文档
function errorToXML(err) {
var xml = '<?xml version="1.0"?>/n' +
'<error>/n' +
'<name>' + err.name + '</name>/n' +
'<message>' + err.message + '</message>/n';
if (err.location) xml += '<location>' + err.location + '</location>';
xml += '</error>';
return xml;
}

　　接着是log方法。这是这段脚本将上述两个原则(XMLHttpRequest和XML DOM)结合在一起的最基础部分。注意我们使用了POST方法。在这我本质上是创建了一个只写的定制的web服务，在每一次成功的请求时它会建立一些新纪录。因此，使用POST是唯一可行的方法。

// Logger类的日记方法
function log(err) {
// 嗅探环境
if (window.XMLHttpRequest) this.req = new XMLHttpRequest();
else if (window.ActiveXObject) this.req =
new ActiveXObject("Microsoft.XMLHTTP");
else return; // 无功而返
// 确定方式及URI
this.req.open("POST", "/cgi-bin/AjaxLogger.cgi");
// 设定request的headers。如果错误出现在一个所包含的.js文件中，
//REFERER 这个最顶层的URI可能会与产生错误的地方不一致
this.req.setRequestHeader('REFERER', location.href);
this.req.setRequestHeader('content-type', 'text/xml');
// 请求完毕时要调用的函数
this.req.onreadystatechange = errorLogged;
this.req.send(this.errorToXML(err));
// 如果不能在10秒在完成请求，
// 需事务处理
this.timeout = window.setTimeout("abortLog();", 10000);
}

　　我们首先创建构造器:

// 一个类构造方法
function Logger() {
// 域
this.req;

// 方法
this.errorToXML = errorToXML;
this.log = log;
}

　　其次，我们定义一个将Error对象转成XML的方法。默认情况下，Error对象只有两个属性:name和message，但我们需要核对第三个可能很有用属性location。

　　我们首先创建构造器:

// 一个类构造方法
function Logger() {
// 域
this.req;

// 方法
this.errorToXML = errorToXML;
this.log = log;
}

　　其次，我们定义一个将Error对象转成XML的方法。默认情况下，Error对象只有两个属性:name和message，但我们需要核对第三个可能很有用属性location。

　　我们首先创建构造器:

// 一个类构造方法
function Logger() {
// 域
this.req;

// 方法
this.errorToXML = errorToXML;
this.log = log;
}

　　其次，我们定义一个将Error对象转成XML的方法。默认情况下，Error对象只有两个属性:name和message，但我们需要核对第三个可能很有用属性location。

　　我们首先创建构造器:

// 一个类构造方法
function Logger() {
// 域
this.req;

// 方法
this.errorToXML = errorToXML;
this.log = log;
}

　　其次，我们定义一个将Error对象转成XML的方法。默认情况下，Error对象只有两个属性:name和message，但我们需要核对第三个可能很有用属性location。

最后是实例化日志记录类。注意这个类只能有一个实例。

// logger只能有一个实例
var logger = new Logger();

　　最后还有两个我们的类里调用的方法。如果在记录错误时发生错误，除了告诉用户我们没有其它的办法。如果运气好的话，这种情况并不会出现。因为浏览器的事件(event)不会拥有我们的对象的引用，但是会引用我们创建的logger实例，所以这两个方法不是日志记录类的方法。

// 尽管已经尝试，但如果有连接错误，放弃吧
function abortLog() {
logger.req.abort();
alert("Attempt to log the error timed out.");
}

// 当request状态有变化则调用
function errorLogged() {
if (logger.req.readyState != 4) return;
window.clearTimeout(logger.timeout);
// 请求完毕
if (logger.req.status >= 400)
alert('Attempt to log the error failed.');
}

以上所有的代码都可以写在一个.js文件里，你可以在任何一个(或者所有)的页面里引入这个文件。下面是这个例子展示了如何引入并使用这个文件:

　　现在我们已经知道如何将日志和HTML页面整合，剩下的就是如何接收和解析客户端传递到服务器的消息。我使用了大家易接受的CGI脚本来实现这个功能，在这个脚本里我用了XML::Simple(我最喜欢的模块之一)来解析提交上来的数据，并且用CGI::Carp将结果直接写到httpd(http服务程序)的错误日志里，这样你的系统管理员就不用去监控另一个日志。这个脚本里还包含了一些好的例子来说明如何对不同的成功和失败条件编写对应的响应代码。

现在我们已经知道如何将日志和HTML页面整合，剩下的就是如何接收和解析客户端传递到服务器的消息。我使用了大家易接受的CGI脚本来实现这个功能，在这个脚本里我用了XML::Simple（我最喜欢的模块之一）来解析提交上来的数据，并且用CGI::Carp将结果直接写到httpd（http服务程序）的错误日志里，这样你的系统管理员就不用去监控另一个日志。这个脚本里还包含了一些好的例子来说明如何对不同的成功和失败条件编写对应的响应代码。