Detailed examples of Ajax tutorials and ajax instances

Detailed examples of Ajax tutorials and ajax instances

What Is AJAX?

AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML ).

AJAX is not a new programming language, but a new method that uses existing standards.

AJAX is the art of exchanging data with the server and updating some webpages. without reloading the entire page, AJAX is a technology used to create a fast dynamic webpage ).

By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

If you need to update the content of a traditional web page (without AJAX), you must reload the entire web page.

XMLHttpRequest object

The core of Ajax is the JavaScript Object XmlHttpRequest.

<script type="text/javascript">function createXHR(){var xhr = null;try {// Firefox, Opera .+, Safari，IE+xhr = new XMLHttpRequest();}catch (e) {// Internet Explorer try {xhr = new ActiveXObject("Msxml.XMLHTTP");}catch (e) {try {xhr = new ActiveXObject("Microsoft.XMLHTTP");}catch (e) {xhr = null;}}}return xhr;}</script> 

XMLHttpRequest object usage

The XMLHttpRequest object has two important methods: open and send.

The first method to be called when using the XMLHttpRequest object is the open method. The call method is XMLHttpRequest. open ("get", "default. aspx ", true); this Code is applicable to default. the aspx page sends a get request. There are three points to note about this Code:

1. the URL is relative to the current page path. You can also use the absolute path.

2. Calling the open method does not actually send a request, but initializes a request to be sent.

3. Requests can only be sent to URLs in the same domain using the same protocol and port; otherwise, an error is reported for security reasons.

To send a request to the server, you need to call the send method. The send method accepts a parameter, which is the data to be sent by the request body. If no data needs to be sent, null is input, after the send method is called, the request is sent to the server as follows:

Xhr. send (null );

The request is sent to the server. The server generates a Response (Response) based on the request and returns the Response to the XHR object. After the Response is received, the corresponding data is filled with the XHR object attributes, and four related attributes are filled:

1. responseText: Text returned as the response body

2. responseXML: If the response content type is "text/xml" or "application/xml", this attribute will save the XML document containing the corresponding data.

3. status: HTTP status of the response (200,404,500, etc)

4. statusText: HTTP status description

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:

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== && xmlhttp.status==){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}} 

Before receiving the response, we can call the abort method to cancel the asynchronous request: XMLHttpRequest. abort ();

Note:

When using the send () method of the XMLHttpRequest object, if you are using a get request or a post request that does not need to send data, use send (null );

If you want to send data, you must use the post request to add an HTTP header using setRequestHeader. Then specify the data you want to send 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");

The above content is a detailed explanation of the Ajax tutorial examples introduced by xiaobian, and I hope to help you!

Articles you may be interested in:

• Ajax + PHP simple basic getting started instance tutorial
• Examples of using ajax in ThinkPHP
• PHP + Ajax check whether an instance exists at user name or email Registration
• JQuery Ajax user authentication and registration technical example tutorial (with demo source code)