Aspectes of AJAX：JavaScript与Web服务的AJAX框架解析

需积分: 10 60 浏览量更新于2024-07-26 收藏 2.1MB PDF 举报

"Aspectes Of Ajax.pdf 是一本关于Ajax技术的电子书，由Matthias Hertel于2005-2007年间撰写，版本1.2于2007年5月1日发布。书中涵盖了作者博客'AspectsofAJAX'中的更新文章和示例，主要关注JavaScript、XML、SOAP、WSDL以及ASP.NET下的标准Web服务在服务器端的应用。此书的实现样例、Ajax引擎和许多Web控件可以在http://www.mathertel.de/AJAXEngine/找到。所有文章和博客内容均遵循创意共享 Attribution 2.0 许可协议，软件本身则采用BSD风格许可。目前，该书尚未完成，会不断更新和扩展。" Ajax（Asynchronous JavaScript and XML）是一种用于创建更快速、更互动的网页应用的技术，它允许部分网页的异步更新，无需重新加载整个页面。通过Ajax，开发者可以实现用户界面与服务器之间的后台通信，提高用户体验。书中提到的Ajax框架和引擎涉及了以下几个关键知识点： 1. **JavaScript**：作为Ajax的核心，JavaScript是实现客户端动态更新的主要语言。书中可能讲解了如何使用JavaScript创建和处理XMLHttpRequest对象，进行异步数据交换。 2. **XML**：XML（Extensible Markup Language）通常用于传输和存储数据。在Ajax中，XML数据可能被用来从服务器获取或发送信息，然后在不刷新页面的情况下更新DOM（Document Object Model）。 3. **SOAP**（Simple Object Access Protocol）：一种基于XML的协议，用于在Web服务中交换结构化和类型化的信息。书中可能讨论了如何在Ajax应用程序中使用SOAP调用远程Web服务。 4. **WSDL**（Web Services Description Language）：定义Web服务接口的XML格式。在Ajax上下文中，WSDL文件可能用于描述可供客户端调用的服务操作。 5. **ASP.NET**：微软开发的Web应用程序框架，支持创建动态网站和Web服务。书中可能涵盖了如何在ASP.NET环境中构建和使用Ajax功能。 6. **Web Services**：这些是可跨网络访问的函数或方法，可以通过HTTP协议调用。Ajax可以利用Web服务来扩展其功能，例如获取实时数据或执行复杂计算。 7. **AJAX Engine**：书中的Ajax引擎可能是作者实现的一个库，用于简化开发过程，它可能包括各种预定义的函数和控件，以简化Ajax功能的集成。 8. **BSD Style License**：这是一种宽松的开源软件许可证，允许他人自由使用、修改和分发代码，只要保留原始作者的版权信息。 9. **Creative Commons Attribution 2.0 License**：这是一种允许他人在给出适当署名的情况下，自由使用、复制、修改、合并、出版、发行作品的许可协议。由于这本书仍在不断更新和扩展，读者可以期待更多关于Ajax开发的深入内容和新文章。如果对Ajax技术有深入研究的需求，这本书会是一个很好的学习资源。

Aspects of AJAX

Native AJAX Programming

When using an AJAX style of programming the old, classic approach

programming functionality must be given up. There is no form submit any

more that posts all the client state to the server and requests for a complete

new page description using HTML.

Instead of loading several pages until the functionality is done only one page

is loaded and will stay in the browser until the end of functionality. With the

Ajax model the execution of this web page is processed in 3 different phases:

Phase 1: Loading the page

During this synchronously implemented phase the client loads the "static" part

of the application. That corresponds to displaying a form or a list without any

concrete data. (We will see later that it makes a lot of sense in some scenarios

to include a first set of data into this first page loading reduce the time until

the user can use it and to achieve content recognition for search spiders.)

The code for the page is assembled and delivered to the browser. It makes no

big difference if plain HTML, generic JavaScript or JavaScript includes are

used.

The http answer of this first call can be delivered in many situations with a

hint for the client that the local browser cache can be used to store the page

