Web Front-end
JS Tutorial
Detailed explanation of Ajax principles and code encapsulation examples
Detailed explanation of Ajax principles and code encapsulation examples
AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML), I believe everyone is familiar with ajax. The following article mainly introduces you to the relevant information about Ajax principles and code encapsulation, which is introduced through sample code. It’s very detailed. Friends who need it can refer to it. Let’s take a look together.
Preface
In fact, the internal implementation of AJAX is not troublesome. It mainly uses an object called XMLHttpRequest, and this object is used in existing browsers. are supported.
It can be said that it is the basis of the entire AJAX implementation and an object used by the browser to exchange data with the server in the background. With it, there is AJAX and the art of partial page refresh!
This article mainly introduces to you the relevant content about Ajax principles and code encapsulation, and shares it for your reference and study. I won’t say much below, let’s take a look at the detailed introduction.
Sample Code
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
// to do...
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send(); Steps:
1. Create.
Syntax for creating XMLHttpRequest objects:
var = new XMLHttpRequest();
Older versions of Internet Explorer (IE5 and IE6) use ActiveX objects:
var = new ActiveXObject("Microsoft.XMLHTTP");2. Connect and send.
2.1. Three parameters of the open() function: request method, request address, whether to request asynchronously
2.2. GET request method is through URL parameters The data is submitted to the server. POST is to submit the data to the server as a parameter of send
2.3. In the POST request, before sending the data, the content type of the form submission must be set
2.3. Parameters submitted to the server must be encoded through the encodeURIComponent() method. In fact, in the form of parameter list key=value, both key and value need to be encoded, because they will Contains special characters. Each time a request is made, a string v=xx will be spelled into the parameter list. This is to reject caching and request directly to the server every time.
3. Receive.
3.1. After receiving the response, the response data will automatically fill in the XHR object. The relevant attributes are as follows
responseText: the main content returned by the response, which is characters String type;
responseXML: If the content type of the response is "text/xml" or "application/xml", this attribute will store the corresponding xml data, which is the document type corresponding to XML;
status: response HTTP status code;
statusText: description of HTTP status
3.2. The readyState attribute of the XHR object represents the request/response process In the current active phase, the value of this attribute is as follows
0 --> Not initialized, the open() method has not been called;
1 --> Start, the open() method is called, the send() method is not called;
2 --> Send, the method is called send() method, no response received;
3 --> Received, part of the response data has been received;
4 --> Completed, all response data has been received;
As long as the value of readyState changes, the readystatechange event will be called. (In fact, for logical smoothness, readystatechange can be placed after send, because Requesting the server when sending requires network communication, which takes time. It is also possible to specify the readystatechange event handler after send. I usually use it this way, but for the sake of standardization and cross-browser compatibility, it is better to specify it before open.) .
3.3. In the readystatechange event, first determine whether the response is received, and then determine whether the server successfully processed the request. xhr.status is the status code. Status codes starting with 2 are successful. , 304 means obtained from the cache. The above code adds a random number to each request, so the value will not be obtained from the cache, so this status does not need to be judged.
Encapsulation ajax method:
##
ajax({
url: "./test.php",
type: "POST",
data: { name: "abc", age: 18 },
dataType: "json",
success: function (response, xml) {
// 执行成功回调
},
fail: function (status) {
// 执行失败回调
}
});
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
// 创建对象
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else {
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText,xhr.responseXML);
} else {
options.fail && options.fail(status);
}
}
}
//连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".",""));
return arr.join("&");
}The above is the detailed content of Detailed explanation of Ajax principles and code encapsulation examples. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What to do if the blue screen code 0x0000001 occurs
Feb 23, 2024 am 08:09 AM
What to do with blue screen code 0x0000001? The blue screen error is a warning mechanism when there is a problem with the computer system or hardware. Code 0x0000001 usually indicates a hardware or driver failure. When users suddenly encounter a blue screen error while using their computer, they may feel panicked and at a loss. Fortunately, most blue screen errors can be troubleshooted and dealt with with a few simple steps. This article will introduce readers to some methods to solve the blue screen error code 0x0000001. First, when encountering a blue screen error, we can try to restart
Resolve code 0xc000007b error
Feb 18, 2024 pm 07:34 PM
Termination Code 0xc000007b While using your computer, you sometimes encounter various problems and error codes. Among them, the termination code is the most disturbing, especially the termination code 0xc000007b. This code indicates that an application cannot start properly, causing inconvenience to the user. First, let’s understand the meaning of termination code 0xc000007b. This code is a Windows operating system error code that usually occurs when a 32-bit application tries to run on a 64-bit operating system. It means it should
GE universal remote codes program on any device
Mar 02, 2024 pm 01:58 PM
If you need to program any device remotely, this article will help you. We will share the top GE universal remote codes for programming any device. What is a GE remote control? GEUniversalRemote is a remote control that can be used to control multiple devices such as smart TVs, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, streaming media players and more. GEUniversal remote controls come in various models with different features and functions. GEUniversalRemote can control up to four devices. Top Universal Remote Codes to Program on Any Device GE remotes come with a set of codes that allow them to work with different devices. you may
What does the blue screen code 0x000000d1 represent?
Feb 18, 2024 pm 01:35 PM
What does the 0x000000d1 blue screen code mean? In recent years, with the popularization of computers and the rapid development of the Internet, the stability and security issues of the operating system have become increasingly prominent. A common problem is blue screen errors, code 0x000000d1 is one of them. A blue screen error, or "Blue Screen of Death," is a condition that occurs when a computer experiences a severe system failure. When the system cannot recover from the error, the Windows operating system displays a blue screen with the error code on the screen. These error codes
How to solve the 403 error encountered by jQuery AJAX request
Feb 20, 2024 am 10:07 AM
Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.
How to use Copilot to generate code
Mar 23, 2024 am 10:41 AM
As a programmer, I get excited about tools that simplify the coding experience. With the help of artificial intelligence tools, we can generate demo code and make necessary modifications as per the requirement. The newly introduced Copilot tool in Visual Studio Code allows us to create AI-generated code with natural language chat interactions. By explaining functionality, we can better understand the meaning of existing code. How to use Copilot to generate code? To get started, we first need to get the latest PowerPlatformTools extension. To achieve this, you need to go to the extension page, search for "PowerPlatformTool" and click the Install button
How to solve jQuery AJAX request 403 error
Feb 19, 2024 pm 05:55 PM
jQuery is a popular JavaScript library used to simplify client-side development. AJAX is a technology that sends asynchronous requests and interacts with the server without reloading the entire web page. However, when using jQuery to make AJAX requests, you sometimes encounter 403 errors. 403 errors are usually server-denied access errors, possibly due to security policy or permission issues. In this article, we will discuss how to resolve jQueryAJAX request encountering 403 error
PHP and Ajax: Building an autocomplete suggestion engine
Jun 02, 2024 pm 08:39 PM
Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.
