ArticleDirectory
- 1. Create an Ajax object
- 2. Connect to the server
- 3. Send a request
- 4. Receive return values
What Is Ajax?
Ajax is "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), that is, no need to read new data.
HTTP Request
First, you need to understand the HTTP request methods (get and post ).
Get is used to obtain data. Get is used to transmit data in URLs. It has low security and low capacity.
Post is used to upload data. Post is generally secure and has almost unlimited capacity.
Ajax request
Ajax requests are generally divided into four steps.
1. Create an Ajax object
Compatibility issues when creating objects:
VaROajax =NewXMLHttpRequest ();//For IE6 or aboveVaROajax =NewActivexobject ('Microsoft. xmlhttp ');//For IE6
Merge the precedingCode:
VaROajax =Null;If(Window. XMLHttpRequest) {oajax=NewXMLHttpRequest ();}Else{Oajax=NewActivexobject ('Microsoft. xmlhttp');}
2. Connect to the server
The open () method is used here. The open () method has three parameters. The first parameter is the connection method get and post, the second parameter is the URL that is the address of the data to be read, and the third parameter is asynchronous, it is a Boolean value. True is asynchronous, and false is synchronous.
Oajax. Open ('get', URL,True);
3. Send a request
Send () method.
Oajax. Send ();
4. Receive return values
Onreadystatechange event. When a request is sent to the server, we need to execute some response-based tasks. When the readystate changes, the onreadystatechange event is triggered.
Readystate: Request status. The returned value is an integer (0-4 ).
0 (not initialized): the open () method has not been called.
1 (load): The send () method has been called and a request is being sent.
2 (Loading completed): The send () method is complete, and all response content has been received.
3 (resolution): The response content is being parsed.
4 (complete): The response content is parsed and can be called on the client.
Status: Request result. 200 or 404 is returned.
200 = "success.
404 = "failed.
Responsetext: The returned content, that is, the data we need to read. Note that responsetext returns a string.
Oajax. onreadystatechange =Function(){If(Oajax. readystate = 4){If(Oajax. Status = 200) {Fnsucc (oajax. responsetext );}Else{If(Fnfaild) {fnfaild ();}}}};
Encapsulate the above Code:
Function Ajax (URL, fnsucc, fnfaild ){ // 1. Create an object VaR Oajax =Null ; If (Window. XMLHttpRequest) {oajax = New XMLHttpRequest ();} Else {Oajax = New Activexobject ("Microsoft. XMLHTTP" );} // 2. Connect to the server Oajax. Open ('get', URL, True ); // Open (method, URL, asynchronous or not) // 3. Send a request Oajax. Send (); // 4. Receive and return Oajax. onreadystatechange = Function (){ // Onreadystatechange event If (Oajax. readystate = 4 ){ // 4. Complete If (Oajax. Status = 200 ){ // 200 is successful Fnsucc (oajax. responsetext )} Else { If (Fnfaild) {fnfaild ();}}}};}
Attached instance:
<! Doctype html > < Html Lang = "En-us" > < Head > < Meta Charset = "UTF-8" > < Title > Ajax Basics </ Title > </ Head > < Body > Click the hour to read abc.txt < Input ID = "BTN" Type = "Button" Value = "Read" /> < BR /> < Div ID = "Con" > </ Div > </ Body > </ Html > < Script Type = "Text/JavaScript" SRC = "Ajax. js" > </ Script > < Script Type = "Text/JavaScript" > Window. onload = Function (){ VaR Obtn = Document. getelementbyid ( ' BTN ' ); VaR Ocon = Document. getelementbyid ( ' Con ' ); Obtn. onclick = Function () {Ajax ( ' Abc.txt ' , Function (STR) {ocon. innerhtml = STR ;});}} </ Script >
Abc.txt content:
This is the content of Ajax call 1. This is the content of Ajax call 2. This is the content of Ajax call 3.