Home > Web Front-end > JS Tutorial > Detailed explanation of Ajax page non-refresh implementation (with code)

Detailed explanation of Ajax page non-refresh implementation (with code)

php中世界最好的语言
Release: 2018-04-04 17:35:58
Original
2968 people have browsed it

This time I will bring you a detailed explanation of the Ajax page non-refresh implementation (with code), what are the precautions for the Ajax page non-refresh implementation, the following is a practical case, let's take a look.

ajax (ajax development)

AJAX stands for "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), which refers to a web development that creates interactive web applications technology.

AJAX = Asynchronous JavaScript and XML (a subset of Standard Universal Markup Language).

AJAX is a technology for creating fast, dynamic web pages.

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

Traditional web pages (not using AJAX) must reload the entire web page if the content needs to be updated.

Nowadays, most websites use ajax to achieve page refresh operations.

What is no refresh: ajax can realize the data interaction between the page and the background. The user cannot feel any refresh on the page at all. This is the no refresh of AJAX.

ajax method implementation:

You can encapsulate ajax to facilitate calls on each page:

function MyAjax(type, url, callBack, data, dataType, asyncType)
{ 
if (dataType == null) { dataType = "text"; } 
if (asyncType == null) {asyncType = true; } 
$.ajax({ 
type: type, // post或者get 
url: url , //url最好加一个url+Math.random(),这样可以保证每次请求的页面被浏览器视为不同
data: data, //这里是要传递的参数,格式为 data: "{paraName:paraValue}" 
dataType: dataType, //string,xml,script,json,text
async:asyncType, //同步异步true /false 
error: function (XmlHttpRequest, xmlhttp, info) { 
}, 
success: function (result) { 
//回调函数,result,返回值 
callBack(result); 
}, 
}); }
Copy after login

Call: MyAjax('post', "url?id=" + id, DoOK);

Description: async: true means asynchronous. This method means that after Ajax sends a request, while waiting for the server to return, the front desk will continue to execute the script behind the Ajax block. Success will not be executed until the server returns the correct result, which is equivalent to opening two threads. ;false means synchronization, that is, the frontend will wait for the server to return data before executing.

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:

Detailed explanation of the use of AJAX's XMLHttpRequest object

##How ajax implements a long connection between the server and the browser

Ajax and form+iframe method to implement file upload (detailed graphic and text explanation)

The above is the detailed content of Detailed explanation of Ajax page non-refresh implementation (with code). For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template