Shulou(Shulou.com)06/01 Report--

one。 What is ajax?

Ajax is a technology that can update parts of a web page without reloading the entire page.

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

Traditional web pages (without AJAX) if you need to update the content, you must reload the entire web page. Ajax exchanges a small amount of data with the server in the background, which means that parts of the page can be updated without reloading the entire page.

two。 Basically use function loadData () {let xhr; if (window.XMLHttpRequest) {xhr = new XMLHttpRequest ();} else {xhr = new ActiveXObject ("Microsoft.XMLHTTP");} xhr.onreadystatechange = function () {if (xhr.readyState = 4 & & xhr.status = = 200) {console.log (xhr.responseText) }} xhr.open ("GET", "http://127.0.0.1:3001/users",true); xhr.send ();} 3. Explain the above code 3.1 create a XMLHttpRequest object

All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have built-in XMLHttpRequest objects. Syntax for creating a XMLHttpRequest object: let xhr = new XMLHttpRequest ()

Older versions of Internet Explorer (IE5 and IE6) used the ActiveX object: let xhr = new ActiveXObject ("Microsoft.XMLHTTP")

So to deal with all modern browsers, including IE5 and IE6, check to see if the browser supports XMLHttpRequest objects. If supported, create a XMLHttpRequest object. If not, create an ActiveXObject:

Let xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest ();} else {xhr = new ActiveXObject ("Microsoft.XMLHTTP");} 3.2 send a request xhr.open ("GET", "http://127.0.0.1:3001/users",true);xhr.send();") to the server

(1) the open (method,url,async) method specifies the type of request, URL, and whether to process the request asynchronously.

Method: type of request; GET or POST

Url: location on the server to be accessed

Async:true (Asynchronous) or false (synchronous)

(2) send (string) sends the request to the server

Parameter string: for POST requests only

3.3 receive a response from the server

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

ResponseText: get response data in string form

ResponseXML: get response data in the form of XML

3.4 onreadystatechange event

When the request is sent to the server, we need to perform some response-based tasks. Whenever the readyState changes, the onreadystatechange event is triggered. The readyState property stores the status information of the XMLHttpRequest.

(1) onreadystatechange: this function is called whenever the readyState property changes.

(2) readyState: the state of having a XMLHttpRequest. It changes from 0 to 4.

0: request is not initialized

1: the server connection has been established

2: the request has been received

3: request processing

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

(3) status

"OK"

404: page not found

(4) in the onreadystatechange event, we specify the task to be performed when the server responds when it is ready to be processed. When readyState equals 4 and the status is 200, the response is ready.

Note: the onreadystatechange event is triggered 4 times (0-4): 0-1, 1-2, 2-3, 3-4, corresponding to each change in readyState.

Xhr.onreadystatechange = function () {if (xhr.readyState = 4 & & xhr.status = 200) {console.log (xhr.responseText);}} 4. Other ways / / the first parameter is the request path, and the second parameter is a function. When you get the data, call the function function get (url,callback) {let xhr = new XMLHttpRequest (); / / call the function xhr.onload = function () {callback (xhr.responseText);} xhr.open ('get',url) xhr.send () when the request is loaded successfully } get ('http://localhost:3001/users',function (data) {console.log (data);}); 4.1 extension

We can rewrite the above code into a form that supports Promise, so that we can make chained calls

Chain call:

Let data = {}; get ('http://localhost:3001/users'). Then (function (userData) {data.user = userData; return get (' http://localhost:3001/jobs')}). Then (function (jobsData) {data.jobs = jobsData; console.log (data)) }) the above is the content of this article on "what is the basic use of AJAX". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.