[Ajax] Asynchronous JavaScript and XML: Ajax getting started tutorial (finishing)

Source: Internet
Author: User

First, let's explain what Ajax is.

In short, Ajax = Asynchronous JavaScript and XML is a technology used to create fast dynamic web pages.

It is not a programming language, but a specification.


The main function of AJAX is to exchange a small amount of data with the server in the background.

That is to say, AJAX can be used to implement asynchronous updates on webpages. The most common example is:

When you enter keywords in the Google search box, JavaScript will send these characters to the server, and the server will return a list of search recommendations.

This means that you can update a part of a webpage without reloading the entire webpage.


Let's look at a small case of helloworld.

The program contains a div and a button.

DIV is used to display information from the server. When a button is clicked, it calls the function named loadxmldoc:

Next, add a <SCRIPT> label to the head of the page. The tag contains the loadxmldoc () function:

Let's take a look at several important concepts in Ajax.


1. XMLHttpRequest
XMLHttpRequest is used to exchange data with the server in the background.

That is to say, you can update a part of a webpage without reloading the entire webpage.

The method for creating XMLHttpRequest is simple:

variable=new XMLHttpRequest();

However, IE6 does not support XMLHttpRequest, but activexobject. Therefore, we need to make a judgment:

var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}




2. send a request to the server

To send requests to the server, you can use the open () and send () Methods of the XMLHTTPRequest object:

Method
Description
Open (Method,URL,Async)

Specifies the request type, URL, and whether to asynchronously process the request.

  • Method: Request type; get or post
  • URL: File location on the server
  • Async: True (asynchronous) or false (synchronous)
Send (String)

Send the request to the server.

  • String: Used only for post requests

There are two types of requests: Get and post.

The code for sending a GET request is as follows:

xmlhttp.open("GET","demo_get.asp",true);xmlhttp.send();

However, this may cause a problem and the result may be cached,

The solution is to use a unique ID:

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);xmlhttp.send();

If you want to use get to transmit information, you can directly modify it in the address bar:

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);xmlhttp.send();

The code for sending a POST request is as follows:

xmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();

To post data like an HTML form, you can use setRequestHeader () to add an HTTP header. Then specify the data to be sent in the send () method:

xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");


SetRequestHeader (Header,Value): Add an HTTP header to the request, whereHeader: Specifies the name of the header,Value: Specifies the value of the header.


The following explains the meaning of true in the third parameter.

If the XMLHTTPRequest object is used for Ajax, The async parameter of its open () method must be set to true:

xmlhttp.open("GET","ajax_test.asp",true);

Sending asynchronous requests is a huge improvement. Many tasks executed on the server are time-consuming. Through Ajax, JavaScript does not need to wait for the server's response, but rather: 1. Execute other scripts while waiting for the server's response; 2. process the response when the response is ready.

Whether the request is asynchronous is divided into the following two situations:

  • Async = true

When async = true is used, specify the function to be executed when the response is in the ready state of the onreadystatechange event:

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","test1.txt",true);xmlhttp.send();

  • Async = false

To use async = false, change the third parameter in the open () method to false:

Async = false is not recommended, but it is also possible for small requests.

Remember, JavaScript will not continue until the server is ready for response. If the server is busy or slow, the application will be suspended or stopped.

Note: When you use async = false, do not write the onreadystatechange function-put the code after the send () Statement:

xmlhttp.open("GET","test1.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;


3. Server Response

To obtain a response from the server, use the responsetext or responsexml attribute of the XMLHTTPRequest object.

  • Responsetext: obtains response data in the string format.

If the response from the server is not XML, you can use the responsetext attribute.

The responsetext property returns a string-type response, so you can use:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;


  • Responsexml: Get Response Data in XML format.

If the response from the server is XML and needs to be parsed as an XML object, use the responsexml attribute:

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;


4. 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.

The readystate attribute contains the status information of XMLHttpRequest.

The following are three important attributes of the XMLHTTPRequest object:

Attribute Description
Onreadystatechange A storage function (or function name) that is called whenever the readystate attribute changes.
Readystate

XMLHttpRequest status. Changes from 0 to 4.

  • 0: the request is not initialized.
  • 1: The server connection has been established.
  • 2: The request has been received
  • 3: The request is being processed
  • 4: The request is complete and the response is ready.
Status

200: "OK"

404: Page not found

In the onreadystatechange event, we specify the tasks executed when the server responds to the prepared tasks.

When readystate is 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;    }  }

5. Use the callback function

The callback function is a function that is passed to another function as a parameter.

If your website has multiple Ajax tasks, you should writeStandardAnd call this function for each Ajax task.

This function call should contain URLs and tasks executed when the onreadystatechange event occurs (each call may be different ):

function myFunction(){loadXMLDoc("ajax_info.txt",function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  });}

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.