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 asynchronouslyExample 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 statusAfter 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 < 300) || xhr.status == 304) { alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); }
event handler program before calling open() can ensure browser compatibility.
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { alert(xhr.responseText); } else { alert("请求成功:" + xhr.status); } } }; xhr.open("get", "index.jsp", true); xhr.send(null);
使用setRequestHeader()可以设置自定义的请求头部信息。必须在调用open()方法之后,且在调用send()之前,调用
setRequestHeader():
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中文网其它相关文章!
推荐阅读:
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!