Ajax Study Notes (2)

Last Update:2014-07-17 Source: Internet

Author: User

Tags map data structure tojson

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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.
8. Use an objectrange object: An objectrange object represents a range.

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
Form. element is used to operate form controls. It can be used to activate form controls. It can be used to determine whether a form control is empty, and series form controls can be cleared.
10. Use form to operate the form. Note: form. element is used to operate the specified form control, while form is used to operate the specified form (or all the controls in the form)
11. Use a hash object
A hash object is a data structure similar to map in Java. It is a set of key-value pairs. Each item of the hash object is an array containing two elements. The first item is the key and the second item is the value.
You can use the $ H function to convert a common object to a hash object, and then use the hash object method to conveniently access all attributes and attribute values of the object.
12. Use event to simplify event Programming

<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 = "<H2> Haha <H2>"; </SCRIPT> </body> // the above Code does not use the original event model, instead, event-based event simplification eliminates browser differences in the event model.

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 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.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More