Multi
Multi
Vector Series - Beginning AJAX
Topic Started: Thursday, 24. November 2011, 11:42 (367 Views)
Andrew
Member Avatar
ぼくたちがすべてはばか。
Quote:
 
Beginning AJAX
Difficulty: Medium
Time: 45 Minutes



This tutorial was inspired by a request. This request to be specific. So let's get started.

What is AJAX? AJAX is basically a technique that is used to exchange data with a server without the need to reload a page. AJAX is used mainly with the XMLHttpRequest object. This object is what enables you to exchange data with a server without reloading a page. Since it is an object, it can be instantiated like so:
Code: JavaScript
 
var ajax = new XMLHttpRequest();
Simple enough right? Now let's make our first AJAX request.
Code: JavaScript
 
var ajax = new XMLHttpRequest();
ajax.addEventListener('readystatechange', function(){
if(ajax.readyState == 4){
alert('Request Sent!');
}
}, false);
ajax.open('GET', 'some_file.html', true);
ajax.send();
What does this do? Well first off we're creating a new XMLHttpRequest object. Then we're attaching an event listener to it. When a request is sent using the object we'll display a message saying "Message Sent!". After that we're making a request of type GET for the file at some_file.html with async on. Rather simple actually. The line that says ajax.open(...) just prepares the request however. The following line, ajax.send(), actually makes the request. Now I'm gonna go over the if statement in the event listener.
Code: JavaScript
 
if(ajax.readyState == 4){
alert('Request Sent!');
}
What does the readyState attribute represent? The readyState attribute represents the state of the XMLHttpRequest object.

  • 0 - The object has been created but the open method has not been called yet.
  • 1 - The open method has been called but the request has not yet been sent.
  • 2 - The send method has been called but no data is available for use yet.
  • 3 - Some basic data has been received excluding the responseText and responseBody.
  • 4 - All the data from the request has been received including responseText and responseBody.
So we're checking if all the data has been received. If it has been received then show the alert. Now to go over that great open statement :)
Code: JavaScript
 
ajax.open('GET', 'some_file.html', true);
The request method takes 5 parameters or arguments. The first one would be the type of request, GET or POST, there are actually more types of requests but we won't be covering them in this tutorial. Maybe in a later tutorial we'll cover them. The second argument would be the URL on the server, and the third would be whether to make it an asynchronous request or not. Remember that cross-domain requests are prohibited. The fourth and fifth are a username and password if any is needed to access the URL provided. The user and password arguments are optional and as such do not need to be provided. Whether or not to make an asynchronous request is also optional.

Now for the send method:
Code: JavaScript
 
ajax.send();
Simple right? The send method is what actually makes the request. It can accept one optional parameter, the request entity body. The request entity body is, like I said optional, and even ignored when making a GET or HEAD request. I'm not going to go into request entity bodies cause this is after all, for people beginning AJAX.

Now let's write a program that outputs the contents of a file.
Code: JavaScript
 
var ajax = new XMLHttpRequest();
ajax.addEventListener('readystatechange', function(){
if(ajax.readyState == 4){
document.write(ajax.responseText);
}
}, false);
ajax.open('GET', 'some_file.txt', true);
ajax.send();
You should already understand most of this. I'm just going to go over a new statement.
Code: JavaScript
 
document.write(ajax.responseText);
So it's outputting something onto the page, but what? As you can see ajax.responseText is what we are outputting, it is the data from our response as a string.

Now the point of the request was to be able to perform POST requests. Now that we've covered GET requests we can do POST requests. To perform a POST request you just need to change GET to POST like so:
Code: JavaScript
 
var ajax = new XMLHttpRequest();
ajax.open('POST', 'some_file.php', true);
ajax.send();
Simple enough to understand.

Okay so I may have lied about not learning how to use that one data parameter. You know, the one that's accepted in the send method? We'll be learning to use it in order to pass data like in HTML forms. You'll need to set the request header so I'm going to show you how to do it right now.
Code: JavaScript
 
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
That basically let's you pass POST data to a file. Now to pass data just pass it like you would with URL parameters.
Code: JavaScript
 
var ajax = new XMLHttpRequest();
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
ajax.open('POST', 'some_file.php', true);
ajax.send('name=Fred&type=Human');
Well, I think I covered most of the basics. If you have any questions let me know. By the way, I'm also going to be leaving you guys with some additional attributes and methods below :)



  • onreadystatechange - Triggered every time the readyState changes.
  • status - The status code of the requested document.
  • responseXML - The request response as XML.


For the full article - http://s4.zetaboards.com/vector/topic/8771533/1/#new
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Maddy
Member Avatar
BAMMMMM!
Outline Documentations
G E N E R A L

Documentation accepted in to the General database
Posted Image
This is a work in progress ^^

"You still talk about it? You still care about it."


Tumblr - WeHeartIt - My Things - Twitter

The List
Life
<3
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..