ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX应用程序开发入门小技巧

 更新时间:2007年12月15日 15:11:06   作者:  
使用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 ...

相关文章

  • Ajax留言本源码 提供下载了

    Ajax留言本源码 提供下载了

    Ajax留言本源码 提供下载了...
    2007-08-08
  • 十大最佳Ajax教程收集(图文)

    十大最佳Ajax教程收集(图文)

    Ajax通常被认为是一门单独的语言,实际上它是很多语言的集合包括DHTML, Javascript, XML 和JSON,全称为Asynchronous JavaScript and XML(异步JavaScript和XML),是由Jesse James Gaiiett创造的名词。
    2010-02-02
  • 往xml中更新节点的实例代码

    往xml中更新节点的实例代码

    下面小编就为大家带来一篇往xml中更新节点的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Ajax Control Toolkit 34个服务器端控件

    Ajax Control Toolkit 34个服务器端控件

    Ajax Control Toolkit 34个服务器端控件,想要学习ajax的朋友可以参考下。
    2009-09-09
  • Ajax通讯原理XMLHttpRequest

    Ajax通讯原理XMLHttpRequest

    AJAX = 异步 JavaScript 和 XML。JavaScript不用说脚本语言,XML也不用说可扩展标记语言用于存放数据信息
    2011-12-12
  • ajax遍历xml文档的方法

    ajax遍历xml文档的方法

    这篇文章主要介绍了ajax遍历xml文档的方法,实例分析了jsp结合Ajax遍历XML文档的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • ztree+ajax实现文件树下载功能

    ztree+ajax实现文件树下载功能

    这篇文章主要为大家详细介绍了ztree+ajax实现文件树下载功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 利用ajax传递数组及后台接收的方法详解

    利用ajax传递数组及后台接收的方法详解

    这篇文章主要给大家介绍了关于利用ajax传递数组及后台接收的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-06-06
  • ajax接口文档url路径的简写实例

    ajax接口文档url路径的简写实例

    前端工程师将来打交道最多的是Http API接口,此种接口会提供一个URL地址暴露在互联网上,可以通过编写Ajax代码去与之交互来完成功能,下面这篇文章主要给大家介绍了关于ajax接口文档url路径简写的相关资料,需要的朋友可以参考下
    2021-10-10
  • ajax验证用户名和密码的实例代码

    ajax验证用户名和密码的实例代码

    这篇文章主要为大家详细介绍了ajax验证用户名和密码的实例代码,感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论