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

2016-02-19 11:27 30 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX应用程序开发入门小技巧的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

使用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" / 
    titleHello,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 ...

来源:https://www.tulaoshi.com/n/20160219/1597611.html

延伸阅读
标签: Web开发
在过去,由于为了获得新数据而不得不重新加载web页面(或者加载其他页面)导致web应用程序发展被限制。虽然有其他方法可用(不加载其他页面),但是这些技术都没有被很好地支持而且有bug成灾的趋向。在过去的几个月里,一个过去并不被广泛支持的技术已经被越来越多的web冲浪者(web surfers??是指浏览器还是浏览者?)所接受,它给了开发...
标签: Web开发
一、简介 AJAX,一个异步JavaScript和XML的缩略词,是最近出来的技术词语。异步意味着你可以经由超文本传输协议(HTTP)向一个服务器发出请求并且在等待该响应时继续处理另外的数据。这就意味着,例如,你可以调用一个服务器端脚本来从一个数据库中以XML方式检索数据,把数据发送到存储在一个数据库的服务器脚本,或者简单地装载一个XML...
标签: Web开发
<h1 使用Ajax开发web应用程序</h1 <p 这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容--不需要任何网页的重新加载。注意:这个例子对于禁止js的用户来说没有效果。</p <p 这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。 <a href="#" onclick="ajaxRead('data_2....
标签: Web开发
新增加的内容,首先是两个新变量的声明:“subAry”和“subAryLen”。它们和之前的变量“dataArray”和“dataArrayLen”类似,除了它们指向不同的数组(特别是它们将指向那些“task”元素-当“dataArray”和“dataArrayLen”指向“pet”元素的时候)。 我们也改变了变量“insertData”的初始值-我们增加了一个表格头(<th )给我们的“task...
标签: Web开发
在过去,由于为了获得新数据而不得不重新加载web页面(或者加载其他页面)导致web应用程序发展被限制。虽然有其他方法可用(不加载其他页面),但是这些技术都没有被很好地支持而且有bug成灾的趋向。在过去的几个月里,一个过去并不被广泛支持的技术已经被越来越多的web冲浪者(web surfers??是指浏览器还是浏览者?)所接受,它给了开发者更...

经验教程

746

收藏

56
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部