[JavaScript] Ajax Basics

Source: Internet
Author: User
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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.