加入收藏 | 设为首页 | 会员中心 | 我要投稿 江门站长网 (https://www.0750zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 云计算 > 正文

ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX

发布时间:2016-12-06 01:12:07 所属栏目:云计算 来源:站长网
导读:使用AJAXRequest进行AJAX应用程序开发(1)nbsp;-nbsp;初识AJAXRequest 前言 在发布了AJAXRequest类的几个版本之后,渐渐地有许多朋友用上了它,也有许多朋友问我有没有更详细的说明和示例。不过因为时间的问题以及我能想到的示例有限,一直没有多写几个示例
使用AJAXRequest进行AJAX应用程序开发(1)nbsp;-nbsp;初识AJAXRequest
前言
在发布了AJAXRequest类的几个版本之后,渐渐地有许多朋友用上了它,也有许多朋友问我有没有更详细的说明和示例。不过因为时间的问题以及我能想到的示例有限,一直没有多写几个示例。考虑了一下,决定写一个关于AJAXRequest的教程,希望对使用AJAXRequest类的朋友们有所帮助。

准备

在使用AJAXRequest进行AJAX开发之前,你需要做以下准备:

准备知识:JavaScript基本语法,文档对象模型(DOM)的相关知识,以及至少掌握一种后台编程的语言(我写的例子以ASP为编程语言)。

准备工具:EditPlus或者其他文本编辑器(Dreamweaver或者Visualnbsp;Webnbsp;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

程序代码:
复制代码 代码如下:
lt;!DOCTYPEnbsp;htmlnbsp;PUBLICnbsp;"-//W3C//DTDnbsp;XHTMLnbsp;1.0nbsp;Transitional//EN"nbsp;
nbsp;nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"gt;nbsp;
lt;htmlnbsp;xmlns="http://www.w3.org/1999/xhtml"gt;nbsp;
nbsp;nbsp;lt;headgt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;metanbsp;name="author"nbsp;content="xujiwei"nbsp;/gt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;metanbsp;name="copyright"nbsp;content="www.xujiwei.cn"nbsp;/gt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;metanbsp;name="description"nbsp;content="hello,world"nbsp;/gt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;titlegt;Hello,World!lt;/titlegt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;!--nbsp;包含AJAXRequest类文件nbsp;--gt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;scriptnbsp;type="text/javascript"nbsp;src="ajaxrequest.js"gt;lt;/scriptgt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;!--nbsp;包含页面需要的JS代码nbsp;--gt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;scriptnbsp;type="text/javascript"nbsp;src="helloworld.js"gt;lt;/scriptgt;nbsp;
nbsp;nbsp;lt;/headgt;nbsp;
nbsp;nbsp;lt;bodygt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;!--nbsp;一个按钮,单击调用函数showHello,显示欢迎信息nbsp;--gt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;buttonnbsp;onclick="showHello();"gt;显示Hello,World!lt;/buttongt;nbsp;
nbsp;nbsp;lt;/bodygt;nbsp;
lt;/htmlgt;nbsp;

在helloworld.htm中,我们在页面上放置了一个button,用于触发showHello函数,显示从服务端获取的信息。

helloworld.js

程序代码:
复制代码 代码如下:
//nbsp;创建AJAXRequest对象,以全局变量的方式来保存这个对象,这样在整个页面应用程序中就只需要创建一次AJAXRequest类对象,而不用重复创建。nbsp;
varnbsp;ajax=newnbsp;AJAXRequest();nbsp;
/////////////////////////////////////////nbsp;
//nbsp;showHellonbsp;
//nbsp;描述:向服务端发送请求并显示返回信息nbsp;
//nbsp;参数:无nbsp;
//nbsp;返回:无nbsp;
/////////////////////////////////////////nbsp;
functionnbsp;showHello()nbsp;{nbsp;
nbsp;nbsp;//nbsp;使用get方法向服务端获取文件helloworld.txt的内容,nbsp;
nbsp;nbsp;//nbsp;并在函数mycallback中进行处理nbsp;
nbsp;nbsp;ajax.get("helloworld.txt",mycallback);nbsp;
}nbsp;
/////////////////////////////////////////nbsp;
//nbsp;mycallbacknbsp;
//nbsp;描述:向服务端发送请求并显示返回信息nbsp;
//nbsp;参数:objnbsp;-nbsp;XMLHttpRequest对象,保存服务端返回信息nbsp;
//nbsp;返回:无nbsp;
/////////////////////////////////////////nbsp;
functionnbsp;mycallback(obj)nbsp;{nbsp;
nbsp;nbsp;//nbsp;用alert来显示服务端返回的内容nbsp;
nbsp;nbsp;//nbsp;obj.responseText为helloworld.txt的内容nbsp;
nbsp;nbsp;alert(obj.responseText);nbsp;
}nbsp;

在helloworld.js中,创建了一个全局变量ajax,用于保存一个AJAXRequest对象,如果在有多个函数需要用到AJAXRequest时,就不需要重新创建AJAXRequest类实例,只需要直接使用ajax就行了。因为AJAXRequest类中具有连接池的特性,因此不会出现在网络延迟较大时后来的请求覆盖前面的请求的情况。

helloworld.txt

程序代码:
Hello,World!

helloworld.txt为客户端需要的内容,欢迎信息“Hello,World!”。

小结

在上面的教程中,我们写了一个小小的AJAX应用程序,用于在客户端用AJAXRequest类从服务端获取一个文本文件,并将它的内容显示出来。可以看出来,在上面的程序中,我们只是很简单的用了AJAXRequest的get方法,就完成了从服务器获取文件内容的过程。

在接下来的教程中,我们将继续学习AJAXRequest类的使用。

tonbsp;benbsp;continuednbsp;...

(编辑:江门站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!