In fact, Ajax has been in use for a long time, but it has never been time to look for the book system seriously. It has been quite time-consuming recently. This series is based on the combination of Ajax and PHP, mainly to share experiences with friends who are learning or want to learn Ajax. I hope you can share more ideas.
As we all know, Ajax is not a new language, it is a combination of a series of languages: HTML/XHTML, CSS, Dom, XML, XSLT, XMLHTTP, JavaScript. It can be said that AJAX involves a wide range of knowledge and provides us with a convenient interactive user experience mode in Web development. In the past, the principle of Webpage Browsing was that the client submitted a page application to the server, and then the server sent the application back to the client through http to generate a browser page:
The working principle of AJAX is as follows. It can be seen that Ajax has greatly improved user interaction. users do not have to wait for the server to respond for a long time for the form to be submitted, in addition, AJAX can also be used to develop gorgeous web interaction pages.
When using Ajax, you need to create an XMLHTTPRequest object. The creation methods vary slightly in different browsers:
VaRXMLHTTP =Null;Try{// Firefox, opera 8.0 +, Safari non-IE browserXMLHTTP =NewXMLHttpRequest ();}Catch(E ){// IE browserTry{XMLHTTP =NewActivexobject ("Msxml2.xmlhttp");}Catch(E) {XMLHTTP =NewActivexobject ("Microsoft. XMLHTTP");}}
When Using ajax to submit a request to the server, you must first determine three points:
1. Use get or post to submit a request?
2. Page ORCode(SCRIPT )?
3. Where can I load the requested page or code?
FunctionMakerequest (serverpage, objid ){// The Position of the page to be replaced by OBJVaROBJ =Document. Getelementbyid (objid );// Send a page (serverpage) RequestXMLHTTP.Open("Get", Serverpage); XMLHTTP. onreadystatechange =Function(){If(XMLHTTP. readystate = 4 & XMLHTTP.Status= 200 ){// Replace the information returned by the server with the page position OBJOBJ. innerhtml = XMLHTTP. responsetext;} XMLHTTP. Send (Null);}
Readystate indicates the status of the current object, which is divided into 0 ~ Class 4: 0: uninitialized, 1: Loading, 2: loaded, 3: Interactive, 4: complete. Status indicates the HTTP response status. Common statuses include 200 OK, 304 not modified, 401 unauthorized, 403 forbidden, 404 not found, 500 internal server error, and 503 service unavailable. The Code determines that readystate = 4 and status = 200 are normal.
Next let's take a look at a simple code. When a user clicks page1 ~ 4, the corresponding link file will be displayed on the my webpage page.
<HTML> Text/JavaScript "> VaR XMLHTTP = Null ; Try {XMLHTTP = New XMLHttpRequest ();}Catch (E ){ Try {XMLHTTP = New Activexobject (" Msxml2.xmlhttp ");} Catch (E) {XMLHTTP = New Activexobject (" Microsoft. XMLHTTP ");}} Function Makerequest (serverpage, objid ){ VaR OBJ = Document . Getelementbyid (objid); XMLHTTP. Open (" Get ", Serverpage); XMLHTTP. onreadystatechange = Function (){ If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200) {obj. innerhtml = XMLHTTP. responsetext ;}} XMLHTTP. Send ( Null ) ;}</SCRIPT> <body onload =" Makerequest ('content1.html ', 'hw ') "> <Div align =" Center "> <H1> my webpage Content1.html "Onclick =" Makerequest('content1.html ', 'hw'); Return false; "> Page 1 </a> <a href ="Content2.html "Onclick =" Makerequest('content2.html ', 'hw'); Return false; "> Page 2 </a> <a href =" Content3.html "Onclick =" Makerequest('content3.html ', 'hw'); Return false; "> Page 3 </a> <a href =" Content4.html "Onclick =" Makerequest('content4.html ', 'hw'); Return false; "> Page 4 </a> // Here content1 ~ will be replaced ~ 4.html content location. <Div id =" HW "> </Div> </body>
Source codeDownload:
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
