Problems with Ajax asynchronous requests in the XMLHttpRequest object-JS Tutorial-php.cn

XMLHttpRequ est Object

1. XMLHttpRequest object

1.Ajax can realize asynchronous transmission, so It relies on XMLHttpRequest in JavaScript

2. The XMLHttpRequest object is the object of the XMLHttp component. It is an abstract object that allows the script to obtain the returned eXML data from the server or send the data to the server.

3.XMLHttpRequest can realize only data-level interaction between the client and the server without having to refresh the page every time

4.XMLHttpRequest was first provided as an ActiveX control in Microsoft Internet Explorer 5.0 and has since been widely used

5. You need to create an XMLHttpRequest object before using XMLHttpRequest to send a request and process the response.

6.XMLHttpRequest is not a W3C standard and can be created using JavaScript in a variety of ways. XMLHttpRequest instance

7. XMLHttpRequest is implemented as an ActiveX control in IE, while other browsers implement it as a JavaScript built-in object

2. XMLHttpRequest object creation

"text/javascript" >

3. XMLHttpRequest object properties (receive and display the current status)

1.readySate- Logging returns the status of the request

. 0-for initialization: the object has been created, the unit has been initialized, and the open method has not been called;

. 1-Initialization: The object has been created, but the send method has not been called to send the request;

. 2-Send data: The send method has been called, but the HTTP header is unknown;

. 3-Data transmission: Part of the data has been accepted, but the response is incomplete;

. 4-Complete: The data acceptance is completed, and only then can the complete return data be obtained

2.responseText-Receive the text content of the client's HTTP response

. Read only

. When readySate is 1/2, the responseText value is an empty string;

. When readyState is 3, the response information is being received and has not been completed;

. When readyState is 4, it means that the response information has been received

. xmlHttp default response data encoding is UTF-8

3.responseXML-After send() is executed, the returned information is formatted into an XML Document object

. The MIME type specified by Content-Type should be text/HTML

. If Content-Type does not contain this type, responseXML will get a null value when receiving

4.status-After send() is executed, status can be used to read the status of things

. Long integer data

. Returns the HTTP status code

of the current request. This attribute is only used when readyState is 3 or 4, otherwise an error

will occur when reading the status. 100 - The client must continue sending requests

. 200-Transaction successful

. 400 - Bad request

. 403 - Request not allowed

. 404-File, query, URL

not found. 500-Server Internal Error

. 502 The server is temporarily unavailable

. 505-The server does not support or refuses to support the HTTP version in the request header

5. After statusText-send() is executed, the status of the thing can be read through statusText

. Returns the status line

of the current HTTP request. This attribute can only be used when readyState is 3 or 4, otherwise an error will occur when reading state

6.Onreadystatechange-The operation to be performed when readyState changes

. Usually the handler function name is assigned to onreadystatechange to specify event handling

for the XMLHttpRequest object. In the event processing function, perform corresponding processing

based on the status value of readyState. Example:

1.abort()-terminate the current operation

. Stop the XMLHttpRequest object's HTTP request and restore the object to its initial state

2.open()-xmlHttp.open(method,url,mode,user,pwd)

. Create a new HTTP request and specify the request method, URL, verification information, etc.

. method: POST, GET, PUT (case can be ignored)

. url: The requested target address

. mode: Specifies whether the request is asynchronous, the default is true; when true, when the state changes, the processing function specified by the onreadystatechange attribute

will be called. After calling open(), the XMLHttpRequest object sets the readyState attribute to 1 and restores the initial values of responseText, responseXML, status, statusText and other attributes, and resets the request header information

Call ## When #open(), readyState is 4, the XMLHttpRequest object will reset the above value

3.send()-xmlHttp.send(content)

. Send a request to the server and receive the response

4.setRequestHeader()-setRequestHeader(header, value)

. Separately set the HTTP header information

of a request. When readyState is 1, this method can be called after send(), otherwise an exception

is returned. If a HTTP header with this name already exists, the original information will be overwritten

. header-header name: string type

. value-The value of the header name: string type

5.getResponseHeader()-Read the header of the information sent by the server

. HEAD requests ignore content, so their responses are smaller than responses to GET or POST

Get content:

. Content-Type: Content type

. Content-Length: Content length

. Last-Modify: The date of the last modification

. Example: function getHeadInfo(){ if(xmlHttp.readyState==4){ if(headeyType==”Content-Type”){ window.alert(“Content-Type:”+xmlHttp.getResponseHeader(“Content-Type”); } else if(headType==”Content-Length”){ window.alert(“Content-Length:”+xmlHttp,getResponseHeader(“Content-Length”); } else if(headType==”Last-Modify”){ window.alert(“Last-Modify:”+xmlHttp.getResponseHeader); } } } Copy after login

. When obtaining header information, not all information can be obtained

6.getAllResponseHeaders()-Get all header information 。在获取时只用 HEAD即可获取

。例 :fuction headRequest(){

creatXMLHttpRequest(); xmlHttp.onreadystatechange=getHeadInfo; xmlHttp.open(“HEAD”,”url”,false); xmlHttp.send(null); } function getHeadInfo(){ if(readyState==4){ Alter(xmlHttp.getAllResponseHeaders()); } Copy after login

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Problems with Ajax asynchronous requests in the XMLHttpRequest object