Ajax technical composition and core principles explained-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Ajax technical composition and core principles explained

小云云

Jan 12, 2018 pm 04:19 PM

ajax principle core

This article mainly introduces function throttling (throttle) and function debounce (debounce) of JavaScript performance optimization. Interested friends can refer to it. I hope it can help everyone.

1. Ajax
Features: Partial refresh, improve user experience, data is loaded from the server provider

2. The technical composition of AJax
is not a new technology, but the integration of previous technologies
Ajax: Asynchronous Javascript And Xml; (asynchronous JavaScript and XML)
Included technologies : JavaScript, XML, CSS, XMLHttpRequest
Asynchronous: After sending the request, it will be processed by the callback function without waiting for the result.
JavaScript: Send a request to the server, obtain the return result, and update the page
XML: Used to encapsulate data

##3. Ajax core principle
XMLHttpRequst object : Send a request to the server through this object. It is an asynchronous request technology, supported by all modern browsers (Chrome, IE5+)

1) Create XMLHttpReuest object
Non-IE browsers (Mozilla/Safari) ：var xhr=new XMLHttpRequest();IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
Lower version IE:xhr=new ActiveXObject("Microsfot.XMLHTTP");

2) Properties and methods of XMLHttpRequest object
a) Method: open("GET/POST", URL, true/false): used to establish a connection to the server There are three parameters:
Parameter 1: Submission method, post or get
Parameter 2: Requested URL
Parameter 3: Indicates synchronous or asynchronous request, true: indicates asynchronous request
false: Indicates synchronous request
send(data) :Send request
Parameters: Submitted content.
POST method: data is the submitted parameter, send(username=root&password=abc123);
GET method: send(null)

b) Attribute:

onreadystatechange: setting The callback function when the status changes. The callback function is used to obtain server data.
onreadystatechange=function(){　　　
｝

readyState: Server status response

Status code:
0: Not initialized 1: Loading
2: Loading completed
3: Request in progress
4: Request completed

responseText: Data returned by the server (text format)

responseXML: Data returned by the server (XML format)

Summary: Steps to use XMLHttpRequest:
1) Create XMLHttpRequest object
2) Set the request method and URL
xhr. open("GET/POST","url",true/false), true represents an asynchronous request, false represents a synchronous request
3) Set the callback function when the state changes
xhr.onreadystatechange=function(){}
0: Not initialized
1: Loading
2: Loading completed
3: Request in progress
4: Request completed
4) Send request
xhr.send( data),
If submitted for post, data is the submitted data. If submitted for get, the parameter can be null.

Determine the HTML page the user logged in:

100

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
</head>
<body>
  用户名：<input type="text" name="username" id="username"><br>
  密码:<input type="password" name="password" id="password">
  <a href="javascript:chkUser();">登录</a>
  <p id="res"></p>
</body>
 
<script type="text/javascript">
  var xhr;
  /**
  * 创建XMLHttpRequest对象
  */
 function createXMLHttpRequest(){
  //1、创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
      //非IE内核浏览器
     xhr=new XMLHttpRequest(); 
    }else{
      //IE浏览器
      try{
        xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch(e){
       //IE低版本
        xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
      }
    }
 }
   
  /**
  * 发送请求，用来检查用户名、密码是否正确
  */
  function chkUser(){
     
    //1、创建XMLHttpRequest
    createXMLHttpRequest();
     
    //2、获得用户名、密码
    var username=document.getElementById("username").value;
    var password=document.getElementById("password").value;
     
    //3、与服务器建立连接：open
    var url="login?username="+username+"&password="+password;
    //方式1：get提交
    //xhr.open("GET",url,true);
     
    //方式2：post提交
    var url2="login";
    xhr.open("POST",url2,true);
     
     
    //4、设置回调函数，获得服务器响应的数据
    xhr.onreadystatechange=function(){
      /*
      readyState状态码：
      0：未初始化
      1：正在加载
      2：加载完成
      3：请求进行中
      4：请求完成
      */
      if(xhr.readyState==4){
        //status,200表示响应正常
        if(xhr.status==200){
         //alert("从服务器返回的值为："+xhr.responseText);
         var res=xhr.responseText;
         if(res==&#39;0&#39;){
           document.getElementById("res").innerHTML="登录成功";
         }else{
           document.getElementById("res").innerHTML="<font color=&#39;red&#39;>登录失败</font>";
         }
          
        }else{
          alert("出现在了异常:"+xhr.response.Text);
        }
         
      }
    }
    //5、发送请求
    //方式1：get方式
    //xhr.send(null);
     
    //方式2:post方式：
    //Post提交需要设置http请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("username="+username+"&password="+password);
     
     
  }
  
