The core of Ajax technology and method attributes

This time I will bring you the core of Ajax technology and method attributes. What are the precautions for using the core of Ajax technology and method attributes? The following is a practical case, let's take a look.

1. What is Ajax

The full name of Ajax in English is "Asynchr JavsScript and XML" (asynchronous

JavaScriptand XML), is a development technology for creating interactive web pages.

2. The core of Ajax technology

Ajax is the fusion of a series of related technologies. Its core includes XMLHttpRequest, JavsScript and DOM technology, data Different formats may use Json or XML technology.

XMLHttpRequest is its core content. It can provide a specific communication method for the JavaScript script in the page, thereby creating a dynamic interaction effect between the JavaScript script of the page and the server. The biggest advantage of XMLHTTPRequest is The javascript script in the page can directly interact with the server without refreshing the page, thereby achieving the effect of no page refresh.

3. XMLHttpRequest method attribute description

1. Method description

abort() stop Current request

getAllResponseHeaders() returns all response headers of the HTTP request as key/value pairs

getResponseHeader("header") returns the string value of the specified header

open( "method","URL",[asyncFlag],["userName"],["password"]) to establish a call to the server. The method parameter can be GET, POST or PUT.

The url parameter can be a relative URL or an absolute URL. This method also includes 3 optional parameters, whether it is asynchronous, user name, password

send(content) sends a request to the server

setRequestHeader("header", "value") to specify The header is set to the supplied value. open() must be called before setting any headers.

Set header and send it together with the request ('post' method is required)

XMLHttpRequest object attribute description

2. Method description

onreadystatechange event trigger for state change. This

event handler will be triggered every time the state changes. Usually a JavaScript function

readyState requested state will be called. There are 5 possible values: 0 = Not initialized, 1 = Loading, 2 = Loaded, 3 = Interactive, 4 = Complete

responseTextThe server's response, the text of the returned data.

responseXML server's response returns a DOM-compatible XML document object of data. This object can be parsed into a

DOM object.

responseBodyThe subject returned by the server (non-text format)

The data stream returned by the responseStream server

statusThe server's

HTTP status code (such as: 404 = "File not found", 200 = "Success", etc.)

statusText The status text information returned by the server, the corresponding text of the HTTP status code (OK or Not Found (not found), etc.)

4. Working Principle of Ajax

The working principle of AJAX is equivalent to adding an intermediate layer between the user and the server, allowing the user to operate with The server is asynchronous accordingly. Not all user requests

are submitted to the server. Some data verification and data processing are left to the AJAX engine itself. Only when it is determined that new data needs to be read from the server,

The AJAX engine submits the request to the server on your behalf. As shown in the picture:

##5. Advantages of Ajax1. Reduce the burden on the server and improve Website performance.

2. Update the page without refreshing, reducing the time users wait for the website to load.

3. The user experience is more friendly and can avoid the white screen.

4. Ajax is based on standardized and widely used technology. Almost all mainstream browsers support this technology, and there is no need to install separate plug-ins.

5. Ajax can separate pages and applications in the Web, facilitating division of labor and cooperation.

6. Ajax Disadvantages

1. It does not support mobile devices well.

2. Ajax kills the back button, which destroys the browser's back mechanism.

3. Security issues. For example: cross-site script attacks, SQL injection attacks and credentials-based security vulnerabilities, etc.

4. The support for search engines is relatively weak.

5. Destroyed the exception mechanism of the program. At least from the current perspective, ajax frameworks such as ajax.dll and ajaxpro.dll will destroy the exception mechanism of the program.

Causes debugging difficulties.

7. Principles of use

1. Ajax applicable scenarios

Form-driven interaction

Deep tree navigation

Fast user-to-user communication response

Similar to innocuous scenarios such as voting, yes/no, etc.

For data Scenarios for filtering and manipulating related data

Ordinary text input prompts and Autocomplete scenarios

2. Ajax is not applicable scenarios

Part of a simple form

Search

Basic navigation

Replace large amounts of text

Manipulation of rendering

8. Native AJAX writing method

var XHR=null;
if (window.XMLHttpRequest) {
// 非IE内核
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE内核,这里早期IE的版本写法不同,具体可以查询下
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
}
if(XHR){
XHR.open("GET", "ajaxServer.action");
XHR.onreadystatechange = function () {
// readyState值说明
// 0,初始化,XHR对象已经创建,还未执行open
// 1,载入,已经调用open方法,但是还没发送请求
// 2,载入完成,请求已经发送完成
// 3,交互,可以接收到部分数据
// status值说明
// 200:成功
// 404:没有发现文件、查询或URl
// 500:服务器产生内部错误
if (XHR.readyState == 4 && XHR.status == 200) {
// 这里可以对返回的内容做处理
// 一般会返回JSON或XML数据格式
console.log(XHR.responseText);
// 主动释放,JS本身也会回收的
XHR = null;
}
};
XHR.send();
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement AJAX paging effect

Achieve infinite loading of lists and secondary drop-down menu options Ajax (with code)

The above is the detailed content of The core of Ajax technology and method attributes. For more information, please follow other related articles on the PHP Chinese website!