Ajax Principle & Basic Case

An Analysis of the Basic Principles of Ajax

Basic concepts

Asynchronous Javascript and XML.
A technique for creating fast dynamic Web pages with minimal exchange with the server to update the pages

Common Cases

  • Search page displays search results without refreshing
  • Registration page prompts for availability of items
  • Tmall Shopping Cart Add Delete Modification

Asynchronous Loading Advantage

  1. Request a small amount of data, not the entire page
  2. Make Internet programs smaller, faster, and more friendly

Knowledge Required

  1. A server-side development language PHP/Java/Python
  2. . Javascript front-end development language JQuery/ HTML

Fundamentals of Ajax

Basic working principle

  1. Add an intermediate layer between server and user
  2. Asynchronous requests do not block client operations
  3. Clients send asynchronous requests through the browser's built-in XMLHttpRequest

Three ways to achieve asynchronous loading

Get Request

Code can talk best, first is front-end code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Ajax Demo</title>
</head>
<body>
    <button id="btn">Send An Ajax Request</button>
    <div id="box"></div>
</body>
<script>
    $("#btn").click(function(){
        $.get("demo1.php",{'username':'json','age':'18'},function(data){
            $("#box").html(data);
        } );

    });
</script>
</html>

Here is the processing for the backend

<?php
echo 'Test Ajax';
echo '<pre>';
var_dump($_GET);
echo '</pre>';
?>

Post Request

The code is almost identical to the above except that you change $.get() to $.post().

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Ajax Demo</title>
</head>
<body>
    <button id="btn">Send An Ajax Request</button>
    <div id="box"></div>
</body>
<script>
    $("#btn").click(function(){
        $.post("demo1.php",{'username':'json','age':'18'},function(data){
            $("#box").html(data);
        } );

    });
</script>
</html>

Here is the processing for the backend

<?php
echo 'Test Ajax';
echo '<pre>';
var_dump($_POST);
echo '</pre>';
?>

Ajax() Request

The ajax approach actually includes get and post, and the content format differs from the above.
Front end

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Ajax Demo</title>
</head>
<body>
    <button id="btn">Send An Ajax Request</button>
    <div id="box"></div>
</body>
<script>
    $("#btn").click(function(){
        $.ajax({
            'url':'demo1.php',
            'data':{'username':'json','age':18},
            'success':function(data){
                $("#box").html(data);
            },
            'dataType':'html',
            'type':'get'
            //'type':'post'
        });

    });
</script>
</html>

Backend as above

<?php
echo 'Test Ajax';
echo '<pre>';
var_dump($_GET);
//var_dump($_POST);
echo '</pre>';
?>

Send Type Description

  • "XML": Returns an XML document.
    "HTML": Returns plain text HTML information.
    "script": Returns plain text JavaScript code.
    "JSON": Returns JSON data.
    "JSONP": JSONP format.
    "Text": returns a plain text string

Keywords: PHP JQuery JSON Javascript

Added by bobdabuilder on Mon, 20 Jul 2020 19:16:36 +0300