ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX应用程序开发入门小技巧
程序员文章站
2022-04-20 13:24:40
使用ajaxrequest进行ajax应用程序开发(1) - 初识ajaxrequest 前言 在发布了ajaxrequest类的几个版本之后，渐渐地有...
使用ajaxrequest进行ajax应用程序开发(1) - 初识ajaxrequest
前言
在发布了ajaxrequest类的几个版本之后，渐渐地有许多朋友用上了它，也有许多朋友问我有没有更详细的说明和示例。不过因为时间的问题以及我能想到的示例有限，一直没有多写几个示例。考虑了一下，决定写一个关于ajaxrequest的教程，希望对使用ajaxrequest类的朋友们有所帮助。
准备
在使用ajaxrequest进行ajax开发之前，你需要做以下准备：
准备知识：javascript基本语法，文档对象模型(dom)的相关知识，以及至少掌握一种后台编程的语言（我写的例子以asp为编程语言）。
准备工具：editplus或者其他文本编辑器（dreamweaver或者visual web developer也可以），以及本地测试用的web服务器（iis或者apache或者netbox或其他都可以）。
下载ajaxrequest类：你可以在http://www.xujiwei.cn/works/ajaxrequest/下载到最新版的ajaxrequest类。
要进行ajax开发，你需要了解js编程，这是ajax中j的需要，以及后台编程，这是需要在服务端进行动态处理，dom用来处理信息，将结果呈现给用户。而工具方面，文本编辑器可以选择你自己喜欢的，我比较喜欢用editplus。
至于测试用的web服务器，就取决于你所用的后台编程语言了，如asp或asp.net是iis，php可以选择apache等。运行asp的另外一个选择是netbox，不过netbox对utf-8支持不太好，如果不涉及非英文的输出，可以考虑选择这个轻量级的服务器软件。
至于为什么要在本地建立测试服务器而不是直接在浏览器中运行，是因为从一开始就在与服务器相近的环境中开发，可以在以后的开发过程中减少许多莫名的错误。
开始
在之后教程的例子中，我都将以js代码与xhtml代码分开的方式来书写，其中ajaxrequest类文件ajaxrequest.js放在例子代码的同一目录下。
hello,world!
按照惯例，以一个“hello,world!”来开始。
helloworld.htm
程序代码：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="xujiwei" />
<meta name="copyright" content="www.xujiwei.cn" />
<meta name="description" content="hello,world" />
<title>hello,world!</title>
<!-- 包含ajaxrequest类文件 -->
<script type="text/javascript" src="ajaxrequest.js"></script>
<!-- 包含页面需要的js代码 -->
<script type="text/javascript" src="helloworld.js"></script>
</head>
<body>
<!-- 一个按钮，单击调用函数showhello，显示欢迎信息 -->
<button onclick="showhello();">显示hello,world!</button>
</body>
</html>
在helloworld.htm中，我们在页面上放置了一个button，用于触发showhello函数，显示从服务端获取的信息。
helloworld.js
程序代码：
// 创建ajaxrequest对象，以全局变量的方式来保存这个对象，这样在整个页面应用程序中就只需要创建一次ajaxrequest类对象，而不用重复创建。
var ajax=new ajaxrequest();
/////////////////////////////////////////
// showhello
// 描述：向服务端发送请求并显示返回信息
// 参数：无
// 返回：无
/////////////////////////////////////////
function showhello() {
// 使用get方法向服务端获取文件helloworld.txt的内容，
// 并在函数mycallback中进行处理
ajax.get("helloworld.txt",mycallback);
}
/////////////////////////////////////////
// mycallback
// 描述：向服务端发送请求并显示返回信息
// 参数：obj - xmlhttprequest对象，保存服务端返回信息
// 返回：无
/////////////////////////////////////////
function mycallback(obj) {
// 用alert来显示服务端返回的内容
// obj.responsetext为helloworld.txt的内容
alert(obj.responsetext);
}
在helloworld.js中，创建了一个全局变量ajax，用于保存一个ajaxrequest对象，如果在有多个函数需要用到ajaxrequest时，就不需要重新创建ajaxrequest类实例，只需要直接使用ajax就行了。因为ajaxrequest类中具有连接池的特性，因此不会出现在网络延迟较大时后来的请求覆盖前面的请求的情况。
helloworld.txt
程序代码：
hello,world!
helloworld.txt为客户端需要的内容，欢迎信息“hello,world!”。
小结
在上面的教程中，我们写了一个小小的ajax应用程序，用于在客户端用ajaxrequest类从服务端获取一个文本文件，并将它的内容显示出来。可以看出来，在上面的程序中，我们只是很简单的用了ajaxrequest的get方法，就完成了从服务器获取文件内容的过程。
在接下来的教程中，我们将继续学习ajaxrequest类的使用。
to be continued ...
前言
在发布了ajaxrequest类的几个版本之后，渐渐地有许多朋友用上了它，也有许多朋友问我有没有更详细的说明和示例。不过因为时间的问题以及我能想到的示例有限，一直没有多写几个示例。考虑了一下，决定写一个关于ajaxrequest的教程，希望对使用ajaxrequest类的朋友们有所帮助。
准备
在使用ajaxrequest进行ajax开发之前，你需要做以下准备：
准备知识：javascript基本语法，文档对象模型(dom)的相关知识，以及至少掌握一种后台编程的语言（我写的例子以asp为编程语言）。
准备工具：editplus或者其他文本编辑器（dreamweaver或者visual web developer也可以），以及本地测试用的web服务器（iis或者apache或者netbox或其他都可以）。
下载ajaxrequest类：你可以在http://www.xujiwei.cn/works/ajaxrequest/下载到最新版的ajaxrequest类。
要进行ajax开发，你需要了解js编程，这是ajax中j的需要，以及后台编程，这是需要在服务端进行动态处理，dom用来处理信息，将结果呈现给用户。而工具方面，文本编辑器可以选择你自己喜欢的，我比较喜欢用editplus。
至于测试用的web服务器，就取决于你所用的后台编程语言了，如asp或asp.net是iis，php可以选择apache等。运行asp的另外一个选择是netbox，不过netbox对utf-8支持不太好，如果不涉及非英文的输出，可以考虑选择这个轻量级的服务器软件。
至于为什么要在本地建立测试服务器而不是直接在浏览器中运行，是因为从一开始就在与服务器相近的环境中开发，可以在以后的开发过程中减少许多莫名的错误。
开始
在之后教程的例子中，我都将以js代码与xhtml代码分开的方式来书写，其中ajaxrequest类文件ajaxrequest.js放在例子代码的同一目录下。
hello,world!
按照惯例，以一个“hello,world!”来开始。
helloworld.htm
程序代码：
复制代码 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="xujiwei" />
<meta name="copyright" content="www.xujiwei.cn" />
<meta name="description" content="hello,world" />
<title>hello,world!</title>
<!-- 包含ajaxrequest类文件 -->
<script type="text/javascript" src="ajaxrequest.js"></script>
<!-- 包含页面需要的js代码 -->
<script type="text/javascript" src="helloworld.js"></script>
</head>
<body>
<!-- 一个按钮，单击调用函数showhello，显示欢迎信息 -->
<button onclick="showhello();">显示hello,world!</button>
</body>
</html>
在helloworld.htm中，我们在页面上放置了一个button，用于触发showhello函数，显示从服务端获取的信息。
helloworld.js
程序代码：
复制代码 代码如下:
// 创建ajaxrequest对象，以全局变量的方式来保存这个对象，这样在整个页面应用程序中就只需要创建一次ajaxrequest类对象，而不用重复创建。
var ajax=new ajaxrequest();
/////////////////////////////////////////
// showhello
// 描述：向服务端发送请求并显示返回信息
// 参数：无
// 返回：无
/////////////////////////////////////////
function showhello() {
// 使用get方法向服务端获取文件helloworld.txt的内容，
// 并在函数mycallback中进行处理
ajax.get("helloworld.txt",mycallback);
}
/////////////////////////////////////////
// mycallback
// 描述：向服务端发送请求并显示返回信息
// 参数：obj - xmlhttprequest对象，保存服务端返回信息
// 返回：无
/////////////////////////////////////////
function mycallback(obj) {
// 用alert来显示服务端返回的内容
// obj.responsetext为helloworld.txt的内容
alert(obj.responsetext);
}
在helloworld.js中，创建了一个全局变量ajax，用于保存一个ajaxrequest对象，如果在有多个函数需要用到ajaxrequest时，就不需要重新创建ajaxrequest类实例，只需要直接使用ajax就行了。因为ajaxrequest类中具有连接池的特性，因此不会出现在网络延迟较大时后来的请求覆盖前面的请求的情况。
helloworld.txt
程序代码：
hello,world!
helloworld.txt为客户端需要的内容，欢迎信息“hello,world!”。
小结
在上面的教程中，我们写了一个小小的ajax应用程序，用于在客户端用ajaxrequest类从服务端获取一个文本文件，并将它的内容显示出来。可以看出来，在上面的程序中，我们只是很简单的用了ajaxrequest的get方法，就完成了从服务器获取文件内容的过程。
在接下来的教程中，我们将继续学习ajaxrequest类的使用。
to be continued ...
下一篇： js统计网页在线时间的脚本