for a while and therefore the server will not be asked again for this code. The

displaying of a page in this situation is very fast and efficiently because the

bytes are retrieved from the local cache and no network delays occur.

http://msdn.microsoft.com/library/en-us/dnwebgen/html/ie_introfiddler2.asp?frame=true

Phase 2: Loading data from the server using AJAX techniques

This phase is used for retrieving more information from the web server and

then combining it into the already delivered html. This can be repeated several

times while the initial page is still loaded.

That can be the current list of the emails, (Outlook Web ACCESS, GMail) or

the data changed since the last call (GMail) or additional information to a

search word (Google Suggest).

There are also non HTML/JavaScript solutions possible. Google Maps uses

variable URLs with parameters on image objects to retrieve the bitmaps that

are part of the current shown map.

The AJAX model must be considered in both loading phases. In the first

phase the necessary (JavaScript) code must be delivered. In the second phase

this code must be used to get the information from the server.

Phase 3: Interaction with the page using AJAX techniques

Web applications need a mechanism to push information back to the server.

The most known and old solution to this is the mechanism of the built-in

<form> element that allows to post back the information stored in <input>

elements to the server. The answer from the server contains a complete new

page that will be displayed.

In contrary the AJAX solution to this is to collect and transfer the pure

information that is needed by the server and to retrieve from the server some

new information that can be integrated into the already loaded page.

下载自：http://www.javaxxz.com 最方便的Java学习社区

Aspects of AJAX

Native AJAX Programming

We will see how this can be done by using the built-in XMLHttpRequest

object. The more comfortable solution will be shown later by using a

WebService.

The XMLHttpRequest Object

There are multiple mechanisms available that can be used to call the server

without totally refreshing the current page:

• An invisible <iframe> element or a frameset with an invisible frame. The

url of this element is set to a specific value containing all parameters.

• A <script> element is used to include some script fragments from a

dynamic location (not a static JavaScript file). The server creates some

JavaScript and by executing the script the results of the call are embedded

into the page

• The XMLHttpRequest object is used.

The AJAX Engine always uses the XMLHttpRequest approach because. It is

available in most up to date browsers and (I hope) will soon be accepted as a

standard. Have a look at

http://www.w3.org/TR/XMLHttpRequest/

There you can find a good reference too.

AJAXing the CalcFactors Example

The core algorithm of the example, the computation of the prime factors of a

number, can also be implemented quite simply on the server. A url with the

number in a parameter is requested from the server and the http answer will

return the list of factors. The JavaScript method from CalcFactorsAsync1.htm

can be converted quite easily into C# source code and can be called using a

URL like this:

http://www.mathertel.de/AjaxEngine/S01_AsyncSamples/CalcFactorsRequest.aspx?number=266712

The source code of this server processing:

<%@ Page Language="C#" Debug="true" %>

<%@ Import Namespace="System.IO" %>

<%@ Import Namespace="System.Xml" %>

<%@ Import Namespace="System.Xml.Xsl" %>

