AJAX
  1. AJAX intro
  2. AJAX basics
  3. AJAX browsers
  4. AJAX forms
  5. AJAX sending data
  6. AJAX summary

AJAX sending data

We have created the AJAX object, and the form to retrieve the data from the web server using AJAX, now how do we actually get that data? To do so, we will have to use a few special methods.

This tutorial focuses on:

The open() method

The open() method is used to get the server side script that will be used in an AJAX application.

This method takes three parameters:

Method

Specifies the method by which to get the script. Can take the value of "GET" or "POST"

URL

The URL of the script

Asynchronous

Takes the value of "true" or "false" specifying if the request should be handled asynchronously

Syntax:
ajaxObject.open(Method, URL, Asynchronous);
Example:
ajaxObject.open("POST", "advice.php", true);

The send() method

The send() method sends the actual request to the server. It should contain the value "null"

Example:
ajaxObject.send(null);

A complete AJAX example

The following is a complete AJAX example. Enter your name into the first text box, and the second text box will display some text automatically. The AJAX will get the data from the file advice.php

Output:
Name: Advice:
The form code:
<form> Name: <input type="text" name="name" /> <br /> Advice: <input type="text" name="advice" /> </form>
The AJAX code:
function ajaxDataGet(){ var ajaxObject; //the variable that will store the object try{ // Firefox, Safari, Chrome, Opera, Internet Explorer 7+ ajaxObject = new XMLHttpRequest(); } catch (e){ try{ // Internet Explorer 5 & 6 ajaxObject = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ //if AJAX is not supported at all alert("Your browser does not support AJAX!! How is it back in 1998?"); return false; } } ajaxObject.onreadystatechange=function(){ if(ajaxObject.readyState==4){ document.formOne.advice.value=ajaxObject.responseText; } } ajaxObject.open("GET","advice.php",true); ajaxObject.send(null); }
The code from advice.php:
<?php echo "AJAX is cool! Use it!"; ?>
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information