AJAX, Asynchronous JavaScript and XML, is a technology that uses JavaScript to request data from the back end of a Web page. It can retrieve data from the back end and update parts of a web page without having to reload the entire page.

My understanding is that you can make web requests asynchronously, receive data and display it, using javascript code.

Learn AJAX from W3School:

www.w3school.com.cn/ajax/index….

Here is an AJAX example (modeled after the W3School tutorial) using egg.js on the back end.

This example can implement different types of AJAX requests, including synchronous, asynchronous, GET/POST, and XML.

Click on different types of requests to see text updates, and you can also see every AJAX request in Google’s Browser Network. Click to see the details.

First, the front-end code:

<html> <head> <script type="text/javascript"> const xmlhttp = new XMLHttpRequest(); function respond () { console.log(xmlhttp); if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { document.getElementById('myDiv').innerHTML = xmlhttp.responseText; } } function loadXMLDoc() { xmlhttp.onreadystatechange = respond xmlhttp.open('GET', 'data? a=send1&b=2', true); xmlhttp.send(); } function loadXMLDocSync() { xmlhttp.open('GET', 'data', false); xmlhttp.send(); document.getElementById('myDiv').innerHTML = xmlhttp.responseText; } function loadXMLDocPost() { xmlhttp.onreadystatechange = respond xmlhttp.open('POST', 'data', true); xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xmlhttp.send('a=send2&b=2'); } function loadXMLDocXML() { xmlhttp.onreadystatechange = function () { console.log(xmlhttp); if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { const titles = xmlhttp.responseXML.getElementsByTagName('title'); let txt = ''; for (let t of titles) { console.log(t.childNodes) txt += t.childNodes[0].nodeValue + '<br />'; } document.getElementById('myDiv').innerHTML = txt; } } xmlhttp.open('GET', 'dataxml', true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"> <h3> Let AJAX change this text </h3> </div> <button type="button" </button> <button type="button" onclick="loadXMLDocSync()"> <button type="button" onclick="loadXMLDocPost()"> </button> </body> </ HTML >Copy the code

The backend:

'use strict';
 
const Controller = require('egg').Controller;
const fs = require('fs');
const path = require('path');
class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    await ctx.render('index.html');
  }
 
  async data() {
    const { ctx } = this;
    console.log(ctx.query);
    ctx.body = ctx.query.a + 'data';
  }
 
  async datapost() {
    const { ctx } = this;
    // console.log(ctx.request, ctx.request.body);
    ctx.body = ctx.request.body.a + 'data';
  }
 
  async dataxml() {
    const { ctx } = this;
    ctx.set('Content-Type', 'text/xml');
    console.log(this.app.config.view.root[0]);
    ctx.body = fs.readFileSync(path.join(this.app.config.view.root[0], 'data.xml'));
  }
}
 
module.exports = HomeController;

'use strict';
 
/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/data', controller.home.data);
  router.post('/data', controller.home.datapost);
  router.get('/dataxml', controller.home.dataxml);
};
Copy the code

The XML file

<? The XML version = "1.0" encoding = "ISO - 8859-1"? > <! -- Copyright w3school.com.cn --> <! -- W3School.com.cn bookstore example --> <bookstore> <book category="children"> <title lang="en">Harry Potter</title> <author> J. K. Rowling</author> <year>2005</year> <price> </book> <book category=" Cooking "> <title Lang ="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="web" cover="paperback"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> <book category="web"> <title lang="en">XQuery Kick Start</title> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> </bookstore>Copy the code

Part of the config

  config.view = {
    root: path.join(appInfo.baseDir, 'app/view'),
    mapping: {
      '.html': 'nunjucks',
    },
  };
 
  config.security = {
    csrf: {
      enable: false,
    },
  };
Copy the code