一，如何设置请求头体
1.设置请求体
在send方法里面进行请求头的设置，格式参数只要浏览器可以知晓即可，没有太大要求
2.查看请求体
3.设置请求头
Content-Type设置的是请求体内容类型，application/x-www-form-urlencoded（固定格式）参数查寻字符串类型
这样就设置好了
二，ajax服务端响应json
条件：按下键盘出发键盘事件，获取服务器的响应数据，然后把该响应数据的对象转化成字符串，在把所拿到的数据放到div里（这里有两种转换方式）
手动：
自动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #result { width: 200px; height: 100px; border: 1px solid black; } </style> </head> <body> <div id="result"></div> <script> // 绑定键盘按下事件 var result = document.getElementById('result'); window.onkeydown = function () { // 发送请求 const xhr = new XMLHttpRequest(); // 设置响应体数据类型 xhr.responseType = 'json'; // 初始化 xhr.open('GET', 'http://localhost:8000/JSON-server') // 发送请求 xhr.send(); // 事件绑定 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { // 手动转换 // let data = JSON.parse(xhr.response); // console.log(data); // result.innerHTML = data.name; // 自动转换 console.log(xhr.response); result.innerHTML = xhr.response.name; } } } } </script> </body> </html>
三，nodemon工具包
辅助我们进行改变服务端的代码
1.输入指令
2.等待安装完成
3.使用nodemon，这里就直接使用nodemon...不在使用node了
4.修改完服务端的代码后，只需要保存一下就可以自动开启
四，IE缓存问题
虽然现在不用ie了，但是还是可以了解一下滴
利用Date.now()获取当前事件戳，就可以做到同步啦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #result { width: 200px; height: 100px; border: 1px solid black; } </style> </head> <body> <button>点击发送请求</button> <div id="result"> </div> <script> const btn = document.getElementsByTagName('button')[0]; const result = document.querySelector('#result'); btn.addEventListener('click', function () { const xhr = new XMLHttpRequest(); // 因为IE浏览器的缓存问题，所以没办法执行服务端更新后的数据请求 // Date.now(),获取当前事件戳 xhr.open('GET', 'http://localhost:8000/IE' + Date.now()); xhr.send(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { result.innerHTML = xhr.response; } } } }) </script> </body> </html>
五，AJAX请求超时和网络异常处理
主要用到了ontimeout和onerror
<body> <button>点击发送</button> <div id="result"></div> <script> const btn = document.querySelector('button'); const result = document.getElementById('result'); btn.addEventListener('click', function () { // 发送请求 const xhr = new XMLHttpRequest(); xhr.timeout = 2000; // 设置一个超时回调 xhr.ontimeout = function () { alert('网络请求超时，请稍后重试'); } // 设置网络异常回调 xhr.onerror = function () { alert('网络异常，请稍后重试'); } // 设置响应体数据类型 xhr.responseType = 'json'; // 初始化 xhr.open('GET', 'http://localhost:8000/delay') // 发送请求 xhr.send(); // 事件绑定 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { result.innerHTML = xhr.response.name; } } } }) </script> </body>
// 引入express const express = require('express'); // 创建应用对象 const app = express(); app.all('/delay', (request, response) => { // 设置响应头 setTimeout(() => { response.send('超时响应'); }, 2000); response.setHeader('Access-Control-Allow-Origin', '*'); });
请求超时
网络异常
以下是如何模拟关闭网络的操作方式
六，ajax取消请求
<body> <button>发送请求</button> <button>取消请求</button> <script> // 获取元素对象 const btns = document.querySelectorAll('button'); // 将x声明为全局变量才能供他俩使用 let x = null; // 绑定事件 btns[0].addEventListener('click', function () { x = new XMLHttpRequest(); x.open('GET', 'http://localhost:8000/delay'); x.send(); }) // 使用abort取消请求 btns[1].onclick = function () { x.abort(); } </script> </body>
点击发送请求 pending是在请求中，
这时候点击取消请求就可以，取消正在请求中的状态
七，重复请求问题
根据isSending的值来判断当前数据是否请求中
<body> <button>发送请求</button> <!-- <button>取消请求</button> --> <script> // 获取元素对象 const btns = document.querySelectorAll('button'); // 将x声明为全局变量才能供他俩使用 let x = null; // 标识变量 let isSending = false; // 绑定事件 btns[0].addEventListener('click', function () { if (isSending) x.abort(); x = new XMLHttpRequest(); // 修改标识变量值 isSending = true; x.open('GET', 'http://localhost:8000/delay'); x.send(); x.onreadystatechange = function () { if (x.readyStste === 4) { isSending = false; } } }) </script> </body>
