The basic application of Ajax-check whether the user name is registered. Here we will focus on how to use Ajax. I believe you can understand it after reading it.
ReferenceCode:
Register. php
<! Doctype HTML public " -// W3C // dtd html 4.01 transitional // en " > <HTML> " Pragma " Content = " No-Cache " > <Meta http-equiv = " Cache-control " Content = " No-Cache " > <Meta http-equiv = " Expires " Content = " 0 " > <Meta http-equiv = " Keywords " Content = " Keyword1, keyword2, keyword3 " > <Meta http-equiv = " Description " Content = " This is my page " > <Meta http-equiv = " Content-Type " Content = " Text/html; charset = UTF-8 " /> <! -- <LINK rel =" Stylesheet " Type = " Text/CSS " Href = " Styles.css " > --> <SCRIPT type = " Text/JavaScript " > // Create an Ajax Engine Function getxmlhttprequest (){ VaR XMLHTTP; If (Window. activexobject ){ // Internet Explorer XMLHTTP = New Activexobject ( " Microsoft. XMLHTTP " );} Else { // Firefox, opera 8.0 +, Safari XMLHTTP = New XMLHttpRequest ();} Return XMLHTTP ;} // Verify user VaR XMLHttpRequest; function checkuser () {XMLHttpRequest = Getxmlhttprequest (); // Submit by clearing cache get /* VaR url = "/ajax/registerprocess. php? Time = "+ new date () +" & username = "+ $ (" username "). value; // var url ="/ajax/registerprocess. php? Username = "+ $ (" username "). value; XMLHttpRequest. open ("get", URL, true); // trigger XMLHttpRequest. onreadystatechange = check; XMLHttpRequest. send (null ); */ // Post submission VaR Url = " /Ajax/registerprocess. php " ; VaR Data = " Username = " + $ ( " Username " ). Value; XMLHttpRequest. Open ( " Post " , URL, True ); // This sentence must be added to the POST request. XMLHttpRequest. setRequestHeader ( " Content-Type " , " Application/X-WWW-form-urlencoded " ); // Trigger XMLHttpRequest. onreadystatechange = Check; XMLHttpRequest. Send (data );} // Callback Function Function check (){ If (XMLHttpRequest. readystate = 4 ){ If (XMLHttpRequest. Status = ' 200 ' ){ // Window. Alert ("OK "); // Window. Alert ("Return username" + XMLHttpRequest. responsetext ); // $ ("Myres"). value = XMLHttpRequest. responsetext; // An object is returned. /* // Process XML data // window. alert (XMLHttpRequest. responsexml); var MEs = XMLHttpRequest. responsexml. getelementsbytagname ("mes"); var mes_val = mes [0]. childnodes [0]. nodevalue; $ ("Myres "). value = mes_val; */ // Use the eval () function to process JSON data and convert the returned string to the corresponding object. VaR MEs = XMLHttpRequest. responsetext; VaR Mes_obj = eval ( " ( " + Mes + " ) " ); // Window. Alert (mes_obj ); $ ( " Myres " ). Value = Mes_obj.res ;}}} // Get DOM object Function $ (ID ){ Return Document. getelementbyid (ID );} </SCRIPT> " ??? " Method = " Post " > Username: <Input type = " Text " Name = " Username1 " Id = " Username " > <Input type = " Button " Onclick = " Checkuser (); " Value = " Verify User Name " > <Input style = " Border-width: 0; color: red " Type = " Text " Id = " Myres " > <Br/> User Password: <Input type = " Password " Name = " Password " > <Br> Email: <Input type = " Text " Name = " Email " > <Br/> <input type = " Submit " Value = " User Registration " > </Form> </body>
Registerprocess. php
<? PHP // The first speech tells the browser that the returned data is in XML format. // Header ("Content-Type: text/XML; charset = UTF-8 "); // Tell the browser that the returned data is in text format Header ( " Content-Type: text/html; charset = UTF-8 " ); // Tell the browser not to cache data Header ( " Cache-control: No-Cache " ); // Receive // $ Username = $ _ Get ['username']; $ Username = $ _ post [ ' Username ' ]; $ Info = "" ; If ($ Username = " Test1 " ){ // Echo "user registered "; // $ Info. = "<res> <mes> User name registered </mes> </RES> "; $ Info = ' {"Res": "user name registered "} ' ;} Else { // Echo "can be registered "; // $ Info. = "<res> <mes> can be registered </mes> </RES> "; $ Info = ' {"Res": "registrable "} ' ;} Echo $ Info; ?>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
