Ajax Learning (3)-using XML in requests and responses (1)

XMLIt is one of the most common data formats in programming. It can bring tangible benefits to server responses in asynchronous applications. It is no exception in Ajax.

The Ajax application is represented by the name selected for its core object --XMLHttpRequestThis name is not very good because it does not reflect the actual technical situation. In other words, most people think that XML is the core component of Ajax, just because they take it for grantedXMLHttpRequestThe object uses XML at any time. But this is not the case. The first part of this article provides the reason. In fact, XML rarely appears in most Ajax applications. XML is indeed applied in Ajax, andXMLHttpRequestThis method is also supported. There is nothing that can block you from sending XML to the server.

Use of XML in Ajax

There are two basic usage of XML in asynchronous applications:

1. Send requests from the webpage to the server in XML format

2. Receive requests from the server in XML format on the webpage

The first method is to send a request in XML. You need to set the request format to XML. You can use the API to complete the request, connect the request to the text, and then send the result to the server. In this way, the main task is to construct a request in a way that complies with XML rules and can be understood by the server. Therefore, the key here is actually the XML format. After obtaining the data to be sent, you only need to wrap it in XML syntax. This article will discuss the usage of XML in Ajax Applications later.

The second method is to use XML to receive requests. You need to receive responses from the server and then extract data from the XML (likewise, you can use APIs or the brute force method ). In this case, the key lies in the data from the server, and you just need to extract the data from the XML for use.

XML from client to server

In your 90% web applicationName/valueSend requests to the server. For example, if you enter the name and address in the webpage form, you may want the data to take the following form:

firstName=Larry lastName=Gullahorn street=9018 Heatherhorn Drive city=Rowlett state=Texas zipCode=75080

Listing 1. Using plain text to send name/value pairs

function callServer() { // Get the city and state from the Web form var firstName = document.getElementById("firstName").value; var lastName = document.getElementById("lastName").value; var street = document.getElementById("street").value; var city = document.getElementById("city").value; var state = document.getElementById("state").value; var zipCode = document.getElementById("zipCode").value; // Build the URL to connect to var url = "/scripts/saveAddress.php?firstName=" + escape(firstName) + "&lastName=" + escape(lastName) + "&street=" + escape(street) + "&city=" + escape(city) + "&state=" + escape(state) + "&zipCode=" + escape(zipCode); // Open a connection to the server xmlHttp.open("GET", url, true); // Set up a function for the server to run when it's done xmlHttp.onreadystatechange = confirmUpdate; // Send the request xmlHttp.send(null); }

Convert name/value pairs into XML

If you want to use XML as the data format, you must first find a basic XML format to store data. Obviously, name/value pairs can all be converted into XML elements, where names are used as element names and values are used as element content:

<firstName>Larry</firstName> <lastName>Gullahorn</lastName> <street>9018 Heatherhorn Drive</street> <city>Rowlett</city> <state>Texas</state> <zipCode>75080</zipCode>

Of course, XML requires a root element.Document snippets(Part of the XML document) requires a closed element. Therefore, you may need to convert the preceding XML into the following format:

<address> <firstName>Larry</firstName> <lastName>Gullahorn</lastName> <street>9018 Heatherhorn Drive</street> <city>Rowlett</city> <state>Texas</state> <zipCode>75080</zipCode> </address>

Now, you can basically create this structure on the Web Client and send it to the server.

Communication:

Before transmitting XML over the network, ensure that the server and the script for sending data can accept XML. It seems redundant for many people to emphasize it now and takes it for granted. However, many new users often think that XML can be correctly received and interpreted as long as it is sent over the network. In fact, two steps are required to ensure that the XML data sent can be correctly received:

1. Make sure that the XML script sent to it can accept the XML data format.

2. Ensure that the script recognizes the specific XML format and structure used to send data.

Both of these two aspects may require you to communicate with each other, and you must clearly inform the other party! Strictly speaking, if you really need to send XML data, most script authors will help you, so it is not difficult to find scripts that can accept XML. However, you still need to ensure that the format is what the script expects. For example, assume that the server accepts data in the following format:

<profile> <firstName>Larry</firstName> <lastName>Gullahorn</lastName> <street>9018 Heatherhorn Drive</street> <city>Rowlett</city> <state>Texas</state> <zip-code>75080</zip-code> </profile>

It looks similar to the XML above. There are only two differences:

1. XML from the client is encapsulated inaddressElement, but the server requires data to be encapsulated inprofileElement.
2. XML from the client is usedzipCodeWhile the server wants the zip code to be placed inzip-codeElement.

On a large scale, these minor problems are only the difference between the server receiving and processing data, but the server will completely fail and display ambiguous error messages on the webpage (possibly to its users. Therefore, you must specify the desired format of the server and insert the data to be sent into that format. Then, only in this case will the real technical problem of sending XML data from the client to the server be involved.

Send XML to the server

When sending XML to the server, more code is used to get data and package it into XML, instead of actually transmitting data. In fact, as long as the XML string sent to the server is ready, the sending work is the same as the normal text. Use XML to send name/value pairs:

function callServer() { // Get the city and state from the Web form var firstName = document.getElementById("firstName").value; var lastName = document.getElementById("lastName").value; var street = document.getElementById("street").value; var city = document.getElementById("city").value; var state = document.getElementById("state").value; var zipCode = document.getElementById("zipCode").value; var xmlString = "<profile>" + " <firstName>" + escape(firstName) + "</firstName>" + " <lastName>" + escape(lastName) + "</lastName>" + " <street>" + escape(street) + "</street>" + " <city>" + escape(city) + "</city>" + " <state>" + escape(state) + "</state>" + " <zip-code>" + escape(zipCode) + "</zip-code>" + "</profile>"; // Build the URL to connect to var url = "/scripts/saveAddress.aspx"; // Open a connection to the server xmlHttp.open("POST", url, true); // Tell the server you're sending it XML xmlHttp.setRequestHeader("Content-Type", "text/xml"); // Set up a function for the server to run when it's done xmlHttp.onreadystatechange = confirmUpdate; // Send the request xmlHttp.send(xmlString); }

Most of the code is very simple. It is worth mentioning in a few places. First, the data in the request must be manually formatted as XML. After reading three articles about object types in the document, is it easy to discuss it? Although it is not allowed to use Dom to create XML documents in Javascript, DOM objects must be converted into text before they are sent to the network through get or POST requests. Therefore, it is easier to format data using regular string operations. Of course, errors and incorrect input may easily occur, so you must be very careful when writing the code for processing XML.

After the XML is created, the connection is opened in the same way as the sent text. It is best to use post requests for XML, because some browsers limit the length of the GET request string, while XML may be very long. You can see that the get method is changed to the POST method in the code segment. In addition, XML usessend()Instead of appending the parameters at the end of the request URL. These are all very subtle differences and can be easily modified.

However, you must write a new line of code:

xmlHttp.setRequestHeader("Content-Type", "text/xml");

It seems hard to understand. It only tells the server to send XML instead of common name/value pairs. In either case, the sent data is text,text/xmlOr XML is sent as plain text. If you use a name/value pair, the corresponding row should be:

xmlHttp.setRequestHeader("Content-Type", "text/plain");

If you forget to tell the server that XML is sent, a problem occurs, so do not forget this step.

After this is done, the rest is to callsend()And passed in the XML string. The server will receive your XML request (assuming the preparation is ready), accept the XML, interpret it, and then return a response. In fact, there is only so much to do-XML requests only need to slightly modify the code.

In the next article, we will introduce how the Server accepts XML.