Sixth Chapter Ajax

Ajax applications are usually just a block of code requests for HTML. This technique, known as Ahah (asynchronous HTTP and HTML, asynchronous HTTP and HTML), is implemented through jquery.

All AJAX requests are asynchronous by default.

For operations that must be deferred until the load is complete before they can continue, jquery provides a callback function that does not pass the callback function to perform the action after some effect is completed. The Ajax callback function is similar, except that the operation is performed after the data has been returned from the server.

1. Append HTML

2. Manipulating JavaScript

Get JSON

As we've seen before, JavaScript objects are made up of some key-value pairs, and they can be easily defined using curly braces {}. On the other hand, the array of JavaScript can use square brackets "" and the Diet statement

The incrementally increasing keys are dynamically defined. Combining these two grammars makes it easy to express complex and bulky data structures.

Douglas Crockford a name for this simple syntax called JSON (JavaScript Object notation, JavaScript objects notation). This representation makes it easy to replace the XML format with a large amount of data:

 {  " key   ": "   Value     " key1  "   : [  " array   " ,  "   of     " items  "   ]}

Based on the object literal and the numeric literal, the JSON-formatted syntax has a strong ability to express, but it also has some limitations on the values. For example, JSON specifies that multiple object keys and all string values must be enclosed in double quotation marks. And the function is not a valid JSON value. Because of these limitations, it is best that developers do not edit the JSON manually, but instead use the server-side language to generate it.

To obtain this data, you can use the $.getjson () method. This method processes the file after it has been obtained, parses the string, and supplies the resulting JavaScript object to the calling code.

　　Using the global jquery function

　　So far, the many jquery methods we have used need to be called through the $ () function to build a jquery object. With the selector expression, we can specify a set of Dom points to manipulate, but then use these jquery methods to manipulate them in some way. The $.getjson () function is not the same. Logically, there is no DOM element that the method applies to; The seat result object can only be supplied to the script, not to the page. To do this, Gerjson () is defined as a method of a global jquery object (a jquery live $ object defined by the jquery library), that is, he is not an individual JQuery object instance (that is, an object created through the $ () function).

If there are classes in JavaScript that resemble other object-oriented languages, we can call $.getjson () a similar method. For the sake of understanding, we call this a global function here; in fact, in order not to conflict with other function names, these global functions use the jquery namespace.

$.getjson () can accept the second parameter, which is the function that is called at the completion time. As mentioned above, Ajax requests are asynchronous, and the callback function provides a way to wait for the data to be returned, rather than executing the code immediately. The callback function also requires a parameter, and the returned data is stored in the parameter.

$.getjson (' B.json ', function (data))

You can traverse the JSON data structure through the data variable. Specifically, you need to iterate over the top-level array and build the appropriate HTML code for each item. While it is possible to use the standard for loop again, we need to take this opportunity to introduce another useful global function $.each () for jquery. The corresponding method is. each (). The $.each () function does not manipulate the jquery object, which takes an array or an object as the first argument, and a callback function as the second argument. In addition, you also need to set the two parameters of the current index and the current item seat callback function for Each loop in the array or object.

For the bold position, you need to read carefully, array or object as the first parameter (data), with the callback function as the second parameter function (entryindex,entry) {}entry is the classname//of creating div a little bit less understand this piece. Take note of the following words

Here, the $.each () function iterates through each item at once, building up the HTML code structure with the contents of the entry object. After building the HTML, insert it into <div> to replace the previous content with. html ().

It is understood through this passage. Entry is the object to be created and looks at the object entered for the database.

Although the JSON format is concise, he does not tolerate any errors. including square brackets, curly braces, quotation marks, and commas must be used reasonably and correctly, otherwise the file will not load. And in most browsers, we don't see any error message when the file fails to load, and the script knowledge silently terminates the operation completely.

3. Execute script

While it is possible to introduce <script> tags dynamically when needed, a more elegant way of requiring code is to load. js files directly through jquery.

Injecting a script into a page is as simple as loading an HTML fragment. But in this case, you need to use the global function $.getscript (), which is similar to his sibling function, and accepts a URL parameter to find the script file.

$.getscript (' c.js);

Scripts obtained in this manner are executed in the global context of the current page. This means that the script has access to functions and variables defined in the global environment, including, of course, jquery itself.

Stop here first, to learn about XML.

Sixth Chapter Ajax