Advanced Ajax development Technology based on JSON

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:

The following is a reference fragment:

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:

The following is a reference fragment:
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:

The following is a reference fragment:
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:

The following is a reference fragment:
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").