private string CalcPrimeFactors(string inputText) {

string outputText = String.Empty;

UInt64 prime; // try this factor (only primes will match!)

UInt64 number; // product of the remaining factors

if ((inputText == null) || (inputText.Length == 0) || (inputText == "0"))

return("no number given.");

prime = 2; // start with 2

number = UInt64.Parse(inputText);

while ((number > 1) && (prime * prime <= number)) {

if (number % prime != 0) {

// try the next factor (slowly)

prime += 1;

} else {

// found a factor !

outputText = outputText + " " + prime;

number = number / prime;

} // if

下载自：http://www.javaxxz.com 最方便的Java学习社区

Aspects of AJAX

Native AJAX Programming

Doing it asynchronous

So we can call the server. The answer of this call can, as we know, take up

some long (cpu) time and the send() method waits for the answer of the

server. During this time and with the above implementation the client does

freeze and user input events do not execute. Again we have a locking

synchronous situation.

Sending the parameters and receiving of the answer therefore must be

implemented in 2 different methods so that in the meantime the events of the

keyboard and the mouse in the browser can execute.

The XMLHttpRequest object (here used through the xmlObj variable) must be

defined in a global scope so it will be still available and not garbage collected

at the time of the transmission of the result. The result will not be available

immediately and a new function RetrievePrimeFactors is needed:

xmlObj.open("GET", "CalcFactorsRequest.aspx?number=" + inputText, true);

xmlObj.onreadystatechange = RetrievePrimeFactors;

xmlObj.send();

This function will be called when the result is present and the field for the

result will be updated:

function RetrievePrimeFactors() {

var outputText;

if ((xmlObj != null) && (xmlObj.readyState == 4)) { //COMPLETED

// The result is the whole body of the response

outputText = xmlObj.responseText;

xmlObj = null;

document.getElementById("outputField").value = outputText;

} // if

} // RetrievePrimeFactors

http://www.mathertel.de/AjaxEngine/S01_AsyncSamples/CalcFactorsServer2.htm

With this implementation we reach the kind of the Browser application that

can be called an AJAX application. No real XML is used until know but in the

end the same result is achieved.

Do we need XML?

Many web application calling themselves as AJAX applications do not use

XML for any data transfer between the client and the server.

Some use the kind of request I use up to here that is often called a REST

request. Another approach is to use a JSON (JavaScript Object Notation)

syntax for the data to be transferred and both approaches can be combined.

An indirect AJAX approach is also very well known. This approach uses

specific marked HTML regions inside a classic page and requests the server

for updates on parts of the currently loaded page. This reduced the bytes on

the network but still transfers design and data together.

My interest is in introducing the standard WebService mechanism and in a

clear separation between html code and the data of the application.

下载自：http://www.javaxxz.com 最方便的Java学习社区

Aspects of AJAX

JavaScript Behaviors

Client-Server Protocols

When searching the web for true AJAX samples (I don’t call pure client side

scripting an AJAX sample – but some people do) you may see that there are

as many protocol definitions as there are samples and frameworks. Even if

they mention to use JSON on the network layer the samples differ in many

ways. I see no specific standard that is bound to AJAX web applications.

Seeing this situation I asked myself why not to use WebServices because I

had a lot of experience with SOAP and already had implemented a SOAP

client in JavaScript some years ago.

Best Practices for a WebService implementation

Using a WebServices client is not so hard to do if you have a layer that takes

care of building the valid XML for the network layer so the client should be

implemented as you expect or know it from other platforms and languages by

providing a stub function on the client that. You can use this local function

from JavaScript to call the corresponding function on the server and pass the

parameters. This is called a RPC network layer.

When using the (non-multitasking) JavaScript interpreter in the browser there

is need for an asynchronous mechanism too. It’s because waiting for an

answer a call to a server can fail in many ways:

• Packets my get lost.

• The network may be unreliable

• The server may be overloaded

• … and many more pitfalls.

It’s even worse, because when calling a server from the browser using the http

protocol there are some limitations you cannot get around:

• You can only call the server that is serving the page that is displayed

when using the XMLHttpRequest object.

• Only 2 simultaneous calls can be used as specified in the http protocol

definition.

• The timeout the network stack is using by default is too long so you need

to cancel long running requests before the network stack does so if you

want responsive applications.

Using the SOAP protocol has also very important advantage over using

specify and check what data types you expect to send and receive using a

specific function.

下载自：http://www.javaxxz.com 最方便的Java学习社区

剩余141页未读，继续阅读

仧尐

粉丝: 242
资源: 152

Aspectes of AJAX：JavaScript与Web服务的AJAX框架解析

Pro JSF与Ajax.PDF：构建富互联网组件全攻略

配置ajax.dll实现局部无刷新与异步处理

Ajax.RouteLink详解与示例

Foundations of Ajax.pdf

下载-Ajax.pdf

初步使用ajax.pdf

Scriptaculous-Ajax.pdf

07-ajax.pdf

Apress.Pro.JSF.and.Ajax.pdf

深入浅出Ajax.pdf

最新资源