JavaScript Study Notes (7) Ajax and Http Status Code_Basic Knowledge-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JavaScript Study Notes (7) Ajax and Http Status Code_Basic Knowledge

May 16, 2016 pm 04:34 PM

ajax http javascript status code

Ajax and how it works

AJAX is a technology that exchanges data with the server without refreshing the web page. It was first used by Google in Google Maps and quickly became popular.

AJAX cannot cross domain. If you need to cross domain, you can use document.domain='a.com'; or use a server proxy to proxy the XMLHttpRequest file

AJAX is based on existing Internet standards and uses them in conjunction:

XMLHttpRequest object (asynchronously exchange data with the server)
JavaScript/DOM (information display/interaction)
CSS (define styles for data)
XML (as a format for transforming data)

Create XMLHttpRequest object

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

Create Ajax object:

//IE6 and above
var oAjax = new XMLHttpRequest();

//IE6
var oAjax =new ActiveXObject("Microsoft.XMLHTTP")
Connect to server

oAjax.open(method, url, whether asynchronous)
We all know that Ajax means "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications. Therefore, Ajax naturally works in asynchronous mode (asynchronous is true, synchronous is false)

Synchronous and asynchronous

Synchronization refers to the communication method in which the sender sends data and waits for the receiver to send back a response before sending the next data packet.
Asynchronous refers to the communication method in which the sender sends data, waits for the receiver to send back a response, and then sends the next data packet.
(To put it simply: synchronization means that you can only do one thing, while asynchronous means that you can do multiple things at the same time)

Send request send()

Copy code The code is as follows:

<script type="text/javascript">

function getDoc(){

var xmlhttp;

If(window.xmlhttpRequest){

         xmlhttp=new XMLHttpRequest();

}

else{

          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE6

}

xmlhttp.onreadystatechange = function(){

If(xmlhttp.readyState==4&&xmlhttp.status==200){

                document.getElementById("￼myId").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("￼GET", index.php,true);

xmlhttp.send();

}

</script>

</head>

<body>

<button type="button" onclick="getDoc()">Request data</button>

</body>

GET or POST?

Compared to POST, GET is simpler and faster, and works in most cases.

However, please use POST requests in the following situations:

Cache files (updating files or databases on the server) cannot be used
Send large amounts of data to the server (POST has no data size limit)
POST is more stable and reliable than GET when sending user input containing unknown characters
Receive return information

oAjax.onreadystatechange = function(){ //Event handler to be called when the request state changes

alert(oAjax.readystate);

}

As long as the value of the readyState attribute changes, a readyStatechange event will be triggered. This event can be used to detect the value of readyState after each state change. Typically, we are only interested in the stage with a readyState value of 4, since all data is ready at this time, however, the onreadystatechange event handler must be specified before calling open() to ensure cross-browser compatibility. Let’s look at an example:

Copy code The code is as follows:

var xhr = createXHR();

xhr.onreadystatechange = function () {

If (xhr.readyState == 4) {

If ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

alert(xhr.statusText);

         } else {

alert("Request was unsuccessful: " xhr.status);

}

}

};

xhr.open("get", "example.txt", true);

xhr.send(null);

XHR Object

When the XHR object sends an HTTP request to the server, it will go through several states until the request is processed and then receives a response. readyState is the status attribute of the XHR request. It has 5 attribute values:

0 (not initialized) The open() method has not been called yet
1 (Loading) The send() method has been called and the request is being sent
2 (Loading completed) The send() method is completed and all response content has been received
3 (Parsing) Parsing response content
4 (Complete) The response content is parsed and can be used on the client
status

　The status attribute represents the response status code returned from the server. For example: 200 means success, 404 means not found.

1 prefix: message. This type of status code means that the request has been accepted and needs to continue processing.
2 prefix: success. This type of status code means that the request has been successfully received, understood, and accepted by the server.
Prefix 3: Redirect. This type of status code indicates that the client needs to take further action to complete the request.
Prefix 4: client error. This type of status code represents an error that appears to have occurred on the client side, preventing the server from processing it.
Prefix 5: Server error. This type of status code represents that an error or abnormal state occurred during the server's processing of the request

Attached: Detailed explanation of http status code

statusText

StatusText is the text information returned by the response, which can only be used when the readyState value is 3 or 4. When readyState is other values, the view's access to the statusText property will throw an exception.

XHR method

方法	描述
abort()	导致当前正在执行的请求被取消
getAllResponseHeaders()	返回包含所有响应头的名称和值的单个字符\|串
getResponseHeader(name)	返回响应头中指定的名称和值
open(method,url,async,username,pwd)	设置HTTP方法（get或post）等
send(content)	发出带有指定主体内容的请求
setRequestHeader(name,value)	使用指定的名称和值设置请求头

Copy code The code is as follows:

<script type="text/javascript">

        var oAjax =oAjax();

alert(oAjax.readyState);//Pop up "0"

oAjax.open("get","index.html",true);

alert(oAjax.readyState);//Pop up "1"

         oAjax.send(null);

alert(oAjax.readyState); //4 pops up under IE, while 2 appears in firefox

//Can be monitored through readystatechange event

oAjax = XHR();

oAjax.onreadystatechange = function () {

               alert(oAjax.readyState);//Under Firefox, the order is 1, 2, 3, 4, but in the end there will be another 1

​​​​​​ //Under IE, it is 1,1,3,4

        };

oAjax.open("get","index.txt",true);

         oAjax.send(null);

</script>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn