前端主要负责

    • url
    • 参数
    • 请求类型
    • 响应体结果
    • 成功的回调函数
    • 超时时间
    • 失败的回调
    • 头信息

    源码：
    server.js

    1. //1.引入express
    2. const express = require('express');
    3. //2.创建应用对象
    4. const app =express();
    5. //3.创建路由规则
    6. //request是对请求报文的一个封装
    7. //response是对响应报文的一个封装
    8. app.get('/server',(request, response)=>{
    9.     //设置响应头   设置允许跨域
    10.     response.setHeader("Access-Control-Allow-Origin","*");
    11.     //设置响应体
    12.     response.send("Hello  nodemon-AJAX");
    13. })
    14. //设置一个专门针对IE缓存问题的
    15. app.get('/ie',(request, response)=>{
    16.     //设置响应头   设置允许跨域
    17.     response.setHeader("Access-Control-Allow-Origin","*");
    18.     //设置响应体
    19.     response.send("Hello IE-change");
    20. })
    21. //延时响应
    22. app.get('/delay',(request, response)=>{
    23.     //设置响应头   设置允许跨域
    24.     response.setHeader("Access-Control-Allow-Origin","*");
    25.     //设置一个延时响应来测试
    26.     setTimeout(() => {
    27.         //设置响应体
    28.         response.send("Hello delay-issue");        
    29.     }, 3000);
    30. })
    31. app.post('/server',(request, response)=>{
    32.     //设置响应头   设置允许跨域
    33.     response.setHeader("Access-Control-Allow-Origin","*");
    35.     //设置响应体
    36.     response.send("Hello AJAX POST");
    37. })
    38. app.all('/json-server',(request, response)=>{//*可以接受任意类型的请求
    39.     //设置响应头   设置允许跨域
    40.     response.setHeader("Access-Control-Allow-Origin","*");
    41.     //设置响应头   
    42.     response.setHeader("Access-Control-Allow-Headers","*");//*任意头
    43.     //响应一个数据
    44.     const data = {
    45.         name: 'dataname',
    46.     }
    47.     //对对象进行字符串转换，因为send接受参数只能是字符串
    48.     let str = JSON.stringify(data)
    49.     //设置响应体
    50.     response.send(str);
    51. })
    52. //4.监听端口启动服务
    53. app.listen(8000,()=>{
    54.     console.log("服务已经启动，8000端口监听中")
    55. })

    get.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>AJAX GET 请求</title>
    8.     <style>
    9.         #result{
    10.             width: 200px;
    11.             height: 100px;
    12.             border: solid 1px #90b;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <button>点击发送请求</button>
    18.     <div id="result"></div>
    19.     <script>
    20.         //获取button元素
    21.         const btn = document.querySelector("button");
    22.         const result = document.querySelector("#result");
    23.         //绑定事件
    24.         btn.onclick = function(){
    25.             //1.创建对象
    26.             const xhr = new XMLHttpRequest();
    27.             //2.初始化，设置请求方法url
    28.             xhr.open('GET',"http://127.0.0.1:8000/server?a=100&b=200&c=300");
    29.             //3.发送
    30.             xhr.send();
    31.             //4.事件绑定 处理服务端返回的结果
    32.             //readystate:xhr对象中的属性，表示状态0：未初始化 1：open方法调用完毕 2：send方法调用完毕 3：服务端返回部分结果 4：返回全部结果
    33.             //change 改变
    34.             xhr.onreadystatechange = function(){
    35.                 //判断 服务端返回了所有的结果
    36.                 if(xhr.readyState === 4){
    37.                     //判断响应状态码 200 404 403 401 500 
    38.                     //2开头都是成功
    39.                     if(xhr.status >= 200 && xhr.status <300){
    40.                         //处理结果:行 头 空行 体
    41.                         //响应行
    42.                         // console.log(xhr.status);//状态码
    43.                         // console.log(xhr.responseText);//状态字符串
    44.                         // console.log(xhr.getAllResponseHeaders());//所有响应头
    45.                         // console.log(xhr.response);//响应体
    47.                         //设置result文本
    48.                         result.innerHTML = xhr.response;
    49.                     }else{
    51.                     }
    52.                 }
    53.             }
    54.         }
    55.     </script>
    56. </body>
    57. </html>

    post.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>AJAX GET 请求</title>
    8.     <style>
    9.         #result{
    10.             width: 200px;
    11.             height: 100px;
    12.             border: solid 1px #90b;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <button>点击发送请求</button>
    18.     <div id="result"></div>
    19.     <script>
    20.         //获取button元素
    21.         const btn = document.querySelector("button");
    22.         const result = document.querySelector("#result");
    23.         //绑定事件
    24.         btn.onclick = function(){
    25.             //1.创建对象
    26.             const xhr = new XMLHttpRequest();
    27.             //2.初始化，设置请求方法url
    28.             xhr.open('GET',"http://127.0.0.1:8000/server?a=100&b=200&c=300");
    29.             //3.发送
    30.             xhr.send();
    31.             //4.事件绑定 处理服务端返回的结果
    32.             //readystate:xhr对象中的属性，表示状态0：未初始化 1：open方法调用完毕 2：send方法调用完毕 3：服务端返回部分结果 4：返回全部结果
    33.             //change 改变
    34.             xhr.onreadystatechange = function(){
    35.                 //判断 服务端返回了所有的结果
    36.                 if(xhr.readyState === 4){
    37.                     //判断响应状态码 200 404 403 401 500 
    38.                     //2开头都是成功
    39.                     if(xhr.status >= 200 && xhr.status <300){
    40.                         //处理结果:行 头 空行 体
    41.                         //响应行
    42.                         // console.log(xhr.status);//状态码
    43.                         // console.log(xhr.responseText);//状态字符串
    44.                         // console.log(xhr.getAllResponseHeaders());//所有响应头
    45.                         // console.log(xhr.response);//响应体
    47.                         //设置result文本
    48.                         result.innerHTML = xhr.response;
    49.                     }else{
    51.                     }
    52.                 }
    53.             }
    54.         }
    55.     </script>
    56. </body>
    57. </html>

    JSON.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>JSON 响应</title> 
    8.     <style>
    9.         #result{
    10.             width: 200px;
    11.             height: 100px;
    12.             border: solid 1px #90b;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <div id="result"></div>
    18.     <script>
    19.         const result = document.getElementById("result");
    20.         //绑定键盘按下事件
    21.         window.onkeydown = function(){
    22.             // console.log("test");
    23.             //发送请求
    24.             const xhr = new XMLHttpRequest();
    25.             //设置响应体数据类型
    26.             xhr.responseType = 'json';
    27.             //初始化
    28.             xhr.open('GET','http://127.0.0.1:8000/json-server');
    29.             //发送
    30.             xhr.send();
    31.             //事件绑定
    32.             xhr.onreadystatechange = function(){
    33.                 if(xhr.readyState === 4){
    34.                     if(xhr.status >= 200 && xhr.status <300){
    35.                         // //
    36.                         // console.log(xhr.response);
    37.                         // result.innerHTML = xhr.response;
    38.                         //手动对数据转化
    39.                         // let data = JSON.parse(xhr.response);
    40.                         // console.log(data);
    41.                         // result.innerHTML = data.name;
    42.                         //自动转换--在xhr定义后面设置响应体数据类型
    43.                         console.log(xhr.response);
    44.                         result.innerHTML = xhr.response.name;
    45.                     }
    46.                 }
    47.             }
    48.         }
    49.     </script>
    50. </body>
    51. </html>

    ie内存.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>IE缓存问题</title> 
    8.     <style>
    9.         #result{
    10.             width: 200px;
    11.             height: 100px;
    12.             border: solid 1px #90b;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <button>点击发送请求</button>
    18.     <div id="result"></div>
    19.     <script>
    20.         const btn = document.querySelector("button");
    21.         const result = document.querySelector("#result");
    22.         btn.addEventListener('click', function(){
    23.             const xhr = new XMLHttpRequest();
    24.             xhr.open("GET","http://127.0.0.1:8000/ie?t="+Date.now());
    25.             xhr.send();
    26.             xhr.onreadystatechange = function() {
    27.                 if(xhr.readyState === 4){
    28.                     if(xhr.status >=200 && xhr.status < 300){
    29.                         result.innerHTML = xhr.response;
    30.                     }
    31.                 }
    32.             }
    33.         })
    35.     </script>
    36. </body>
    37. </html>

    重复请求html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>重复请求问题</title>
    8. </head>
    9. <body>
    10.     <button>点击发送请求</button>
    11.     <script>
    12.         const btns = document.querySelectorAll("button");
    13.         let xhr = null;//细节
    14.         //设置一个标识变量:是否正在发送AJAX请求
    15.         let isSending = false;
    16.         btns[0].onclick = function(){
    17.             //判断表示变量
    18.             if(isSending){
    19.                 xhr.abort();//正在发送就把原来的取消，创建新的请求。
    20.             }
    21.             xhr =new XMLHttpRequest();
    22.             //修改标识
    23.             isSending = true;
    24.             xhr.open("GET","http://127.0.0.1:8000/delay");
    25.             xhr.send();
    26.             xhr.onreadystatechange = function(){
    27.                 if(xhr.readyState === 4){//发送完毕
    28.                     //修改标识
    29.                     isSending = false;
    30.                 }
    31.             }
    32.         }
    34.     </script>
    35. </body>
    36. </html>

    超时html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>请求超时与网络异常</title>
    8.     <style>
    9.         #result{
    10.             width: 200px;
    11.             height: 100px;
    12.             border: solid 1px #90b;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <button>点击发送请求</button>
    18.     <div id="result"></div>
    19.     <script>
    20.         const btn = document.querySelector("button");
    21.         const result = document.querySelector("#result");
    22.         btn.addEventListener('click', function(){
    23.             const xhr = new XMLHttpRequest();
    24.             //增加超时设置:请求超过两秒就取消
    25.             xhr.timeout = 2000;
    26.             //超时回调
    27.             xhr.ontimeout=()=>{
    28.                 alert("网络超时，请稍后重试")
    29.             }
    30.             //网络异常回调函数
    31.             xhr.onerror = ()=>{
    32.                 alert("网络似乎出现了一些问题");
    33.             }
    34.             xhr.open("GET","http://127.0.0.1:8000/delay");
    35.             xhr.send();
    36.             xhr.onreadystatechange = function() {
    37.                 if(xhr.readyState === 4){
    38.                     if(xhr.status >=200 && xhr.status < 300){
    39.                         result.innerHTML = xhr.response;
    40.                     }
    41.                 }
    42.             }
    43.         })
    44.     </script>
    45. </body>
    46. </html>

    取消html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>取消请求</title>
    8. </head>
    9. <body>
    10.     <button>点击发送请求</button>
    11.     <button>点击取消请求</button>
    12.     <script>
    13.         const btns = document.querySelectorAll("button");
    14.         let xhr = null;//细节
    15.         btns[0].onclick = function(){
    16.             xhr =new XMLHttpRequest();
    17.             xhr.open("GET","http://127.0.0.1:8000/delay");
    18.             xhr.send();
    20.         }
    21.         //abort方法
    22.         btns[1].onclick = function(){
    23.             xhr.abort();
    24.         }
    25.     </script>
    26. </body>
    27. </html>