JavaScript
Muhammad Saifullah
Ajax
► Asynchronous JavaScript and XML
► Ajax stands for Asynchronous Javascript And Xml. Ajax is just a means of
loading data from the server and selectively updating parts of a web page
without reloading the whole page.
► Ajax uses XHTML for content, CSS for presentation, along with Document Object
Model and JavaScript for dynamic content display.
► Conventional web applications transmit information to and from the server using
synchronous requests. It means you fill out a form, hit submit, and get directed to a
new page with new information from the server.
Ajax
• With AJAX, when you hit submit, JavaScript will make a request to the server,
interpret the results, and update the current screen. In the purest sense, the user
would never know that anything was even transmitted to the server.
• XML is commonly used as the format for receiving server data, although any
format, including plain text, can be used.
• AJAX is a web browser technology independent of web server software.
• A user can continue to use the application while the client program requests
information from the server in the background.
• Intuitive and natural user interaction. Clicking is not required, mouse movement is a
sufficient event trigger.
• Data-driven as opposed to page-driven
(source: tutorial points)
Ajax-driven Online Applications
► Gmail
► Google Maps
► Google Docs
► YouTube
► Facebook
► Flickr
Reading Server Data
► We begin our exploration of Ajax with the basics: using the
XMLHttpRequest Object.
► To Request server data:
► Var xhr = false;
Its is an XMLHttpRequest object. We will create it outside any functions in
order to make it globally available.
Reading Server Data
► function initAll()
► {
► [Link]("makeTextRequest").addEventListener("cli
ck", getNewFile, false);
► [Link]("makeXMLRequest").addEventListener("cli
ck", getNewFile, false);
► }
When the pages gets loaded, it know to call the initAll() function. Here, we set
two click handlers so that when a user clicks either of the links, the getNewFile
function is triggered.
Reading Server Data
► function getNewFile(evt)
► {
► makeRequest([Link]);
► [Link]();
► }
When someone clicks the link is calls the function makeRequest() .The
information is tucked away in this,href, So we can pass it along.
Reading Server Data
► if ([Link])
► {
► xhr = new XMLHttpRequest();
► }
Modern browsers support a native XMLHttpRequest Object as a property of
window. So, we check to see if that property exists, and if it does, we create a
new XMLHttpRequest Object.
Reading Server Data
if ([Link])
{
try
{
xhr = new ActiveXObject("[Link]");
}
catch(e){ }
}
However, there’s a browser that supports XMLHttpRequest that doesn’t have a
native version of the object, and that’s Microsoft Internet Explorer. In that case,
we have to check to see if the browser supports ActiveX.
If yes then we try to create an XMLHttpRequest object based on ActiveX.
Reading Server Data
► if (xhr)
► {
► [Link]("readystatechange", showContents, false);
► [Link]("GET", url, true);
► [Link](null);
► }
Here will will be doing three thing:
❖ Set the xhr’s readystatechange event handler. Anytime the [Link]
property changes its value, this event handler is triggered.
❖ Open() takes three parameters (e.g. “GET”, “POST”, or “HEAD”), a URL to a file
on the server, and Boolean telling the server if the request is asynchronous.
❖ Finally, we send() the request we just created.
Reading Server Data
► else
► {
► [Link]("updateArea").innerHTML = "Sorry, but
I couldn't create an XMLHttpRequest";
► }
If we end up here, we couldn’t create an XMLHttpRequest for some reason,
and nothing else can be done.
Reading Server Data
► if ([Link] == 4)
► {
► if ([Link] == 200)
► {
The readyState property can have one of several values, and every time the
server changes its value, the showContents() function is triggered. However,
we don’t actually want to do anything until the request is finished, so we start off
by checking to see if readyState is 4. If it is, we’re good to go, and we can
check to see what the request returned.
Now we check the value of status, which will be a result code returned by
the web server. A status of 200 means everything’s fine. If you ask for a file that
doesn’t exist you’ll get a 404 error from the web server.
Reading Server Data
► if ([Link] && [Link] > 0)
► {
► var outMsg =
getText([Link]("choices")[0]);
► }
► else
► {
► var outMsg = [Link];
► }
Reading Server Data
If we’re here, it means everything is fine, and we want to look at what the server
actually gave us. The responseXML property contains the data if its XML.
However, it sometimes contains a value even when the data isn’t XML.
If [Link] is greater than zero, then we know we’ve
got a properly formatted DOM object back, and we can use commands we’ve
seen before to traverse its nodes. In fact, we’ll use just that approach here, and
pass its result to the getText() function. The value it returns get saved in
outMsg.
Reading Server Data
► else
► {
► var outMsg = "There was a problem with the request " +
[Link];
► }
If what we got back had a status other than 200, we’ve got a problem, so we
set outMsg to say that and append the status error so we can try to figure out
what the problem is.
Reading Server Data
► if ([Link])
► {
► return [Link];
► }
► return [Link];
Here’s getText(); all it does is look to see if whatever came in has a
textContent property. If it does, it get returned; if not, we return its text property
instead.
► [Link]("updateArea").innerHTML = outMsg;
We take outMsg and write it to the document.
JavaScript and
Cookies
Baking Your First
Cookie!
JavaScript and Cookies
► In web terms, a cookie is a unique chunk of
information that a web server gives to a browser
when the first meet.
► Browsers saves the cookie and information about
you as a plain text file stored on your computer’s
drive.
► You can keep track of which parts of your site the
user has visited and count the number of visit from
the user.
JavaScript and Cookies
► A cookie always includes the address of the server that sent it.
That’s primary idea behind cookie technology: identification.
► Think of it as Caller ID for the web, with variations on the
theme – each website using cookies gives your browser a
personalized ID of some sort so that it can recognize you on
the next visit. When you return to the web server that first
passed you a particular cookie, the server queries your
browser to see if you are one of its many cookie holders.
► If so, the server retrieves the information stored in the original
cookie. Keep in mind that cookies identify the computer being
used, not the individual using the computer.
Misconception about cookies
► You can't get any real information about the
user, such as their email address
► You can't use cookie to check out the
contents of their drive.
► Cookies can't transmit computer viruses.