Home > Developer > Web Develop
Ajax learning notes (2) and ajax learning notes
Ii. prototype library details
1. Use of prototype Library
// Import the downloaded prototype. js File
<Script type = "text/javascript" src = "prototype. js"> </script>
// Directly use the Prototype object in your own js
<Script type = "text/javascript">
Document. writeln ("Prototype library Version:" + Prototype. Version + "<br/> ");
Document. writeln ("My library version is:" + zpc. version + "<br/>" + "my age:" + zpc. age + "<br/> ");
Document. writeln ("whether the client is Chrome:" + Prototype. Browser. WebKit + "<br/> ");
Alert (Prototype. K ("test string "));
</Script>
2. Use the $ () function and $ () function to access HTML elements in the document.
$ (String tagName) function: directly obtains the HTML element whose id is tagName.
$ (String tagName1, String tagName2): obtains an array of HTML elements whose IDs are tagName1 and tagName2.
$ () Is one or more valid CSS selectors.
3. The $ A () function is used to convert A parameter into an array. If the input parameter is not A set but A common variable, the $ A () function returns an empty array, instead of an array with only one element.
The $ F () function is used to obtain the values of form controls, such as input, textArea, and select.
The $ () function gets the HTML element, and the $ F () function gets the value of the Form Control, not the form field.
The $ () function returns an HTML Element Object, while the $ F () function returns only a string value.
When using these two functions, the id attribute and name attribute of the HTML element should be consistent (IE)
4. $ H () function: converts a js object to a Hash object. The Hash class is a class provided by the Prototype library, similar to the Map data structure in Java.
5. Use Try. the these () function allows the input of some column functions as parameters. It will call a series of Input Functions in sequence, find the first function that can return successfully, and use the return value of the function as Try. the Return Value of the these () function. If none of these functions return values, Try. these () will return undefined
The Try. these () parameter can only be a function reference.
6. The json format of Prototype supports the toJSON () method for Date, Object, Array, Hash, and Number classes, which is used to convert these objects into strings in JSON format.
In addition, Prototype also adds the following three JSON-related methods to the String class:
IsJSON (): This method is used to determine whether the specified string is a legal JSON string.
EvalJSON ([sanitize = false]): converts a specified string to a json object.
ToJSON (): used to convert a string to a JSON string.
Routine: <body> <script type = "text/javascript"> var date = new Date (); document. writeln ("date is:" + date. toLocaleString () + "<br/>"); document. writeln ("The JSON string corresponding to the date is:" + date. toJSON () + "<br/>"); var p = {name: "zpc", age: 25}; // converts an object to a JSON string document. writeln ("The JSON string of a common Object is:" + Object. toJSON (p) + "<br/>"); var books = ["Zhou pengcheng", "peng"]; // document. writeln ("The JSON string of the array is:" + books. toJSON () + "<br/>"); var hash = $ H ({name: 'zhou pengcheng ', age: 34}); document. writeln ("The JSON string of the Hash object is:" + hash. toJSON () + "<br/>"); // document. writeln ("The JSON string of the value is:" + (45 ). toJSON () + "<br/>"); var str = '{"name": "zpc", "gender": "male "}'; // convert a json string into a JSON object var zpc = str. evalJSON (); document. writeln ("Name of the zpc object:" + zpc. name + "<br/>"); document. writeln ("zpc object Gender:" + zpc. gender + "<br/>"); </script> </body>7. Use Element Object: This class provides some methods to simplify operations on HTML elements.
Routine: <body> <script type = "text/javascript" src = "prototype-1.6.0.3.js"> </script> <script type = "text/javascript"> // create an ObjectRange directly with new object var range = new ObjectRange (2, 9, true); // true indicates that 9range is not included. each (function (ele, index) {document. writeln ("index" + index + "value:" + ele + "<br/>")}); // use $ R () function to create an ObjectRange object var ra = $ R ('A', 'G'); document. writeln ($ A (ra); alert (ra. include ('B'); </script> </body>9. Use Form. Element to operate Form Controls
<Body> <table border = "1"> <tr> <td> <div> <input id = "OK" type = "button" value = "click me"/> </div> Inner of table </td> </tr> </table> <div id = "d"> e </div> <script type = "text/javascript "src =" prototype. js "> </script> <script type =" text/javascript "> Event. observe ("OK", "click", function (event) {document. writeln ("whether it is a left-click event:" + event. isLeftClick (); document. writeln ("event Source:" + event. element (). value); document. writeln ("the latest td element:" + Event. findElement ("td "). innerHTML) ;}); $ ("d "). innerHTML = "13. Use Template
Sometimes we need to generate multiple strings, which have a large number of Duplicated content, and only a small number of key parts have changed, then we can use the Template object.
Routine:
<Body> <script type = "text/javascript" src = "prototype. js "> </script> <script type =" text/javascript "> objArr = [{book: 'hadoop ', author:" zpc "}, {book: 'java tutorial ', author: 'Qian gang'}, {book: 'tianlong Babu', author: "Jin Yong"}]; var template = new Template ("Name of the book is # {book}, author: # {author }. "); for (var I = 0; I <objArr. length; I ++) {document. writeln (template. evaluate (objArr [I]); }</script> </body>14. Using the create () method of Class to create objects can provide some object-oriented support.
15. Two frequently-used monitoring Form Controls and form listeners
Form. Observer (form, interval, callback): If the value of any form control in the Form form changes, the callback function is automatically triggered after interval seconds. The form can be either the id attribute of the form or the form itself.
Form. Element. Observer (element, interval, callback): If the element value of the Form Control changes, the callback function is automatically triggered after interval seconds. This element can be the id attribute of the Form Control or the form control itself.
Routine:
// Trigger the <body> <form action = "#" method = "post" id = "test"> User name as long as the value of any form control is changed: <input type = "text" id = "user" name = "user"/> password: <input type = "text" id = "pass" name = "pass"/> </form> <script type = "text/javascript" src = "prototype. js "> </script> <script type =" text/javascript "> new Form. observer ("test", 1, function () {alert (this. getValue ());}); </script> </body> // triggered when the user name input box value changes <body> <form action = "#" method = "post" id = "test"> User Name: <input type = "text" id = "user" name = "user"/> password: <input type = "text" id = "pass" name = "pass"/> </form> <script type = "text/javascript" src = "prototype. js "> </script> <script type =" text/javascript "> new Form. element. observer ("user", 1, function () {alert (this. getValue () ;}); </script> </body>16. The Prototype library not only provides a series of custom classes and objects, but also extends some original classes and objects in JS.
Routine: Extended document
<Body> <script type = "text/javascript" src = "prototype. js "> </script> <script type =" text/javascript "> // bind the listener document to the loaded event of the document. observe ("dom: loaded", function (event) {$ ("show "). innerHTML + = ("Page Loading completed <br/>") ;}); // binds the event listener document for the: B event of the document. observe ("a: B", function (event) {$ ("show "). innerHTML + = ("myEvent is triggered <br/>"); $ ("show "). innerHTML + = ("event. memo. attribute Value of book: "+ event. memo. book) ;}); </script> <input type = "button" value = "Click me" onclick = 'document. fire ("a: B", {book: "Hadoop authoritative guide"}); '/> <div id = "show"> </div> </body>// A: B is a developer-defined "artificial synthesis" event. When you click the "click" button on the page, the program uses the document. fire () method to trigger the: B event.
// When the observe () method of document and Element is used to bind a "manually merged" event to the listener, the event name format of this event must be xx: xx
17. Support for Ajax by Prototype
(1) Use the Ajax. Request class
Routine: Enter the prompt effect
Html page code:
<Body> (2) Use Form. request () method
This method converts the form control to a request parameter. By default, an asynchronous request is sent to the URL specified by the form action.
Routine: Verify that the user is valid
Html page code:
<Body>
(2) Use Ajax. Responders object
This object is used to register the Ajax event listener. The Ajax event listener registered with this object can be automatically triggered no matter which XMLHttpRequest is interacting. Therefore, the event listener registered by Ajax. Responders is globally valid and can be used to monitor the interaction process of Ajax.
// Added the fruit.html <body> (3) Use the Ajax. Updater class
This class is simplified for the Ajax. Updater class. You do not need to use a callback function to use this class. This class can automatically display the server response in a container. When the server response is complete, the client html page does not need to use a callback function to parse the Server Response (you can also manually add a callback function), further simplifying Ajax Interaction Programming.
(4) use the Ajax. PeriodicalUpdater class
It is a periodic Ajax. updater class periodically sends requests to the server (you can also manually specify the timer object) and displays the server response in an element on the HTML page of the client.
How to Learn AJAX technology?
As a J2EE developer, we often seem to be concerned with backend mechanisms )". We often forget that the main success of J2EE lies in Web applications. Many reasons make people prefer to use Web to develop applications, however, it is mainly because of its ease of deployment that allows websites to own millions of users at the lowest possible cost. Unfortunately, over the past few years, we have invested too much time at the backend, but we have not invested enough in making our Web user interfaces more responsive and natural to users.
This article introduces a method called Ajax that can be used to build more dynamic and responsive Web applications. The key of this method is the combination of JavaScript, DHTML, and asynchronous communication with the server. This article also demonstrates how easy it is to enable this method: using an Ajax framework (DWR) to construct an application that communicates directly with the backend service from the browser. If used properly, this powerful force can make the application more natural and responsive, thus improving the user's browsing experience.
The sample code used in this application has been packaged as a separate WAR file for download.
Introduction
The term Ajax is used to describe a group of technologies that allow browsers to provide users with a more natural browsing experience. Before Ajax, the Web site forces the user to enter the submit/Wait/re-display example, and the user's actions are always synchronized with the "thinking time" of the server. Ajax provides the ability to communicate asynchronously with the server, freeing users from the loop of requests/responses. With Ajax, you can use JavaScript and DHTML to immediately update the UI when you click a button, and send an asynchronous request to the server for updating or querying the database. When a request is returned, you can use JavaScript and CSS to update the UI, instead of refreshing the entire page. Most importantly, users do not even know that the browser is communicating with the server: The Web site seems to be responding instantly.
Although the infrastructure required by Ajax has been around for a while, the real power of asynchronous requests has not been exploited until recently. It is really exciting to have a very responsive Web site, it eventually allows developers and designers to use standard HTML, CSS, and JavaScript stacks to create "desktop-like" availability.
Usually, in J2EE, developers focus too much on service and persistence layer development, so that the availability of user interfaces has lagged behind. In a typical J2EE development cycle, we often hear this: "We have no time to invest in the UI" or "HTML cannot be used for implementation ". However, the following Web sites prove that these reasons are no longer justified:
BackPack
Google Suggest
Google Maps
PalmSphere
All these Web sites tell us that Web applications do not have to rely entirely on re-loading pages from servers to present changes to users. Everything seems to happen in an instant. In short, when the response sensitivity of the user interface is involved, the benchmark is set higher.
Define Ajax
Jesse James Garnett of Adaptive Path defines Ajax as follows:
Ajax is not a technology. In fact, it is a combination of several booming technologies in a new and powerful way. Ajax includes:
Representation Based on XHTML and CSS standards;
Use Document Object Model for Dynamic Display and interaction;
Use XMLHttpRequest for asynchronous communication with the server;
Use JavaScript to bind everything.
This is very good, but why is it named after Ajax? In fact, the term Ajax was created by Jesse James Garnett, who said it was "Asynchronous JavaScript + XML shorthand ".
How Ajax works
The core of Ajax is the JavaScript Object XmlHttpRequest. This object is on the Internet... the remaining full text>
Struts2 framework learning notes and common js notes
I would like to recommend this website to you... above you: www.w3school.com.cn/js/index.asp
Reference: ogin_u
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
