Home > Developer > Web Develop

Introduction to Ajax and simple use

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

AJAX = asychroous JavaScript and XML (asynchronous JavaScript and XML)

Ajax is not a new programming language, but a new method of using existing standards.

Ajax is the art of exchanging data and updating portions of a Web page with the server without overloading the entire page

There are many examples of applications that use AJAX: Sina Weibo, Google maps, happy net, and more.

XMLHttpRequest is the basis of Ajax:

All modern browsers support XMLHttpRequest objects (IE5 and IE6 use ActiveXObject).

XMLHttpRequest is used to exchange data with the server in the background. This means that you can update a part of a webpage without reloading the entire page.

Create a XMLHttpRequest Object

All modern browsers (ie7+, Firefox, Chrome, Safari, and Opera) have built-in XMLHttpRequest objects.

Syntax for creating XMLHttpRequest objects: 
Variable=new XMLHttpRequest ();
Older versions of Internet Explorer (IE5 and IE6) use ActiveX objects: 
Variable=new ActiveXObject ("Microsoft.XMLHTTP");

To handle all modern browsers, including IE5 and IE6, check whether the browser supports XMLHttpRequest objects. If supported, the XMLHttpRequest object is created. If not supported, create the ActiveXObject:

var xmlhttp;if (window. XMLHttpRequest)  {//code for ie7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest ();  } else  {//code for IE6, IE5  xmlhttp=new activexobject ("Microsoft.XMLHTTP");  }

Xmlhttp.open ("GET", "Test1.txt", true);//Specify request type Xmlhttp.send ();//Send Request
Method Description
Open (method,url,async)

Specifies the type of request, the URL, and whether the request is processed asynchronously.

  • method: type of request; GET or POST
  • URL: The location of the file on the server
  • Async: True (asynchronous) or false (synchronous)
Send (string)

Sends the request to the server.

  • string: only for POST requests

Server response

To obtain a response from the server, use the ResponseText or Responsexml property of the XMLHttpRequest object.

Properties Description
ResponseText Gets the response data in the form of a string.
Responsexml Get the response data in XML form.
ResponseText Property

If the response from the server is not XML, use the ResponseText property.

The ResponseText property returns a response in the form of a string, so you can use:

document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext;
1<%@ page language= "java" import= "java.util.*" contenttype= "text/html"; Charset=iso-8859-1 "2pageencoding= "Iso-8859-1"%>3<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >456<meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 ">7<title>insert title here</title>8<script type= "Text/javascript" >9 functionLoadxmldoc () {Ten     varXMLHTTP; One     if(window. XMLHttpRequest) { AXMLHTTP =NewXMLHttpRequest (); -}Else{ -XMLHTTP =NewActiveXObject ("Microsoft.XMLHTTP"); the     } -Xmlhttp.onreadystatechange =function(){ -         if(Xmlhttp.readystate==4 && xmlhttp.status==200){ -document.getElementById ("Mydiv"). InnerHTML =Xmlhttp.responsetext (); +         } -     } +Xmlhttp.open ("GET", "test.txt",true); A xmlhttp.send (); at } -</script> - -<body> -<div id= "mydiv" > ThisText -<button type= "button" onclick= "Loadxmldoc ()" >click here</button> in</body> -Responsexml Property
If the response from the server is XML and needs to be parsed as an XML object, use the Responsexml property:
Request the Books.xml file and parse the response:
Xmldoc=xmlhttp.responsexml;txt= ""; X=xmldoc.getelementsbytagname ("ARTIST"); for (i=0;i<x.length;i++)  {  Txt=txt + x[i].childnodes[0].nodevalue + "<br/>";  } document.getElementById ("Mydiv"). Innerhtml=txt;
onReadyStateChange Events
When a request is sent to the server, we need to perform some response-based tasks.
The onreadystatechange event is triggered whenever the readyState changes.
The ReadyState attribute holds state information for XMLHttpRequest.
The following are three important properties of the XMLHttpRequest object:

 
 
 
  
   
   
 
    Properties 
    Description 
   
 
   
 
    onReadyStateChange 
    The function (or function name) is called whenever the ReadyState property is changed. 
   
 
   
 
    ReadyState 
    
The state of being xmlhttprequest. Vary from 0 to 4.
 
     
     
      
  • 0: Request not initialized
    •  
      
  • 1: Server Connection established
    •  
      
  • 2: Request received
    •  
      
  • 3: In Request processing
    •  
      
  • 4: The request is complete and the response is ready
    •  
     
 
   
 
   
 
    Status 
    
$: "OK"
404: Page Not Found
 
   
 
   
 
 
In the onReadyStateChange event, we specify the tasks that are performed when the server responds to readiness to be processed.
When ReadyState equals 4 and the status is 200, the response is ready:
Xmlhttp.onreadystatechange=function ()  {  if (xmlhttp.readystate==4 && xmlhttp.status==200)    {    document.getElementById ("mydiv"). Innerhtml=xmlhttp.responsetext;    }  }
Introduction to Ajax and simple use

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More