Beginners must read native ajax-asynchronous JavaScript and XML

1. Front Page

<form action= "#" method= "POST" >

Name <input type= "text" name= "first" id= "first"/>

<span id= "Show" ></span>

</form>

action= "#" is submitted to this page

2. Add Ajax code to the head tag element

In fact, this AJAX function is the check (str) function

The function is to pass in a string hello to the background server, the background of the program after processing (assuming that the function of the program is uppercase to lowercase) and then the hello to the function, and then this function is responsible for the ResponseTest Hello inserted into the innerHTML document

The function of implementing Ajax is to pass in the string hello-------to the handler that uses the open or the Send method to upload this hello to the background.

----the spooler to replace uppercase with lowercase hello------then this function is used document.getElementById ("show"). Innerhtml=x.responsetext; Insert well-handled Hello into HTML page

Go to the news and interview the first time I heard about Ajax, the essence is a function, and the function of background interaction

<script type= "Text/javascript" >functionCheck (str) {if(window. XMLHttpRequest) {varx=NewXMLHttpRequest ();//Create object x    }Else{        varx=NewActiveXObject ("Microsoft.XMLHTTP"); } x.open ("GET", "test2.php?c=" +str+ "&q=" +NewDate (),true);//open Methodclient ready to send to test2.php processingX.send ();//sent by the client. These 2 steps are requestsX.onreadystatechange=functionff () {if(x.readystate==4 && x.status==200) {//Client judgment Condition    //Client Displaydocument.getElementById ("Show"). innerhtml=X.responsetext; }  }                }     </script>

3. Background program

<? PHP if ($_get["C"]== "") {  // if $_get["C"] is empty echo "empty";    // The output is empty} Else {     // otherwise echo$_get["C"];     // output the data sent over }?>

Beginners must read native ajax-asynchronous JavaScript and XML