【免费】Build+apps+using+ajax.rar资源-CSDN文库

共1个文件

pdf：1个

需积分: 0 180 浏览量 2008-09-05 13:09:43 上传评论收藏 144KB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

Build+apps+using+ajax.rar （1个子文件）

Build+apps+using+ajax.pdf 190KB

Build apps using Asynchronous JavaScript with

XML (AJAX)

Learn to construct real time validation-enabled Web

applications with AJAX

Skill Level: Introductory

Naveen Balani ([email protected])

Technical Architect

Webify Solutions

Rajeev Hathi ([email protected])

Senior Systems Analyst

Satyam Computers Ltd.

15 Nov 2005

AJAX (Asynchronous JavaScript with XML) enables a dynamic, asynchronous Web

experience without the need for page refreshes. In this tutorial, you learn to build

AJAX-based Web applications -- complete with real time validation and without page

refreshes -- by following the construction of a sample book order application.

Section 1. Before you start

About this tutorial

In this tutorial, we explain how to develop and design Web applications based on

Asynchronous JavaScript with XML, or AJAX. You'll build a sample Web-based book

order application which provides real time validation and page refresh, for efficient

and smooth user interaction.

Prerequisites

We will use Tomcat to run the AJAX application. Tomcat is the servlet container that

Build apps using Asynchronous JavaScript with XML (AJAX)

is used in the official reference implementation for the Java Servlet and JavaServer

Pages technologies. Download jakarta-tomcat-5.0.28.exe from the Jakarta Site and

run it to install Tomcat to any location you'd like -- c:\tomcat5.0, for instance.

Download the source code and Web application (in wa-ajax-Library.war) for this

tutorial.

Section 2. Introduction to AJAX

AJAX basics

AJAX enables a dynamic, asynchronous Web experience without the need for page

refreshes. It incorporates the following technologies:

• XHTML and CSS provide a standards-based presentation.

• Document Object Model (DOM) provides dynamic display and interaction.

• XML and XSLT provide data interchange and manipulation.

• XMLHttpRequest provides asynchronous data retrieval.

• JavaScript binds everything together.

The core of AJAX technology is a JavaScript object: XMLHttpRequest. This object

is supplied through browser implementations -- first through Internet Explorer 5.0

and then through Mozilla-compatible browsers. Take a closer at this object.

XMLHttpRequest

With XMLHttpRequest, you can use JavaScript to make a request to the server

and process the response without blocking the user. As you create your Web site

and use XMLHttpRequest to perform screen updates on the client's browser

without the need for refresh, it provides much flexibility and a rich user experience.

Examples of XMLHttpRequest applications include Google's Gmail service,

Google's Suggest dynamic lookup interface, and the MapQuest dynamic map

interface. In the next sections, we demonstrate how to use XMLHttpRequest object

in detail as we demonstrate the design of a book order application and implement it.

Section 3. Application design

developerWorks® ibm.com/developerWorks

Build apps using Asynchronous JavaScript with XML (AJAX)

Elements of the application

The sample Web-based book order application will contain the following client-side

functions implemented in AJAX:

• Subscription ID validation

• A View Authors list

• A View Publishers list

The objective here is to show how real time validation and page refreshes in a Web

page make user interaction smoother and more efficient.

Structure of the application

The diagram in Figure 1 depicts the design architecture of the sample book order

application:

Figure 1. The AJAX architecture

ibm.com/developerWorks developerWorks®

Build apps using Asynchronous JavaScript with XML (AJAX)

The application will be a single Web page developed with JavaServer Pages (JSP)

technology. The user will be able to invoke the Web page using a Web browser

(such as Microsoft® Internet Explorer) and enter the Subscription ID which the

application validates in real time. As the ID is validated asynchronously, the user can

input more information. The user can view the book titles either by Author or

Publisher. The screen will populate the Authors or Publishers list based on user

choice. Based on the selection, the Titles list is populated. All these lists will

populate in real time -- in other words, the page is not refreshed, but still the data

comes from the backend tier. We call this phenomenon real time refreshes.

As you can see in Figure 1, the XMLHttpRequest JavaScript object helps with the

real time asynchronous processing. This object makes a request in the form of XML

over HTTP to the LibraryServlet servlet residing in a Web container. The servlet

then queries the database, fetches the data, and sends it back to the client, again in

the form of XML over HTTP. The requests and responses occur in real time without

developerWorks® ibm.com/developerWorks

Build apps using Asynchronous JavaScript with XML (AJAX)

refreshing the page.

This is what makes AJAX so powerful. The user does not wait for page reload to

complete because there is no page reload.

In the next section, we'll demonstrate how to implement the book order application

based on this design. We will take you through the code and perform some analysis.

(To get the sample code for this tutorial, download the file, x-ajax-library.war.)

Section 4. Implementing the application

Application implementation with AJAX

In this section, we do a code walkthrough of the sample book order application and

take a close look at each AJAX-based, Javascript component:

• Validate Subscription ID

• View Authors

• View Publishers

• View Titles

Code walkthrough: Validate the subscription ID

Let's start with the function Validate Subscription ID <input type="text"

name="subscriptionID" onblur="validate(this.form)"/>. This code

creates a text field where users can enter Subscription IDs. Once the user enters the

ID and moves to the next field in the form, the onBlur event fires. This event calls a

JavaScript function validate():

var req;

function validate(formObj) {

init();

req.onreadystatechange = subscriptionValidator;

req.send("subscriptionID=" + formObj.subscriptionID.value);

}

The validate() function takes formObj as a parameter. It first calls the init()

function:

function init() {

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

ibm.com/developerWorks developerWorks®

Build apps using Asynchronous JavaScript with XML (AJAX)

评论收藏

内容反馈

bc523

粉丝: 0
资源: 11

Build+apps+using+ajax.rar

评论0

最新资源

Build+apps+using+ajax.rar

评论0

login-form-using-ajax.rar_ajax form_ajax login_ajax login form

Oracle Application Express: Build Powerful Data-Centric Web Apps with APEX

Pro AngularJS

PhoneGap.Essentials

JavaScript.Novice.to.Ninja.2nd.Edition

JavaScript for .NET Developers(PACKT,2016)

[JavaScript] JavaScript 从入门到精通 (英文版)

Single Page Web Applications JavaScript end-to-end

Learning PHP, MySQL & [removed] With jQuery, CSS & HTML5 ER5

Beginning Ruby on Rails

[Titanium] Appcelerator Titanium 移动应用开发教程 (英文版)

微信小程序源码-合集6.rar

微信小程序源码-合集5.rar

微信小程序源码-合集4.rar

微信小程序源码-合集3.rar

微信小程序源码-合集2.rar

浏览器插件 Auto Refresh Plus 7.4.4 ctx

品优购项目 素材及代码

学生宿舍管理系统源码文件

全能电子地图下载器1.9.5完善版.zip

大学生网页设计大作业-5个网页设计制作作品自己任选

数据可视化大屏资料合集（网上收集的几十种样式的html静态页）

微信小程序+后台（.net）+sql server数据库

12套 Axure 模板，非常漂亮的中后台原型，可以直接套用在OA、CRM更web系统上。

uniapp uView u-picker组件三级联动Demo

h5+JavaScript 烟花demo

基于threejs的商场楼层展示导航系统源码.zip

最新资源

品优购项目素材及代码