Detailed analysis of Ajax usage skills in JS

This time I will bring you a detailed analysis of the skills of using Ajax in JS, and a detailed analysis of the precautions for using Ajax in JS. The following is a practical case, let's take a look.

Ajax is not a new programming language, but a new way of using existing standards. AJAX can exchange data with the server without reloading the entire page. This asynchronous interaction method allows users to obtain new data without refreshing the page after clicking.

XMLHttpRequest object

The core of Ajax is the XMLHttpRequest object (XHR). XHR provides an interface for sending requests to the server and parsing server responses. Ability to get new data from the server asynchronously.

Create objects in the browser(Only supports IE7 and higher versions):

var xhr = new XMLHttpRequest();

Usage of XHR

The first thing to introduce is the open() method. It receives 3 parameters:

• The type of request to send (POST, GET, etc.)

• The URL of the request

• A Boolean value indicating whether to send the request asynchronously

Example of calling open():

xhr.open("get", "index.jsp", false);

GET for index.jsp ask. The URL is relative to the current page where the code is executing; calling the open() method does not actually send the request, it just initiates a request to be sent.

Call send() to send a request:

xhr.send(null);

send() receives a parameter, which is to be used as the request body sent data. If you do not need to send data through the request body, you must pass in null.

The corresponding data will be filled in the relevant properties of the XHR object:

•responseText: the text returned as the response body

•responseXML: the content type of the response is "text /xml” or “application/xml”

•status: HTTP status of the response

•statusText: Description of the HTTP status

After receiving the response, first check the status attribute , confirm that the response has been returned, generally 200 as a sign of success. Status code 304 indicates that the resource has not been modified and the cached version in the browser can be used directly.

In order to receive an appropriate response, both status codes should be detected as follows:

xhr.open("get", "index.jsp", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status By detecting the readyState attribute, the current active stage of the request/response process can be determined. <p style="text-align: left;"></p>•0: Not initialized. The open() method was not called<p style="text-align: left;"></p>•1: Start. The open() method has been called, but the send() method has not been called<p style="text-align: left;"></p>•2: Send. The send() method has been called and no response has been received <p style="text-align: left;"></p>•3: Received. Partial data has been received <p style="text-align: left;"></p>•4: Complete. All data has been received and can be used on the <p style="text-align: left;"> client. When the value of the <a href="http://www.php.cn/code/10550.html" target="_blank"></a></p>readyState attribute changes, a readystatechange event will be triggered. Specifying the onreadystatechange<p style="text-align: left;"> event handler<a href="http://www.php.cn/code/5688.html" target="_blank"> program before calling open() can ensure browser compatibility. </a></p><pre class="brush:php;toolbar:false">var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status  Before receiving the response, the asynchronous request can be canceled: <p style="text-align: left;"></p>xhr.abort();<p style="text-align: left;"></p>HTTP header information<p style="text-align: left;"></p>The XHR object provides operations Methods for request headers and response header information. <p style="text-align: left;"></p>By default, when sending an XHR request, the following header information will also be sent. <p style="text-align: left;"></p>•Accept: The content type that the browser can handle<p style="text-align: left;"></p>•Accept-Charset:The character set that the browser can display<p style="text-align: left;"></p>•Accept-Encoding:The type that the browser can handle Compression encoding<p style="text-align: left;"></p>•Accept-Language: The language currently set by the browser<p style="text-align: left;"></p>•Connection: The type of connection between the browser and the server<p style="text-align: left;"></p>•Cookie: The language set by the current page Any Cookie<p style="text-align: left;"></p>•Host: The domain where the requested page is located<p style="text-align: left;"></p>•Referer: The URL of the requested page<p style="text-align: left;"></p>•User-Aent: The user agent character of the browser string<p style="text-align: left;"></p><p style="text-align: left;">使用setRequestHeader()可以设置自定义的请求头部信息。必须在调用open()方法之后，且在调用send()之前，调用</p><p style="text-align: left;">setRequestHeader()：</p><pre class="brush:php;toolbar:false">xhr.open("get", "index.jsp", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

调用getResponseHeader()并传入字段名称，可以取得相应的响应头部信息。getAllResponseHeader()取得包含所有头部信息的长字符串。

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeader();

GET请求

GET用于向服务器查询某些信息。可以将查询字符串参数追加到URL的末尾，查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()编码：

xhr.open("get", "login.jsp?name1=value1&name2=value2", false); 
addURLParam()接收三个参数：要添加参数的URL、参数的名称和参数的值。
var url = "login.jsp";
// 添加参数
url = addURLParam(url, "username", "xxyh");
url = addURLParam(url, "password", "xxyh123");
// 初始化请求
xhr.open("get", url, false);

POST请求

POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据，而且格式不限。

初始化请求：

xhr.open("post", "login.jsp", true); 
首先将Content-Type头部信息设置为application/x-www-form-urlencoded,然后建立一个字符串格式。如果需要将页面中的表单数据进行序列化，然后再通过XHR发送到服务器，可以使用serialize()函数来创建这个字符串：
xhr.open("get", "login.jsp", false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery+AJAX实现调用后台步骤详解

JQuery调用Ajax加载图片

The above is the detailed content of Detailed analysis of Ajax usage skills in JS. For more information, please follow other related articles on the PHP Chinese website!