implementing AJAX ??

[n3v3rl0v3]

I have made a simple registration page for a project in php using POST method.
Two files are :

• register.php ( have a form showing First Name, Last Name, Username, Password and Email fields.
• do register.php ( checks if form has been posted and checks for the required fields. On finding any blank field it displays a message that you have left a required field. If user has filled all required fields, it shows message Registration successful.)

What i want is to check username field on the register.php when user types his/her username and validate it without needing to submit and display messege in other page.

I have seen some ajax scripts that loads page on a same window and validates on the spot. But i dont know javascripting and neither i tried ajax before that.

Can anybody guide me any way for checking doregister.php on a same register.php page and show messege if user enters existed username or skips any required field????

 

[sarvar]

Yeah! I really wanted to do this, but I cannot understand to code AJAX. I would really want a tutorial on this.

 

[Livewire]

http://w3schools.com/ajax/ajax_intro.asp


As an FYI, even though they're using ASP for their example, it -can- be done in php. The code's different, but here:

xmlHttp.open("GET","time.asp",true);

Change time.asp to time.php and use standard php functions to return the current time.

That'll use PHP instead of ASP




Once you're further in you'll see how they're using JS to overwrite the contents of an area on the page.

I find it insanely easy to just have JS take whatever my php document is returning, and overwrite the contents of a <div> with that.


So if my PHP file returns OMGWTFBBQ, it overwrites the div with OMGWTFBBQ. If it returns todays weather forecast, it'll overwrite the div with that.

Prolly a bit overkill but it was the easy way for me to figure out WTF I was doing with AJAX



Sadly I've no real tutorials, I just took what the w3c's example was and tore it to shreds and Frankenstein'ed it into what I'm using it for right now: reloading the Standings section of a php game I'm trying to make.

 

[Twinkie]

Using the post method is a bit more complicated in AJAX. Here is the basic code:

var http_request = false;
function makePOSTRequest(url, params) {
  http_request = false;
  if (window.XMLHttpRequest) {
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
      http_request.overrideMimeType('text/html');
    }
  } else if (window.ActiveXObject) {
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {}
    }
  }
  if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;
  }

  http_request.onreadystatechange = DispResponseText;
  http_request.open('POST', url, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(params);
  return true;
}

function DispResponseText() {
  if (http_request.readyState == 4) {
    if (http_request.status == 200) {
      var response = http_request.responseText;
    
     //Stuff to do with server response (response)...

    } else {

      //Code to execute on error...

     alert("There was a problem with your request. Error code: " + http_request.status);
    }
  }
}

Here is an Explanation on the code:

http_request = false;
  if (window.XMLHttpRequest) {
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
      http_request.overrideMimeType('text/html');
    }
  } else if (window.ActiveXObject) {
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {}
    }
  }
  if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;
  }

This tries all the different ways of creating an http object to use AJAX, and checks to see whether AJAX is supported.

http_request.onreadystatechange = DispResponseText;
  http_request.open('POST', url, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
  return true;

This sends the request, using the open method, using the method, url, and whether or not the code should freeze, or continue while the script is waiting for the request to come back (yes, code does continue which is recommended) parameters. The event onreadystatechange triggers the DispResponseText function when the code status changes, 1-4 and 4 being completed.

function DispResponseText() {
  if (http_request.readyState == 4) {
    if (http_request.status == 200) {
      var response = http_request.responseText;
    
     //Stuff to do with server response (response)...

    } else {

      //Code to execute on error...

     alert("There was a problem with your request. Error code: " + http_request.status);
    }
  }

This function handles the request when the state changes, checks that it completed successfully which is marked by a readystate 4 and a 200 status. You insert your own code to handle the server response. Error handling is not needed if you feel a simple alert is sufficient. Most likely for the response handling, you just need to display it within a span element. That would be:

document.getElementById("status").innerHTML=response;

With all this put together, a sample call to the server using the AJAX library is:

makePOSTRequest("do register.php", "Name=Steve&Year=2009&Address=Yes");

Now put all this together into a javascript file named Twinkie.js and your good to go =)

 

[xav0989]

Wouldn't it be easier to just check the fields using javascript, and then submit it normally?

 

[Twinkie]

Wouldn't it be easier to just check the fields using JavaScript, and then submit it normally?

I am guessing, since he is already adding JavaScript integration, that he wants to use a database to check the information.