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

前端  /  管理员 发布于 4年前   262

使用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="//article/ajaxrequest.js"></script> 
    <!-- 包含页面需要的JS代码 --> 
    <script type="text/javascript" src="//article/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 ...


  • 上一条：
    ASP运行出错：缺少对象: 'xmlDoc.documentElement'错误解决方法
    下一条：
    Ruby中的gem包管理的使用及gem源搭建教程

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客