Ajax manipulation of JavaScript objects

While it is convenient to get fully formatted HTML by request, it also means that you must transfer a lot of HTML tags while transferring text content. Sometimes, we want to be able to transfer as little data as possible and then process that data right away. In this case, we want to get a data structure that can traverse through JavaScript.
The Jqueiy can be used to traverse and manipulate the acquired HTML structure, but there is also a JavaScript built-in data format that reduces the amount of data transferred and reduces the number of encodings.
1. 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, an array of JavaScript can be dynamically defined using square brackets ([]) and implicitly-declared incrementally-incremented keys. Combining these two syntaxes makes it easy to express complex and bulky data structures.
S is the first letter of the synchronous, which is synchronous.
The author here means, if not Ajax, but Sjax, that is not asynchronous loading, but synchronous loading, then there is no such a big impact.
Douglas Crockford a name for this simple syntax, called JSON (JavaScript Object Notation, JavaScript objects notation). This notation makes it easy to replace an XML format with a large amount of data:

{"Key": "Value", "Key 2": ["Array", "of", "items"}

Based on the object literals and array literals, the JSON-formatted syntax has a strong ability to express, but it also has some limitations on the values. For example, JSON specifies that all object keys and all string values must be enclosed in double quotation marks. Also, 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 understand the syntax requirements of JSON and the advantages of it, there are languages that support this data format, please visit http://json.org/. If you encode the interpretation in the dictionary in this format, there may be many ways to encode it. Here, we put some dictionary entries in a JSON file called B.json, the code at the beginning of this file is as follows:

[{"term":  "BACCHUS", "part":  "N.", " Definition ": " a convenient deity invented by the ... "," quote ":  [" is  Public worship, then, a sin, "," That for devotions paid to bacchus "," The lictors dare to run us in, "," And resolutely thump and  whack us "]," author ": " Jorace "},{" term ": " Backbite "," part ": " v.t. "," Definition ":   "To speak of a man as you find him when ..."},{"term":  "BEARD", "part":  "N.", "definition":  "The hair that is commonly cut off  by ... "},...  file continues ... 

To obtain this data, you can use the $.getjs0n () method, which processes the file after it has been obtained. After the data is returned from the server, it is just a simple JSON-formatted text string. The $.getjson () method parses the string and supplies the resulting JavaScript object to the calling code.

2. Using the global jquery function
So far, the Xun query method we have used needs to be called by a jquery object built by the $ () function. With a selector expression, we can specify a set of DOM nodes to manipulate, and then manipulate them in some way using these jquery methods. However, the $.getjs0n () function is not the same. Logically, there is no DOM element that the method applies to, and the result object can only be supplied to the script, not to the page. To do this, getjs0n () is defined as a method of the global jquery object (the Jquery*$ object defined by the jquery library), that is, it 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 $.getjs0n () a class 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.
When using this function, we also need to pass the file name to it as before, as shown in Listing 6-3.
Code Listing 6-3

The unfinished Code $ (document). Ready (function () {$ (' #letter-B a '). Click (Function (event) {Event.preventdefault (); $.getjson (' B.json ');});

When you click the button, we don't see the effect of the above code. Because although the function call loads the file, it does not tell JavaScript how to handle the returned data. To do this, we need to use a callback function.
The $.getjson () function can accept the 2nd parameter, which is the function that is called when the load is complete. 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 that holds the returned data. Therefore, our code is written in Listing 6-4.
Code Listing 6-4

The unfinished Code $ (document). Ready (function () {$ (' #letter-B a '). Click (Function (event) {Event.preventdefault (); $.getjson (' B.json ', function (data) {});});

            We use anonymous function expressions here as callback functions, which are common in jquery code. Mainly to keep the code simple. Of course, a reference to a function declaration can also be used as a callback function.
           So we can traverse the JSON data structure through the data variable in the function. 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 here, we would like to take this opportunity to introduce another useful global function of jquery, $.each (), in the 5th chapter, we have seen its corresponding methods. each (). The $.each () function does not manipulate the jquery object, which takes an array or an object as the first parameter, and a callback function as the second argument. In addition, you need to use the current index and current item of the array or object in each loop as the two parameters of the callback function, see listing 6-5.
Code Listing 6-5

$ (document). Ready (function () {$ (' #letter-B a '). Click (Function (event) {Event.preventdefault (); $.getjson (' B.json '), function (data) {var html = '; $.each (data, function (Entryindex, entry) {html + = ' <div class= ' entry ' > '; HTML + = ' <  H3 class= "term" > ' + entry.term + ' 

Here, the $.each () function iterates through each item and constructs the HTML code structure using the contents of the entry object. After building the HTML, insert it into the <div id= "dictionary" >* by using. html () to replace all of the original content.
  Secure HTML  
            This approach requires that the data contain secure content that can be used directly to build HTML, for example, that the data cannot contain any < characters. 
 
           Now all that's left is to work with the citation in the entry, which requires another $.each () loop, see listing 6-6. 
           Code Listing 6-6 
$ (document). Ready (function ()  {$ (' #letter-b a '). Click (function)  {  Event.preventdefault (); $.getjson (' B.json ',  function (data)  { var html = '; $.each (data,  function (entryindex, entry)  { html +=  ' <div class= ' entry ">"; HTML  +=  ' 

After writing the code, you can click the next B link to verify our results, as shown in 6-4, the corresponding dictionary entry appears on the right side of the page.

Although the JSON format is concise, it does not tolerate any errors. All square brackets, curly braces, quotation marks, and commas must be used properly and correctly, otherwise the file will not load. And, in most browsers, we don't see any error messages when the file fails to load, and the script simply terminates the operation silently and completely.
Ajax manipulation of JavaScript objects