HTML and CSS Reference
In-Depth Information
EXAMPLE
18.17 (
CONTINUED
)
<p>
<input type="button" value="submit"
onClick="ajaxFunction()"
;/>
</form>
<div id="message" class="divStyle">
</div>
</p>
</body>
</html>
EXPLANATION
1
When the
XMLHttpRequest
object is initialized, the
open()
method takes two pa-
rameters in this example: the HTTP method is POST, and the URL is the name of
the server-side PHP script that will process form input sent by the server. The de-
fault is asynchronous,
true
, specified as a third parameter.
2
With the POST method another header is sent to the server specifying the “Con-
tent-type”.
3
Instead of sending the query string as a set of parameters to the
open()
method,
they are sent to the server by the
send()
method.
4
This is where the HTML form starts. There are no attributes.
What is JSON? JSON,
JavaScript O
bject
N
otation, like Ajax, is not a programming lan-
guage, but a subset of JavaScript. It is a text-based format that provides an easy way to
exchange and parse data over a network. Although JSON was originally tied to Java-
Script, it is language independent and is now used by Ruby, PHP, C++, Python, Java, Perl,
and so on. The JSON format is often used for serialization and transmitting structured
data with Ajax.
If you recall, in Example 18.11 when using Ajax and XML, there was a lot involved.
First, you had to understand how XML structures its data, and next how to create the
XML DOM object when the server returns the contents of the XML file, and finally how
to use the DOM to parse the data. JSON offers a nice alternative to using XML. Instead
JSON represents data as an array or associative array (JavaScript object) and any lan-
guage that supports this representation of data can use it.
Most modern browsers are providing an implementation of native JSON so that you
can use parse and string methods provided by the browser to handle JSON data. For
example, Firefox 3.5, Internet Explorer 8, Google Chrome, and Apple Safari have intro-
duced support for native JSON, and the ECMAScript Fifth Edition (ES5) Draft Specifi-
cation is being finalized to support it. Using native JSON is much faster and convenient
than importing libraries. There are a number of Ajax frameworks including Yahoo! UI
