Detailed explanation of Ajax method implemented in JS-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of Ajax method implemented in JS

php中世界最好的语言

Apr 24, 2018 pm 03:03 PM

ajax javascript Detailed explanation

This time I will bring you a detailed explanation of the JS implementation of Ajax. What are the precautions for the JS implementation of Ajax. The following is a practical case, let's take a look.

1. What is Ajax

Read data or submit data without refreshing

(The earliest ajax appears: Google Maps, drag A new horizon suddenly appears)

Application:

User registration, online chat, Weibo

Features: Data can only be read from the server (so we need to configure Own server program AMP)

2. Using Ajax

1. Basics: Request and display static TXT files

btn.onclick=function(){
  ajax('abc.txt',function(str){
    alert(str);
  });
}

Copy after login

①Encoding of files in Ajax It must be consistent with the encoding of the page

②Cache and prevent caching (the benefits outweigh the disadvantages, so you cannot clear the cache all the time)

Cache can help us speed up network access. The so-called cache is this file on the server. It is only read once, and the second time it is fetched directly from your hard disk and cache, instead of actually requesting it through the network

Sometimes we need to prevent caching (for example, something on the server changes, but The client requested the original thing), the method is as follows, add the timestamp:

ajax('abc.txt?t='+new Date().getTime(),function(str){});
//new Date().getTime()为现在的毫秒数，用户绝对不可能在1毫秒内点两次，所以每次请求的t都不一样

Copy after login

2. Dynamic data: Request Js (or json) file

Ajax reads from the server Everything exists in the form of text (string), how to convert it?

eval() calculates the value in the string

ajax('abc.txt',function(str){
    var arr=eval(str);
    alert(arr);
});

Copy after login

Example: paging

<ul id="list">
</ul>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

Copy after login

window.onload=function(){
  var oUl=getElementById("list");
  var aBtn=getElementsByTagName("a");
  var i;
  for(i=0;i<aBtn.length;i++){
    aBtn[i].index=i;
    aBtn[i].onclick=function(){
      ajax(&#39;page&#39;+(this.index+1)+&#39;.txt&#39;,function(str){
        var aData=eval(str);
        oUl.innerHTML=&#39;&#39;;
        for(i=0;i<aData.length:i++){
          var oLi=document.createElement("li");
          oLi.innerHTML=&#39;<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';
          oUl.appendChild(oLi);
        }
      });
    };
  }
};

Copy after login

3. Ajax principle

HTTP request method

1.GET--used to obtain data (such as browsing posts) put the data in the URL (website) to submit Low security, low capacity, easy to share (will Send the URL to others)

2.POST--used to upload data (such as user registration). Put the data in a place other than the URL. The security is average, the capacity is almost unlimited, and it is not easy to share

4. Encapsulate your own Ajax function

1. Create Ajax

2. Connect to the server

3. Send a request

4. Receive return

function ajax(url,fnSucc,fnFaild){
  //1.创建
  var oAjax=null;
  if(window.XMLHttpRequest){ //对ie6来说，直接用XMLHttpRequest是不存在的会出错
    oAjax=new XMLHttpRequest(); //ie6以上
  }else{
    oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6
  }
  //2.连接服务器，open(方法，url，是否异步)
  oAjax.open('GET'，url，true);
  //3.发送请求
  oAjax.send();
  //4.接收返回 OnReadyStateChange
  oAjax.onreadystatechange=function(){    //onreadystatechange事件
    if(oAjax.readyState==4){ //readyState属性：请求状态 4是完成（完成不代表成功）
      if(oAjax.status==200){ //status属性：请求结果 200代表成功
        fnSucc(oAjax.responseText); //responseText属性：服务器发回给我们的内容
      }
      else{
        if(fnFaild){
          fnFaild();
        }
      }
    }
  };
};

Copy after login

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!

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

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

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

Where is the login entrance for gmail email?

7843

Java Tutorial

1649

CakePHP Tutorial

1403

Laravel Tutorial

1300

PHP Tutorial

1240

Related knowledge

Detailed explanation of obtaining administrator rights in Win11 Mar 08, 2024 pm 03:06 PM

Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer

Detailed explanation of division operation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL

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.

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.

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

How to solve the problem of jQuery AJAX error 403? Feb 23, 2024 pm 04:27 PM

How to solve the problem of jQueryAJAX error 403? When developing web applications, jQuery is often used to send asynchronous requests. However, sometimes you may encounter error code 403 when using jQueryAJAX, indicating that access is forbidden by the server. This is usually caused by server-side security settings, but there are ways to work around it. This article will introduce how to solve the problem of jQueryAJAX error 403 and provide specific code examples. 1. to make

Detailed explanation of the linux system call system() function Feb 22, 2024 pm 08:21 PM

Detailed explanation of Linux system call system() function System call is a very important part of the Linux operating system. It provides a way to interact with the system kernel. Among them, the system() function is one of the commonly used system call functions. This article will introduce the use of the system() function in detail and provide corresponding code examples. Basic Concepts of System Calls System calls are a way for user programs to interact with the operating system kernel. User programs request the operating system by calling system call functions

Detailed explanation of the role and usage of PHP modulo operator Mar 19, 2024 pm 04:33 PM

The modulo operator (%) in PHP is used to obtain the remainder of the division of two numbers. In this article, we will discuss the role and usage of the modulo operator in detail, and provide specific code examples to help readers better understand. 1. The role of the modulo operator In mathematics, when we divide an integer by another integer, we get a quotient and a remainder. For example, when we divide 10 by 3, the quotient is 3 and the remainder is 1. The modulo operator is used to obtain this remainder. 2. Usage of the modulo operator In PHP, use the % symbol to represent the modulus

See all articles