Ajax Learning (5)-data transmission using JSON

When sending and receiving information in an asynchronous application, you can select plain text and XML as the data format. Another useful data format of AJAX is JavaScript Object Notation (JSON), which makes it easier to move data and objects in applications.
How to properly use plain text and simple name/value pairs in many asynchronous applications. Data can be combined into the following form:

Mailto: firstname = Brett & amp; lastname = Mclaughlin & amp; email = brett@newInstance.com

In this way, you do not need to do anything else. In fact, the Web veteran will realize that the information sent through the GET request adopts this format.
If the XML data format is used, you can combine the data into the following form:

<Request>
<Firstname> Brett </firstname>
<Lastname> McLaughlin </lastname>
<Email> brett@newInstance.com </Email>
</Request>

The data here is the same as the data shown above, but this time the XML format is used. This is nothing remarkable; it is just another data format that enables us to use XML instead of plain text and name/value pairs.
In fact, unless there are some restrictions that force you to switch to XML, you do not need to consider using other data formats. Obviously, if you want to send data to a server program that requires XML format input, you want to use XML as the data format. However, in most cases, XML is a better choice for servers that need to send multi-segment information to applications. In other words, XML is generally more suitable for responding to Ajax applications, instead of using Ajax applications

Send requests sequentially.
When using name/value pairs or XML, you actually use JavaScript to retrieve data from the application and convert the data to another data format. In these cases, JavaScript, as a data manipulation language, is used to move and manipulate data from web forms, and convert the data into a format suitable for sending to the server program. ,
However, sometimes Javascript is not just used as a formatting language. In these cases, the object in Javascript is used to represent data, not only to put data from web forms into the request. In these cases, extract data from the JavaScript Object and then put the data into the name/value pair or XML. JSON: JSON allows you to easily convert JavaScript objects into data that can be sent along with the request (both synchronous and asynchronous ).

1. JSON can convert a set of data in a javascript object to a string, and then it can be easily transferred between functions, alternatively, the string is transmitted from the Web Client to the server in an asynchronous application.

Program. This string looks a bit odd (several examples will be seen later), but javascript can easily explain it, and JSON can represent a more complex structure than name/value pairs. For example, it can represent arrays and complex objects, not just a simple list of keys and values.

(1) Simple JSON example:
In the simplest form, you can use the following JSON to represent name/value pairs:
{"Firstname": "Brett "}
This example is very basic and actually takes more space than the equivalent plain text name/Value Pair:
Firstname = Brett
However, when multiple name/value pairs are concatenated, JSON will reflect its value. First, you can create records that contain multiple name/value pairs, for example:
{"Firstname": "Brett", "lastname": "McLaughlin", "email": "brett@newInstance.com "}

In terms of syntax, this is not a great advantage over name/value pairs, but JSON is easier to use and more readable in this case. For example, it explicitly indicates that the above three values are part of the same record; curly braces

These values have a certain relationship.

(2) array of values:
To represent a group of values, JSON not only improves readability, but also reduces complexity. For example, assume that you want to list a person's name. In XML, many start and end tags are required. If a typical name/value pair is used (like the name/value pair seen in the previous articles in this series ), you must either create a proprietary data format or change the key name to a person1-firstName.
If JSON is used, you only need to group multiple records with curly braces:

{"People ":[
{"Firstname": "Brett", "lastname": "McLaughlin", "email": "brett@newInstance.com "},
{"Firstname": "Jason", "lastname": "Hunter", "email": "jason@servlets.com "},
{"Firstname": "elliotte", "lastname": "Harold", "email": "elharo@macfaq.com "}
]}

2. Use JSON in javascript:
(1) Assign JSON data to the variable
For example, you can create a new JavaScript variable and assign a value to the JSON-format data string:

VaR people =
{"Programmers ":[
{"Firstname": "Brett", "lastname": "McLaughlin", "email": "brett@newInstance.com "},
{"Firstname": "Jason", "lastname": "Hunter", "email": "jason@servlets.com "},
{"Firstname": "elliotte", "lastname": "Harold", "email": "elharo@macfaq.com "}
],
"Authors ":[
{"Firstname": "Isaac", "lastname": "Asimov", "genre": "Science Fiction "},
{"Firstname": "tad", "lastname": "Williams", "genre": "Fantasy "},
{"Firstname": "Frank", "lastname": "Peretti", "genre": "Christian fiction "}
],
"Musicians ":[
{"Firstname": "Eric", "lastname": "Clapton", "instrument": "Guitar "},
{"Firstname": "Sergei", "lastname": "Rachmaninoff", "instrument": "Piano "}
]
}

This is very simple; now people contains the data in JSON format as shown above. However, this is not enough, because the data access method does not seem obvious.
(2) Access Data
To access the first project name in the programmers list, use the following code in javascript:

People. Programmers [0]. lastname;
 
Note that the array index starts from scratch. Therefore, this line of code first accesses the data in the people variable, then moves to the entry called programmers, and then to the first record ([0]). Finally, it accesses the value of the lastname key. The result is the string value "McLaughlin ".
The following are examples of using the same variable.

People. Authors [1]. Genre // value is "Fantasy"
People. Musicians [3]. lastname // undefined. This refers to the fourth entry, and there isn't one
People. Programmers. [2]. firstname // value is "elliotte"

With this syntax, You can process data in any JSON format without using any additional JavaScript toolkit or API.

(3) Modify JSON data
Just as you can access data with periods and parentheses, you can easily modify the data in the same way:

People. Musicians [1]. lastname = "Your maninov ";
 
After converting a string to a JavaScript Object, you can modify the data in the variable as follows.
(4) convert back to string
Of course, if you cannot easily convert an object back to the text format mentioned in this article, all data modifications are of little value. In JavaScript, this conversion is also very simple:

String newjsontext = people. tojsonstring ();

That's all! Now you can obtain a text string that can be used anywhere. For example, you can use it as a request string in an Ajax application.
More importantly, any JavaScript Object can be converted to JSON text. It is not only applicable to variables that are originally assigned values using JSON strings. To convert an object named myobject, you only need to execute the same command:
String myobjectinjson = myobject. tojsonstring ();
 
This is the biggest difference between JSON and other data formats. If JSON is used, you only need to call a simple function to obtain formatted data and use it directly. For other data formats, the conversion between the original data and the formatted data is required. Even if you use an API like Document Object Model (which provides a function to convert your data structure to text), you also need to learn this API and use the object of the API, instead of using native JavaScript objects and syntaxes.