Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about the advanced AJAX development technology based on JSON. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

I. introduction

There is no doubt that AJAX has become a powerful user interaction technology in today's Web development, but many of its possible applications are still unknown. In this article, we will explore how to use JavaScript object flags (JSON) and JSON parsers to create a complex and powerful JSON data transport 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 for sending to the server, and how to turn the server-side JSON acting into client-side JavaScript objects.

Tip: you can find the JSON analyzer used in this article on the Douglas Crockford website.

Before moving on, assume that you have mastered JavaScript technology and know how to create a basic AJAX engine and make requests to and receive responses from the server through AJAX technology.

2. Start

To further abstract our AJAX request and help us later share AJAX engine code between different applications, this article uses an AJAX engine that I created myself. To use this engine, we simply import three JavaScript files and make a request to an object named AjaxUpdater. The engine is then responsible for handling other tasks, including proxying the response 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 clip:

< script type= "text/javascript" src= "javascript/model/Ajax.js" > < / script >

< script type= "text/javascript" src= "javascript/model/HTTP.js" > < / script >

< script type= "text/javascript" src= "javascript/model/AjaxUpdater.js" > < / script >

< script type= "text/javascript" >

Document.load = AjaxUpdater.Update ('GET', URL, callback)

< / script >

First, let's talk about the JavaScript object.

3. JavaScript object

JavaScript has often been misunderstood in the past, as if it is mainly used to implement client-side graphics. In fact, JavaScript is a powerful language, especially when combined with AJAX and the server side of an application; but even on the client side, JavaScript can achieve much more functionality than you might expect. Object-oriented JavaScript is an example, which enables us to create objects, extend internal objects, and even create packages of our objects for easier management.

In the example in this article, we will create three objects: Auto,Car and Wheel. Each of them is a simple object; here, we only use them to show how to create a basic package.

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

The following is a reference clip:

Var Auto = new Object ()

Note that this Auto object will be used as the parent class of the Car object. As a result, the Car object will become a property of the Auto object, except that it is separated into another file to make it easier to manage (this concept is often used in other object-oriented languages, but it is not often mentioned in JavaScript). Here is the code for this Car object:

The following is a reference clip:

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 of the Auto object-this is clearly a class object hierarchy. This object has a property named color and a method to set it. Here, we set the color property to gray to override the default white. Keep this fact in mind when we serialize the object later.

The next object, Wheel, is a child of Car:

The following is a reference clip:

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 with a default value of black ("# 000").

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

Serialize the JavaScript object 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 is the corresponding code I used to import the script in the example of this article:

The following is a reference clip:

< script type= "text/javascript" src= "javascript/utils/jsonparser.js" > < / script >

I have added the parser to my javascript directory, a subdirectory called utils.

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

The following is a reference clip:

< script type= "text/javascript" src= "javascript/Auto.js" > < / script >

< script type= "text/javascript" src= "javascript/Car.js" > < / script >

< script type= "text/javascript" src= "javascript/Wheel.js" > < / script >

< script type= "text/javascript" src= "javascript/utils/jsonparser.js" > < / script >

< script type= "text/javascript" src= "javascript/model/Ajax.js" > < / script >

< script type= "text/javascript" src= "javascript/model/HTTP.js" > < / script >

< script type= "text/javascript" src= "javascript/model/AjaxUpdater.js" > < / script >

After importing the appropriate file, we can start serialization by simply adding two div elements and an onload event to the HTML document. These two div elements will have ID:body and loading, respectively. Where this loading tag will be used by the AJAX engine to indicate progress, and the body tag will be used to display messages.

The following is a reference clip:

< div id= "loading" > < / div >

< div id= "body" > < / div >

The onload event corresponds to the body element and sets its innerHTML property to the JavaScript object (as a serialized JSON string). To achieve this, I used the toJSONString method in the jsonparser.js file on the Auto object:

The following is a reference clip:

< body onload=document.getElementById ('body') [xss_clean] =' < b > Local objects serialized as JSON < / b > Auto Object:'+ Auto.toJSONString (); ">

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

You may recall that earlier 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 at run time, but also to reflect the data in the object.

If you take a closer look at the onload event, 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 at run time to store * data, and can also be received from the server at application startup to retrieve most of the current data from the database. The best part is that in order to create a "seamless" process, all data exchanges with the server can be implemented using JSON technology.

Next, let's take a look at how the same data is received from the server and how it is serialized into client-side JavaScript objects using * data (typically, from a database).

Turn the JSON acting line into a client-side JavaScript object

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

The following is a reference clip:

{"Car": {"color": "# 333", "Wheel": {"color": "# 000"}

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

The following is a reference clip:

< a href= "_ javascript:AjaxUpdater.Update ('GET',' json/data.js', displayResponse);" > Get remote JSON < / a >

Once we receive the response message, our method called displayResponse callback is activated, and then we can act out the line and start using these objects:

The following is a reference clip:

< script type= "text/javascript" >

Function displayResponse ()

{

If (Ajax.checkReadyState ('loading') = = "OK")

{

Var Auto = Ajax.request.responseText.parseJSON ()

Document.getElementById ("body") [xss_clean] + = "< b > Remote JSON unserialized < / b >";

Document.getElementById ("body") [xss_clean] + = "Car color:" + Auto.Car.color

Document.getElementById ("body") [xss_clean] + = "Wheel color:" + Auto.Car.Wheel.color

}

}

< / script >

This is a rather exciting part! Once we have the responseText, we can simply use the parseJSON method in the JSON parser to rebuild our Auto object from the serialized data. With the help of this new Auto object, we can call the corresponding child object. This feature allows us to send objects back and forth between the server and the client-without having to do a lot of analysis, which we would have to do in the case of previous standard XML responses. In this way, we can create client-side JavaScript objects that can retain their own state based on AJAX technology.

This is what the editor shares with you about the advanced JSON-based AJAX development technology. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.