Talk about advanced Ajax development technology based on JSON

Ajax|js| Advanced

This article explains how to create a complex JSON data transfer layer between the client and the server using AJAX and the JSON Analyzer.

　　First, the introduction

There is no doubt that Ajax has become a powerful user interaction technology in today's web development, but many of its potential applications are still unknown. In this article, we'll explore how to use the JavaScript Object Flags (JSON) and the JSON parser to create a complex and powerful JSON data transfer layer between the server and the client Ajax engine. We will discuss in detail how to create a set of objects (often treated as a package in other languages), how to serialize these objects to JSON to send to the server side, and how to drag the server-side JSON to the client JavaScript object.

Tip: You can find the JSON analyzer used in this article on the Douglas Crockford Web site.

Before continuing, this article assumes that you have mastered JavaScript technology and learned how to create a basic AJAX engine and to send requests and receive responses from the server side via Ajax technology. To better understand the example in this article, you need to download the corresponding source file for this article.

　　Second, start

To further abstract our AJAX requests and to help us later share Ajax engine code among different applications, this article uses an AJAX engine that I created myself. To use this engine, we simply import three JavaScript files and send a request to an object named Ajaxupdater. The engine then takes care of other tasks, including the response agent to the callback method specified in the request. The following example shows how we can use this engine to make requests and import related files:

First, let's talk about JavaScript objects.

　　third, JavaScript objects

JavaScript has often been misunderstood, as if it were primarily used to achieve client-side graphical effects. In fact, JavaScript is a powerful language, especially when combined with Ajax and the server connected of an application, but even on the client side, JavaScript can achieve much more than you expect. Object-oriented JavaScript is an example that enables us to create objects, extend inner objects, and even create packages for our objects to be easier to manage.

In the example of this article, we will create three objects: Auto,car and wheel. Each of these is a simple object, and we use them only to show how to create a basic package.

First, the Auto object is declared as a new object:

var Auto = new Object ();

Note that this auto object will be used as the parent class for the car object. As a result, the car object becomes an attribute of the Auto object, except that it is separated into another file for easier management (the concept is often used in other object-oriented languages but not often mentioned in JavaScript). Here is the corresponding code for this car object:

Auto.car = new Object ();
Auto.Car.color = "#fff";
Auto.Car.setColor = function (_color)
{
Auto.Car.color = _color;
}
Auto.Car.setColor ("#333");

As you can see, the car object is a child object of the Auto object-this is clearly a class object hierarchy. This object has a property named color and a method for setting it. Here, we set the color property to gray to cover the default white. Remember this fact when we serialize the object later.

Next object, Wheel, is one of the child objects of the car:

Auto.Car.Wheel = new Object ();
Auto.Car.Wheel.color = "#000";

Here, Wheel is a basic object, but it shows another layer in the object hierarchy. This object has a property called color that has a default value of black ("#000").

Below, let's analyze why these objects are so important and how we use the simple attributes they provide.

　　Serialize JavaScript objects to JSON

With the help of the JSON parser, we can easily serialize the JavaScript object we just created into JSON. First, we need to download a copy of the parser and add it to the document. Here's the code I used to import the script in this example:

I've added the parser to my JavaScript directory, a subdirectory called Utils.

The following is the final code fragment that is included to import the appropriate JavaScript file:

After importing the appropriate files, we can begin serialization by simply adding the two div elements and an onload event to the HTML document. These two DIV elements will have id:body and loading respectively. Where the loading tag will be used by the Ajax engine to indicate progress, and the body tag will be used to display the message.

The OnLoad event corresponds to the BODY element and sets its innerHTML property to be a JavaScript object (as a serialized JSON string). To do this, I used the toJSONString method in the Jsonparser.js file on the Auto object:

This code uses the Auto object and all of its child objects, and serializes them into a JSON string using the toJSONString method of the JSON parser. The data can then be used as a data interchange format on the server side.

As you may recall, in the front we called a method called SetColor to change the color of the car object. At the time, I used it because I wanted to show you that serialization can be implemented at any point in the runtime, but also to reflect the most recent data in the object.

If you analyze the onload incident carefully, you will notice that the car and wheel objects are wrapped in square brackets, which represent the parent object (that is, auto). This means that the serialized JavaScript object can be sent to the server side at run time to store the most current data, and can also be received from the server side when the application is started to retrieve most of the present data from the database. The best part is that in order to create a "seamless" process, all data exchanged with the server can be implemented using JSON technology.

Below, let's look at how the same data is received from the server side and how they are serialized to the client JavaScript object using the latest data (typically from a database).

　　v. Drag JSON to client JavaScript objects

In this article, I simply created a static file as a JSON response, but in actual development, you can store the data in a database and return it using a server-side language. Based on this capability, we can easily create a powerful data exchange process! We have analyzed this serialization process before. With a basic AJAX experience, you should be able to understand how data is sent to the server side. Now, let's start with the discussion of drag. Let's start with a static JSON file that is provided for the example in this article. This file is actually the data we serialized in the previous section:

{' car ': {' color ': ' #333 ', ' Wheel ': {' color ': ' #000 '}}}

As an example of a request for a JSON file, we will request this serialized auto object when we click on the following link:

get Remote JSON

Once a response message is received, our called Displayresponse callback method is activated, and then we can drag and start using these objects:

<

This is quite an exciting part! Once we have the responsetext, we can simply use the Parsejson method in the JSON Analyzer to reconstruct our auto objects from serialized data. With this new auto object, we can invoke the corresponding child object. This feature allows us to send objects back and forth between the server and the client-without doing a lot of analysis, but we would have to do so in the context of the previous standard XML response. In this way, we can create a client JavaScript object that can preserve its state based on Ajax technology