</script>
 
</html>

Copy after login

Server code:

package com.newer.login.web;
 
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.newer.login.bean.User;
import com.newer.login.service.UserService;
 
/**
 * Servlet implementation class LoginServlet
 */
public class LoginServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
 
  UserService userService = new UserService();
 
  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doGet(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    doPost(request,response);
   
  }
 
  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doPost(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    // 1、获得页面参数
    String username = request.getParameter("username");
    String password = request.getParameter("password");
 
    System.out.println("获得请求的参数username:"+username);
    System.out.println("获得请求的参数password:"+password);    
    // 2、封装User对象
    User user = new User();
    user.setUsername(username);
    user.setPassword(password);
 
    // 3、调用服务类，完成用户名、密码的校验
    User u = userService.login(user);
 
    /*
     * 传统方式 if(u!=null){ //表示登录成功 request.setAttribute("user", user);
     * //跳转至首页... }else{ //登录失败，跳转登录页面
     * 
     * }
     */
    // ajax响应
 
    PrintWriter out = response.getWriter();
 
    if (u != null) {
      //0成功，1失败
      out.print(0);
    }else{
      out.print(1);
    }
    out.close();
  }
}

Copy after login

Related recommendations:

One of php’s closest friends ajax technology

How jquery implements ajax technology 3: $. get()

Recommend 5 AJAX introductory tutorials to easily learn to use ajax technology

The above is the detailed content of Ajax technical composition and core principles explained. For more information, please follow other related articles on the PHP Chinese website!

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

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

Where to find the Site Office Key in Atomfall

4 weeks ago By DDD

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?

7868

Java Tutorial

1649

CakePHP Tutorial

1407

Laravel Tutorial

1301

PHP Tutorial

1244

Related knowledge

Analysis of the function and principle of nohup Mar 25, 2024 pm 03:24 PM

Analysis of the role and principle of nohup In Unix and Unix-like operating systems, nohup is a commonly used command that is used to run commands in the background. Even if the user exits the current session or closes the terminal window, the command can still continue to be executed. In this article, we will analyze the function and principle of the nohup command in detail. 1. The role of nohup: Running commands in the background: Through the nohup command, we can let long-running commands continue to execute in the background without being affected by the user exiting the terminal session. This needs to be run

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

In-depth discussion of the principles and practices of the Struts framework Feb 18, 2024 pm 06:10 PM

Principle analysis and practical exploration of the Struts framework. As a commonly used MVC framework in JavaWeb development, the Struts framework has good design patterns and scalability and is widely used in enterprise-level application development. This article will analyze the principles of the Struts framework and explore it with actual code examples to help readers better understand and apply the framework. 1. Analysis of the principles of the Struts framework 1. MVC architecture The Struts framework is based on MVC (Model-View-Con

In-depth understanding of the batch Insert implementation principle in MyBatis Feb 21, 2024 pm 04:42 PM

MyBatis is a popular Java persistence layer framework that is widely used in various Java projects. Among them, batch insertion is a common operation that can effectively improve the performance of database operations. This article will deeply explore the implementation principle of batch Insert in MyBatis, and analyze it in detail with specific code examples. Batch Insert in MyBatis In MyBatis, batch Insert operations are usually implemented using dynamic SQL. By constructing a line S containing multiple inserted values

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

An in-depth discussion of the functions and principles of Linux RPM tools Feb 23, 2024 pm 03:00 PM

The RPM (RedHatPackageManager) tool in Linux systems is a powerful tool for installing, upgrading, uninstalling and managing system software packages. It is a commonly used software package management tool in RedHatLinux systems and is also used by many other Linux distributions. The role of the RPM tool is very important. It allows system administrators and users to easily manage software packages on the system. Through RPM, users can easily install new software packages and upgrade existing software

See all articles