The security analysis of Ajax in Web development

　　What about the security of Ajax in Web development ? Now browsers allow users to improve their security levels, turn off JavaScript technology, and disable any options in the browser. In this case, the code will not work anyway. The problem must be dealt with properly at this time, which requires a separate article to discuss, to be put into the future (is this series long enough?) Don't worry, you may have mastered it before you read it. Writing a robust but less-than-perfect code now is good for mastering Ajax. We will discuss more details in the future.

Requests/responses in the Ajax world

Now that we've covered Ajax, we have a basic understanding of the XMLHttpRequest object and how to create it. If you read carefully, you may already know that JavaScript technology is dealing with WEB applications on the server, rather than HTML forms that are submitted directly to that application.

What else is missing? How to use XMLHttpRequest. Because this code is very important, every AJAX application you write will have to use it in some way, first look at the basic AJAX request/response model.

Making a request

You've got a brand-new XMLHttpRequest object, now let it do something. First you need a JavaScript method that a Web page can invoke (for example, when the user enters text or selects an item from the menu). The next step is a process that is basically identical in all Ajax applications:

1. Get the data you need from your Web form.

2. Establish the URL to connect to.

3. Open the connection to the server.

4. Set the function that the server will run after it completes.

5. Send the request.

The example Ajax method in Listing 5 is organized in this order:

Listing 5. Making an Ajax request

function CallServer () {

Get the "city" and state from the Web Form

var city = document.getElementById ("City"). Value;

var state = document.getElementById (' state '). Value;

Only go in if there are values for both fields

if (city = null) | | (City = = "")) Return

if ((state = null) | | (state = = "")) Return

Build the URL to connect to

var url = "/scripts/getzipcode.php?city=" + Escape (city) + "&state=" + Escape (state);

Open a connection to the server

Xmlhttp.open ("Get", url, True);

Setup a function for the "server to run" when it's done

Xmlhttp.onreadystatechange = Updatepage;

Send the request

Xmlhttp.send (NULL);

}

Most of the code has a clear meaning. The starting code obtains the values of several form fields using basic JavaScript code. Then set a PHP script as the target of the link. Notice how the script URL is specified, and city and state (from the form) are appended to the URL with a simple get parameter.

Then open a connection, which is the first time you see Using XMLHttpRequest. The connection method (get) and the URL to connect are specified. If the last argument is set to True, an asynchronous connection will be requested (this is the origin of Ajax). If you use False, the code will wait for the response returned by the server after it makes a request. If set to True, the user can still use the form (or even invoke other JavaScript methods) when the server is processing the request in the background.

XmlHttp (Remember, this is the XMLHttpRequest object instance) onReadyStateChange property tells the server what to do after the run is completed (it may take five minutes or five hours). Because the code does not wait for the server, you must let the server know what to do so that you can respond. In this example, if the server has finished processing the request, a special method named Updatepage () will be triggered.

Finally, use the value NULL to call Send (). Because the data to be sent to the server (city and state) has been added to the request URL, no data needs to be sent in the request. This makes the request, and the server works according to your requirements.

If you don't find anything new, you should realize how simple and clear it is! This is fairly straightforward, apart from remembering the asynchronous nature of Ajax. It should be appreciated that Ajax allows you to concentrate on writing beautiful applications and interfaces without worrying about complex HTTP request/response code.

The code in Listing 5 illustrates the ease of use of Ajax. The data is a simple text that can be used as part of the request URL. Send a request with a get instead of a more complex POST. There is no XML and the header to add, there is no data to send in the request body, in other words, this is the utopia of Ajax.