AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 下面是一个使用原生的ajax发送get请求例子：
特点就是：页面不需要刷新，异步请求，用户体验好。但是SEO不友好。 完整代码： html：
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>使用原生的ajax发送get请求</title> <style type="text/css"> * { margin: 0; padding: 0; } #result { width: 500px; height: 130px; border: 1px solid red; } </style> </head> <body> <button>点我发送请求</button> <div id="result"></div> <script type="text/javascript"> //获取button let button = document.getElementsByTagName('button')[0] //获取id为result的那个div let result = document.getElementById('result') //绑定一个点击事件 //弄不清这些看mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest button.onclick = function () { //创建XMLHttpRequest对象 const xhr = new XMLHttpRequest() //设置请求方法和url xhr.open('GET', 'http://127.0.0.1:8888/server?username=ding&password=123456') //发送 xhr.send() //处理服务端返回的结果 /** *XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态 值 状态 描述 0 UNSENT 代理被创建，但尚未调用 open() 方法。 1 OPENED open() 方法已经被调用。 2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。 3 LOADING 下载中； responseText 属性已经包含部分数据。 4 DONE 下载操作已完成。 */ xhr.onreadystatechange = function () { //判断服务端 返回的所有的结果 if (xhr.readyState === 4) { //状态码 200~300之间都是成功 if (xhr.status >= 200 && xhr.status < 300) { //success //处理结果 报文（行 头 空行 体） let status = xhr.status //状态码 let statusText = xhr.statusText //状态字符串 let arh = xhr.getAllResponseHeaders() //所有响应头 let response = xhr.response //响应体 //设置id为result的那个div的响应文本 result.innerHTML = 'status:' + status + '<br/>statusText:' + statusText + '<br/>AllResponseHeaders:' + arh + '<br/>response:' + response } else { console.log('server error') } } } } </script> </body> </html>这里的服务器我用的是node.js
//引入express const express = require('express') //端口号 const port = 8888 //创建应用对象 const app = express() //创建路由规则 路由就是引路人 根据不同的url请求 导航到不同的页面 app.get('/server', (request, response) => { //request 是对请求报文的封装 //response 是对响应报文的封装 //设置响应头 允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello Ajax,I am dingqiusi->get') }) //监听端口 启动服务 app.listen(port, () => { console.log(`服务已经启动了，端口号：${port}`) })