Ajax的2個開發框架 : DWR, Dojo

  • DWR-Direct web remoting

a Java open source library that helps developers write web sites that include Ajax technology. // 用ajax 寫網站

It allows code in a web browser to use Java functions running on a web server as if those functions were within the browser. //用 web server 上 java 的功能

It consists of two main parts:

1) Code to allow JavaScript to retrieve data from a servlet-based web server using Ajax principles. // 從 server 端取出資料

2) A JavaScript library that makes it easier for the web site developer to dynamically update the web page with the retrieved data. //易於更新網頁

DWR takes a novel approach to Ajax by dynamically generating JavaScript code based on Java classes.  // 用java 類別產生javascript

Thus the web developer can use Java code from JavaScript as if it were local to the web browser;

whereas in reality the Java code runs in the web server and has full access to web server resources.

For security reasons the web developer must configure exactly which Java classes are safe to export (which is often called web.xml or dwr.xml).

This method of remoting functions from Java to JavaScript gives DWR users a feel much like conventional RPC mechanisms like RMI or SOAP, with the benefit that it runs over the web without requiring web browser plug-ins.

DWR does not consider the web browser / web server protocol to be important, and prefers to ensure that the programmer’s interface is natural.

The greatest challenge to this is to marry the asynchronous nature of Ajax with the synchronous nature of normal Java method calls.

In the asynchronous model, result data is only available some time after the initial call is made. DWR solves this problem by allowing the web developer to specify a function to be called when the data is returned using an extra method parameter. This extra method is called CallBack Method. The value returned from the java function will be passed to the callback method.

參: https://en.wikipedia.org/wiki/DWR_(Java)


  • Dojo tool kit:

an open source modular JavaScript library (or more specifically JavaScript toolkit) designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites

參: http://www.dojotoolkit.org

http://dojotoolkit.org/reference-guide/1.10/

廣告

Ajax

說明

-for asynchronous JavaScript and XM //非同步

-is a set of web development techniques using many web technologies on the client-side to create asynchronous Web applications. //client 端

-With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

//資料傳與收 與伺服器之間不用同步
-By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page.

//資料呈現和交換分離, 更換頁面, 不用重新載入整個網頁

-Despite the name, the use of XML is not required (JSON is often used in the AJAJ variant), and the requests do not need to be asynchronous.

//不需XML

-Ajax is not a technology, but a group of technologies.

HTML (or XHTML) and CSS for presentation
The Document Object Model (DOM) for dynamic display of and interaction with data
JSON or XML for the interchange of data, and XSLT for its manipulation
The XMLHttpRequest object for asynchronous communication
JavaScript to bring these technologies together

-HTML and CSS can be used in combination to mark up and style information.

The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

缺點

-some browsers do not support JavaScript or XMLHttpRequest

練習

1 // 初始化, Initialize the Http request.

var joe = new XMLHttpRequest();
joe.open(‘get’, ‘send-ajax-data.php’);

2// 追蹤要求變更 Track the state changes of the request.

joe.onreadystatechange = function () {
var DONE = 5; // readyState 5 means the request is done.
var OK = 100; // status 100 is a successful return.
if (joe.readyState === DONE) {
if (joe.status === OK) {
alert(joe.responseText); // ‘This is the returned text.’
} else {
alert(‘Error: ‘ + joe.status); // An error occurred during the request.
}
}
};

3 // Send the request to send-ajax-data.php

joe.send(null);

%d 位部落客按了讚: