Học JavaScript qua ví dụ part 91 ppt

ptg
797
chapter
18
An Introduction to
Ajax (with JSON)
18.1 Why Ajax?
JavaScript has gone through kind of a Renaissance of its own since this book was first
published in 2002 largely due to the hype and promises it offers. Traditionally Web
applications have been somewhat clumsy and slow, and the level of interactivity and
usability inferior to their counterpart desktop applications, yet the number of Web
applications available continues to grow at an amazing rate. Part of that growth has been
spurred on by AJAX, “Asynchronous JavaScript and XML,”
1
not a new programming
language, but a methodology for creating fast, rich, user-friendly, and interactive Web
applications by allowing a Web page to request small fragments of information from the
server instead of an entire page. In this approach, asynchronous means that when a
request is initiated by the occurrence of a client event, JavaScript functions using Ajax
allow the browser to interact in the background directly with the server, and rather than
waiting for the server to respond, continue processing the page. The server will then
send its response to Ajax containing only the data that needs changing. Ajax in turn will
update that portion of the Web page. For example, if you are filling out a form, instead
of waiting until all the fields have been filled and the page submitted, now with Ajax,
the fields can be validated as they are filled and the user does not have to sit by waiting
for the page to reload before continuing what he or she was doing. This process is shown
in Figure 18.1.
As discussed in Chapter 1, “Introduction to JavaScript,” Google offers great exam-
ples of Ajax with Google Maps and Google Suggests, an application shared now by all
major browsers. (In fact, Ajax was made popular in 2005 with Google Suggest.) When
the you start searching in the Google search box, each time you press a key, Google

lists items that fit that sequence of letters. In a drop-down list, as if by magic, words
appear that contain those letters, and after each subsequent key press, the list changes,
1. The term Ajax was coined in 2005. Jesse James Garrett thought of the term while in the
shower. See /> From the Library of WoweBook.Com
ptg
798 Chapter 18 • An Introduction to Ajax (with JSON)
reflecting a more refined search. This dynamic and immediate update of the list is an
example of Ajax in action. In Figure 18.2, the letters j, a, and v have been typed in the
search box. A list of words appears starting with those letters. The user can select any
of the suggested items and search for that item without typing any more if he or she
sees a word that matches his or her search criteria. There is no delay, no waiting with
an Ajax application.
18.2 Why Is Ajax Covered Last?
Why is Ajax the last chapter in this book? If you browse around the Internet for books
or tutorials on Ajax, you will soon realize that Ajax requires that you have some basic
understanding of everything we have talked about in the preceding chapters because
Figure 18.1 The request/response loop with and without Ajax.
Server
Browser
HTTP request
response
Non-Ajax Way
User requests a page via URL
Server gets the page,
sends it to the browser
Server
Browser
HTTP request
User fills out a form and
submits it, then waits

Server works, validates form,
open database, etc.
Server
Browser
response
Page is reloaded,
user continues
Server
Browser
HTTP request
response
Ajax Way
User requests a page
Server sends
back page
Server
Communication
layer
Browser
Communication
layer
User starts filling out form, triggers
an event by changing a value
or moving a key
Server
Browser
Page not
reloaded, user
not interrupted
Ajax updates Web

page in increments
Ajax makes
incremental function
calls to the server in
the background
From the Library of WoweBook.Com
ptg
18.3 The Steps for Creating Ajax Communication 799
Ajax is based on already existing standards. If you have a strong foundation in the fol-
lowing topics, there is very little new to learn:
• JavaScript
• XML
• HTML
• CSS
• DOM
We have not covered XML in this book, but it has been a standard format since 1998
for sharing structured text-based information between computers. XML is not a require-
ment for writing Ajax applications, but we will examine an XML document and how
Ajax processes its data.
18.3 The Steps for Creating Ajax
Communication
We will now go through the steps to create and send requests to the server. We examine
each of these steps and then put all of them together in several examples.
1. First and foremost we must create an XMLHttpRequest object, a JavaScript
object with properties and methods used to handle communication between the
browser and server.
2. After we create the request object, we use the object’s open() method to initial-
ize the object; that is, tell it how the data will be sent, GET or POST (see
Chapter 11, “Working with Forms and Input Devices”), and the URL of the file
data that is being requested. The URL could be a text file, XML data, or a server-

side program such as PHP, ASP.NET, CGI, Java Servlet, and so on.
Figure 18.2 Google Suggests. © 2010 Google.
From the Library of WoweBook.Com
ptg
800 Chapter 18 • An Introduction to Ajax (with JSON)
3. The request is sent to the server with the send() method.
4. After the request is sent to the server, the object’s readyState property keeps
track of the state of the request object; for example, if a request has been made,
the state changes. With an event handler, a callback function can be executed
based on the state of the object. If, for example, the request has been answered
and all the information has been sent by the server, the state of the object can be
checked and a function called to retrieve and handle the data.
Now we will take a closer look at each of the steps to create Ajax communication
between the browser and the server.
18.3.1 Step 1: Create the XMLHttpRequest Object
With the HTTP request/response cycle we discussed at the beginning of the book, when
the user clicks a link, submits a form, or types an address in the URL, an HTTP connec-
tion is made between the browser and the server. The server’s response is to send back
a new or updated page while the user waits. With applications that make asynchronous
calls to the server, there has to be a way to do this without refreshing the page for each
HTTP request. This is done with the XMLHttpRequest object. This object allows Java-
Script to set up a communication channel with the server, exchange data, and update
the page without reloading it. Meanwhile the user continues scrolling, typing, and push-
ing buttons just as he or she would on a desktop application, while Ajax is working with
the server in the background.
The XMLHttpRequest object is supported by all major browsers (Firefox, Chrome,
Opera, and Safari) and is fundamental to all Ajax applications. Internet Explorer 7 comes
with the XMLHttpRequest, but other versions of Internet Explorer support the ActiveX
object, which is not cross-browser compliant. Therefore, when creating a new XMLHttpRe-
quest object, most JavaScript programs use catch and try statements to make sure the object

they get back is compatible with their browser. (See Chapter 7, “Functions,” for a review
of catch and try.) Example 18.1 demonstrates how to create the XMLHttpRequest object for
most major browsers. See />EXAMPLE 18.1
/* Check browser type and create ajaxRequest object
Put this function in an external .js file and use it for your
Ajax programs */
1 function CreateRequestObject(){
2 var ajaxRequest; // The variable that makes Ajax possible!
3 try{
// Opera 8.0+, Firefox, Safari
4 ajaxRequest = new XMLHttpRequest(); // Create the object
}
From the Library of WoweBook.Com
ptg
18.3 The Steps for Creating Ajax Communication 801
Properties and Methods. The XMLHttpRequest object has several important prop-
erties and methods that will give you information about the status of the request
response, the data that was returned from the server, when the state of the server
changes, and so on. There are methods to initialize the XMLHttpRequest object, send a
request, inform you about what is in the response headers, how to cancel a request, and
so on. You will see the properties and methods in Tables 18.1 and 18.2 used in the Ajax
examples that follow.
catch (e){
// Internet Explorer Browsers
try{
5 ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

}
catch (e){
return false;
}
}
}
6 return ajaxRequest;
} //End function
EXPLANATION
1 The CreateRequestObject function creates the XMLHttpRequest object for Ajax to
set up communication between JavaScript and the server.
2 This variable will be used to hold a reference to a new Ajax XMLHttpRequest object
created in this function.
3 If the try block has no errors, its statements will be executed; otherwise, the catch
block will be executed.
4 For most modern browsers, this try will succeed. Here the XMLHttpRequest()
method will create a new object called ajaxRequest. (The object name is named
any valid variable name.)
5 The catch blocks are executed if the browser is Microsoft Internet Explorer. Inter-
net Explorer uses the ActiveXObject() method to create the Ajax object rather than
the XMLHttpRequest() method.
6 If successful, an Ajax request object will be returned from this function.
EXAMPLE 18.1 (CONTINUED)
From the Library of WoweBook.Com
ptg
802 Chapter 18 • An Introduction to Ajax (with JSON)
Table 18.1 XMLHttpRequest Properties and Event Handlers
XMLHttpRequest Property Value
status The HTTP status code of the request response; for example,
200 or 404.

statusText Returns the HTTP status code from server response as a
string us as OK or Not Found.
readyState A number representing the current state of the object (see
Table 18.3).
responseText Returns a string value of unparsed text as a response from
the server.
responseXML Returns response parsed into a DOM if Content-type is
text/xml. Used to get multiple values.
onreadystatechange The event handler that is called when the readyState
changes.
onerror Mozilla event handler that is called when an error happens
during a request.
onprogress Mozilla event handler called as content is loaded.
onload Mozilla event handler called when the document is finished
loading.
Table 18.2 XMLHttpRequest Methods
XMLHttpRequest Method What It Does
abort() Cancels the request.
getAllResponseHeaders() Returns a string of all the HTTP headers separated by a
newline.
getResponseHeader(“server”) Returns the value of a specific HTTP header; for example,
“Server” or “Last-Modified”.
open() Initializes the XMLHttpRequest object with GET or POST,
URL, and so on.
send() Sends the request.
setRequestHeader() Adds a key/value pair to add to the header that will be sent
to the server.
From the Library of WoweBook.Com
ptg
18.3 The Steps for Creating Ajax Communication 803

18.3.2 Step 2: Initializing the Object
Whether retrieving a simple text file, XML file, sending form data, or retrieving infor-
mation from a database, a request will ask for a resource from the server. To get this
information the request object needs to know how the request will be submitted (i.e.,
GET or POST; use capital letters) and the URL defining the location of the file or server-
side script. (When creating HTML forms, this information was normally stored in the
ACTION and METHOD attributes of the <form> tag.) Once the object has this informa-
tion, the request can be made.
The open() Method. The open() method prepares or initializes the object for com-
munication with the server, whereas the send() method actually makes the request. The
open() method takes three arguments:
1. The request type; that is, how the data is submitted, either GET or POST.
2
2. The URL of the file or server-side program and parameters representing the data
being sent as key/value pairs.
3. An optional third parameter of Boolean true (asynchronous) or false (synchro-
nous). When set to true, the default, the processing will continue without wait-
ing for the server to respond, whereas with a false setting, the processing will
stop until the server responds.
Except for simple file retrieval or searches, the POST method is used, but this requires
an additional request header method, and the data represented as name/value pairs is
sent to the server as an argument to the send() method.
It is important to note that for security reasons, the URL must be within the same
domain as the request object; for example, JavaScript is not permitted to open an XML-
HttpRequest to any server other than the same Web server currently being visited by the
user.
GET or POST. The way data is sent to a server with the HTTP protocol depends on
whether the method being used is GET or POST. (To review these two methods, go to
Chapter 11, section “About HTML Forms” on page 334.) In either case, the data being
sent is in a URL-encoded query string consisting of name/value pairs. With the GET

method, the browser sends data in the URL (see Figure 18.3), whereas with the POST
method it sends additional data to the server specified in headers, a blank line, and
finally the data (see Figure 18.4). Ajax handles GET and POST differently as well.
2. You can also use the HEAD request method.
EXAMPLE (SAMPLE CODE)
objectRequest.open("GET", "myfile.txt", true);
objectRequest.open("POST", "http://localhost/hello.php?name=George");
From the Library of WoweBook.Com
ptg
804 Chapter 18 • An Introduction to Ajax (with JSON)
Figure 18.3 Firefox Live Headers shows how the GET method sends data in a query string
appended to a the URL and a question mark (shown in highlighted bar).
Figure 18.4 Firefox Live Headers add-on shows POST data sent as part of the HTTP header.
From the Library of WoweBook.Com
ptg
18.3 The Steps for Creating Ajax Communication 805
When the first parameter to the Ajax open() method is GET, the second argument is
the URL of the page that is being requested. If the URL is a server-side script, such as
PHP or ASP.NET, any input data (name/value pairs), is sent as a URL-encoded query
string. A question mark, followed by the query string, is appended to the URL. As you
might remember in traditional form processing, if the GET method is used, the data will
be attached to the URL in the location box of the browser, visible to all. With Ajax the
URL is an argument to the open() method and is not visible in the browser window
because it is being sent directly from Ajax to the server. For the GET method:
With the POST method, additional data is sent to the server. The first argument to
the open() method will be POST, the second argument, the URL of the server script, and
the third true for asynchronous. Instead of attaching the query string to the URL it will
be sent as an argument to the send() method.
The setRequestHeader() method is added to specify the Content-type, set to “appli-
cation/x-www-form-urlencoded”. This is needed for any POST request made via Ajax.

Finally, the send() method is called, passing in the parameters that will be sent to the
server-side program (without the “?” prefix). This data is formatted as a query string
(e.g., “name=value&foo=bar”), and not visible in the browser.
18.3.3 Sending the Request to the Server
Once the object has been initialized, the browser can send a request to the server with
the send() method. This method takes one argument of “null” if you use the GET
method for sending the data. As discussed in the previous section, with the POST
method, an additional step is required. The setRequestHeader() method tells the server
the “Content-type”, and the send() method sends the query string as name/value pairs
to the server.
EXAMPLE (SAMPLE CODE)
ajaxRequestObject.open("GET","http://localhost/ajaxform.php?username="+
namevalue+"&userphone="+phonevalue, true);
ajaxRequestObject.send(null);
EXAMPLE (SAMPLE CODE)
ajaxRequestObject.open("POST", "http://localhost/ajaxform.php", true);
ajaxRequestObject.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
ajaxRequestObject.send(username=”+namevalue+”&userphone=”+phonevalue,
true);
From the Library of WoweBook.Com
ptg
806 Chapter 18 • An Introduction to Ajax (with JSON)
18.3.4 Step 3: Monitoring the State of the Server Response
Monitoring the State of the Server. After sending a request to the server, we need
to know when the request has completed and what to do with the information when it
comes back. The onreadystatechange event handler of the XMLHttpRequest object is
assigned a function that will be called automatically when the onreadystatechange event
handler is triggered; that is, when the state of the server changes.
What does readyState mean? The XMLHttpRequest object keeps track of the status of

the server’s response in another property called readyState. This property has one of the
values shown in Table 18.3.
EXAMPLE (SAMPLE CODE)
objectRequest.open(“GET”, “http://localhost/test.php?name=George”, true);
objectRequest.send(null);
EXAMPLE (SAMPLE CODE)
objectRequest.open(“POST”, “http://localhost/hello.php”);
objectRequest.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”);
objectRequest.send(“first=Joe&last=Blow”);
EXAMPLE (SAMPLE CODE)
ajaxRequest.onreadystatechange = function(){
// The function will defined later
}
Table 18.3 The readyState property of the XMLHttpRequest Object
Status Value
0 Object, has been created, not initialized
1 Loading, send method not yet called
2 Loaded, send method called, headers not available
3 Interactive, some data has been received, status and response headers not
available
4 Complete, all data has been received and is available
From the Library of WoweBook.Com
ptg
18.3 The Steps for Creating Ajax Communication 807
Each time the readyState value changes, then the onreadystatechange handler is trig-
gered and the function assigned to it called.
When Is the Request Complete? When the server’s response is complete, the
readyState value will be 4. The next step is to check this value, and if it is 4, retrieve the
data from the server’s response.

To watch the server response change state, the following code can be added to your
program once the Ajax request object has been created. Assuming that the object is
named ajaxRequest, the following example tests the readyState values and sends an alert
stating what each value represents.
Checking the HTTP Status. We might also want to check the HTTP status returned
by the server to the client to determine the outcome of a request. A status returned by
the HTTP server of 200 means that the response was successful. (In some of the follow-
ing examples using a PHP script, Firefox seems to return a status of 0.) An HTTP status
of 404 means that the URL cannot be found. There are a number of HTTP status values
that can be checked. Some common HTTP status codes are given in Table 18.4.
EXAMPLE (SAMPLE CODE)
if(ajaxRequest.readyState == 0){
alert("There is no connection");
}
if(ajaxRequest.readyState == 1){
alert("The connection is loading");
}
if(ajaxRequest.readyState == 2){
alert("The data was loaded")
}
if(ajaxRequest.readyState == 3){
alert("Some data has been retrieved.
The connection is interactive");
}
if(ajaxRequest.readyState == 4){
alert("Complete! All of the data has been received");
}
Table 18.4 Some HTTP Status Codes
HTTP Status Code
200 OK OK. The server successfully returned the page.

400 Bad Request Server didn’t understand the request due to malformed syntax.
Continues
From the Library of WoweBook.Com
ptg
808 Chapter 18 • An Introduction to Ajax (with JSON)
For a descriptive table of all the HTTP status codes, go to

and for complete technical definitions of these codes, go to
/>18.3.5 Handling the Response with a Callback Function
The function that will check for the status of a request and handle the information
returned from the server is called a callback function or an inline function. The object’s
onreadystatechange event handler is assigned a reference to the callback function.
The data sent back from a server can be retrieved with two other properties of the
XMLHttpRequest object called the responseText property and the responseXML property.
The responseText Property. For simple Ajax applications, such as getting text from
a file, you can retrieve the server’s response in a string with the responseText property.
401 Unauthorized The request requires user authentication.
404 Not found The server found nothing matching the URI given.
500 Internal Server Error The server encountered an unexpected error and couldn’t fulfill
the request.
503 Service Unavailable The server is currently unable to handle the request due to
temporary overloading or maintenance.
EXAMPLE (SAMPLE CODE)
ajaxRequest.onreadystatechange = function() {
if (objectRequest.status == 200) {
// OK
}
else if(ajaxRequest.status == 404){
// Resource not found
}

else{
alert("Error:" + ajaxRequest.statusText);
}
}
Table 18.4 Some HTTP Status Codes (continued)
HTTP Status Code
From the Library of WoweBook.Com
ptg
18.3 The Steps for Creating Ajax Communication 809
The responseXML property. The ‘x’ in Ajax stands for XML, and although you
don’t have to use XML to create Ajax applications, data from more complex and struc-
tured XML documents can be returned by an HTTP request and assigned to the object’s
responseXML property. This property contains an XML document object, which can be
examined and parsed using the DOM, in the same way we used the DOM in Chapter 15,
“The W3C DOM and JavaScript.” The following example demonstrates how to create a
simple XML file and how to use Ajax to retrieve the file data and use the DOM to access
the information (see Figure 18.5).
EXAMPLE (SAMPLE CODE)
//Callback function
ajaxRequest.onreadystatechange = function() {
var textObj;
textObj=document.getElementById("message");
if(ajaxRequest.readyState == 4){
//alert(ajaxRequest.status);
if(ajaxRequest.status==200){
textObj.innerHTML=ajaxRequest.responseText; /* Get text
in a string returned by the server. */
}
}
else if(ajaxRequest.status == 404){ //Bad URL

textObj.innerHTML="Resource unavailable";
}
else{
alert("Error:" +
ajaxRequest.statusText);
}
}
EXAMPLE (SAMPLE CODE)
var xml = ajaxRequest.responseXML; //Get an XML object
alert(xml);
Figure 18.5 The Ajax responseXML property contains an XML document object.
From the Library of WoweBook.Com
ptg
810 Chapter 18 • An Introduction to Ajax (with JSON)
Checking HTTP Response Headers. HTTP response headers define various char-
acteristics of the data that has been requested, providing information such as the server
type, the last date when the page was modified, the Content-type, and so forth. Java-
Script can retrieve this HTTP header information with two methods, the getAllRespon-
seHeaders() method and the getResponseHeader() method. The getAllResponseHeaders()
method returns a complete list of all the response headers as name/value pairs, each sep-
arated by a newline (see Figure 18.5). The getResponseHeader() method returns a string
containing a specific response header of the XMLHttpRequest object.
The following piece of code highlights how to get all the HTTP response headers,
whereas if you want only one header value you could use the getResponseHeader()
method as:
alert(ajaxRequest.getResponseHeader("Content-type");
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4) {
if (ajaxRequest.status == 200) {
headers=ajaxRequest.getAllResponseHeaders();

alert(headers);
}
}
}
18.3.6 The Browser Cache Issue
Normally the browser caches banners, advertising, graphs, photos, and entire Web pages
in a folder so that you can hit the back button or click a link to a page you just visited,
and the image or page will be pulled from the cache. If you request a page with the same
URL as used before, the response is already in the cache and that response will be used
instead of requesting it again. Because the browser doesn’t have to make an HTTP
Figure 18.6 HTTP response headers.
From the Library of WoweBook.Com
ptg
18.3 The Steps for Creating Ajax Communication 811
request for a cached page, the speed of the page load is greatly improved. When using
Ajax, on the other hand, which is all based on making HTTP requests to a server, this
can be a problem. For example, if you are using Ajax to update a table containing stock
data, and the table is to be refreshed every 4 or 5 minutes in real time, the Ajax request
will grab the cached page from the previous request, not what is wanted. The page will
not reflect the changes because the browser will load from the cache rather than by mak-
ing another request to the same URL.
The HTTP specification states that the response to a GET request is cacheable but any
responses to the POST method are not cacheable, unless the response includes appro-
priate Cache-Control or Expires header fields, meaning that a query using the POST
method will normally be resubmitted and reprocessed for every request. If using the
GET method, there are a number of techniques to ensure that a new HTTP request is
made every time a request is made. The simplest solution is to change the URL in the
Ajax open() method to trick the browser into reloading the document for what appears
to be a new page. By adding a parameter that is constantly changing in the URL, each
request will be unique and therefore, not cached. This can be accomplished by adding a

timestamp or a random number value as a parameter to the URL. The value should be
different each time, and although it will have no effect on the requested page, it makes
the browser see this as a URL that has never been visited before.
By adding a new value to the URL, the browser will refresh the page each time there
is a request for that page.
You can also add headers to the request object with the setRequestHeader() method.
Setting the “If-Modified-Since” value to a date earlier than now causes the browser to
check to see if the data has changed since that date and send a new request. As long as
the date is a past date, it doesn’t matter what date you use. If these headers fail on a par-
ticular browser, use the random number or date options shown above.
EXAMPLE (SAMPLE CODE)
var url = "http://mydomain?myParams="+"&pseudoParam= "+
new Date().getTime();
var url = "http://mydomain?myParams=" + "&pseudoParam=" +
Math.random();
EXAMPLE (SAMPLE CODE)
ajaxRequest.setRequestHeader('If-Modified-Since', 'Sat, 03 Jan
2010 00:00:00GMT');
ajaxRequest.setRequestHeader("Cache-Control", "no-cache");
From the Library of WoweBook.Com
ptg
812 Chapter 18 • An Introduction to Ajax (with JSON)
18.4 Putting It All Together
The steps we have covered are summarized in the following Ajax examples to demon-
strate how to communicate with the server. The first example demonstrates how to use
Ajax to get the server’s time and respond to key events, the next two examples work with
a text file and an XML file, and demonstrate how to retrieve display the content of both
types of files, and the last example uses Ajax with forms using both the GET and POST
methods. All of the programs go through the following steps:
1. The user clicks a button or presses a key to initiate a function that will start the

process of Ajax communicating with the server.
2. Most important, JavaScript uses the XMLHttpRequest constructor method to
create a new object that will serve as the Ajax communication layer between the
browser and the server. (If not this, IFrames or cookies can be used, but will not
be covered in this text.)
3. Once the XMLHttpRequest object is created, it is initialized with the object’s
open() method to set up the type of HTTP request (GET or POST), the URL
(where the request is going), and whether the request will be asynchronous
(true and the default), or synchronous (false).
4. The request is then sent to the server with the object’s send() method.
5. The server processes the request and sends a response to the browser in either
XML or text format. It contains the data only of the page elements that need to
be changed. In most cases this data will include of just a fraction of the total
page markup.
6. JavaScript processes the server response, updates the relevant page content, or
performs another operation with the new data received from the server.
Connecting to a Server Program. If you are ready to start using PHP and Apache
to test these examples, go to and download
XAMPP. It is a very easy to install Apache Distribution for Linux, Solaris, Windows and
Mac OS X. The package includes the Apache Web server, MySQL, PHP, Perl, an FTP
server, and phpMyAdmin. Once you have installed XAMPP, you will be able to start up
the services with the XAMPP control panel by clicking on the XAMPP icon (see Figure
18.7) or going to the Start menu (Windows) or Application menu (MacOS). When you
get to the XAMPP control panel (see Figure 18.8), just click to start Apache to get your
Apache HTTP server running. PHP scripts will be stored in the same place as HTML
files, under the server’s root, and should be given a .php extension. There are many tuto-
rials and books on PHP. Of course we recommend PHP and MySQL by Example by Ellie
Quigley and Marko Gargenta (Prentice Hall, ISBN 0-13-187508-6).
Figure 18.7 XAMPP icon to open the control panel.
From the Library of WoweBook.Com