Article From:https://www.cnblogs.com/wodeboke-y/p/9127085.html

Note -AJAX

 

1.      brief introduction

Ajax That is, “Asynchronous Javascript Javascript And XML” (asynchronous JavaScript and XML)

AJAX It is a technology used to create fast and dynamic web pages.

By carrying out a small amount of data exchange with the server in the background, AJAX enables web pages to be updated asynchronously. This means that a part of the web page can be updated without reloading the entire web page.

Traditional web pages (without using AJAX) need to reload the entire webpage if they need to update content.

There are many application cases using AJAX: Sina micro-blog, Google map, Kaixin net and so on.

 

AJAXIt is developed on the basis of existing Internet standards:

XMLHttpRequest Objects (asynchronous exchange of data with the server)

JavaScript/DOM (Information display / interaction

CSS (Data definition style

XML (As a format for converting data.

Note: AJAX applications have nothing to do with browsers and platforms.

 

2.      Use

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<script>

function loadXMLDoc()

{

       var xmlhttp;

       if (window.XMLHttpRequest)

       {

              //  IE7+, Firefox, Chrome, Opera, Safari Browser execution code

              xmlhttp=new XMLHttpRequest();

       }

       else

       {

              // IE6, IE5 Browser execution code

              xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

       }

       xmlhttp.onreadystatechange=function()

       {

              if (xmlhttp.readyState==4 && xmlhttp.status==200)

              {

                     document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

              }

       }

       xmlhttp.open(“GET”,”/try/ajax/ajax_info.txt”,true);

       xmlhttp.send();

}

</script>

</head>

<body>

 

<div id=”myDiv”><h2>Use AJAX to modify the text content < /h2> < /div>

<button type=”button” onclick=”loadXMLDoc()”>Modify content < /button>

 

</body>

</html>

 

The code is very simple, the principle is very simple, trigger events, call functions, send requests to the server, get the return value, modify the web page element properties;

But why xmlhttp.open (“GET”, “/try/ajax/ajax_info.txt”, true);

       xmlhttp.send();

Put it in the back?

You can use onreadystatechange as an attribute and call function () when the property is triggered.

 

2.1.    Interpretation of realization principle

XMLHttpRequest It’s the basis of AJAX.

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

XMLHttpRequest It is used to exchange data with the server in the background. This means that a part of the web page can be updated without reloading the entire web page.

 

2.1.1.   Create XMLHttpRequest objects

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

Create the syntax of the XMLHttpRequest object:

variable=new XMLHttpRequest();

The older versions of Internet Explorer (IE5 and IE6) use ActiveX objects:

variable=new ActiveXObject(“Microsoft.XMLHTTP”);

2.1.2.   Sending requests to the server

If you want to send the request to the server, we use the open () and send () method of the XMLHttpRequest object:

xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();

open(method,url,async)

Specify the type of request, URL, and whether to process requests asynchronously.

method:The type of request; GET or POST

url:The location of the file on the server

async:true(Asynchronous) or false (synchronization)

send(string)

Send the request to the server.

string:Only for POST requests

 

2.1.3.  
Server response

To get the response from the server, use the responseText or responseXML attribute of the XMLHttpRequest object.

attribute

describe

responseText

Get the response data in the form of a string.

responseXML

Get the response data in the form of XML.

 

2.2.   
onreadystatechange Event

When the request is sent to the server, we need to perform some response based tasks.

Whenever readyState changes, the onreadystatechange event is triggered.

readyState The property has the state information of the XMLHttpRequest.

Here are three important properties of XMLHttpRequest objects:

attribute

describe

onreadystatechange

Storage function (or function name), every timeWhen the readyState property changes, the function is called.

readyState

There is a state of XMLHttpRequest. Change from 0 to 4.

0: Request uninitialized

1: Server connection has been established

2: Request has been received

3: Request processing

4: The request has been completed and the response is ready

status

200:
“OK”
404: Not found page

 

VC & Delphi

Callback functions are functions that are passed to another function in parameter form.

If there are multiple AJAX tasks on your web site, you should write a standard function for creating XMLHttpRequest objects and call the function for each AJAX task.

The function call should contain URL and tasks performed when onreadystatechange events occur (each call may be different):

 

Link of this Article: Note -AJAX

Leave a Reply

Your email address will not be published. Required fields are marked *