文章目录
Ajax
一、定义
一、 同步和异步的区别
同步提交：当用户发送请求时，当前页面不可以使用，服务器将数据响应页面到客户端，响应完成后，用户才可以使用页面。 异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来 。
二、Ajax工作原理
客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示：
二、创建Ajax五个基本步骤
一、创建XMLHttpRequest对象
在chrome浏览器中创建XMLHttpRequest对象的方式为:
const xhr = new XMLHttpRequest();
二、初始化设置请求方法和url
//POST请求 xhr.open('POST',"http://localhost:xxx"); //GET请求 //xhr.open('GET',"http://localhost:xxx/a=100&b=200");
三、发送（向服务器端发送请求）
GET和POST请求方式不同点：
GET的请求参数在请求地址url中； POST的请求参数在发送请求Send()中；
//POST请求 xhr.send("a=100&b=200"); //GET请求 //xhr.send();
四、设置响应HTTP请求状态变化的函数
创建完HTTP请求之后，可以将HTTP请求发送给Web服务器了。发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。
1. 未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，此时XMLHttpRequest对象的readyState属性值为0。 2. 初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。 3. 发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest对象的readyState属性值为2。 4. 接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，XMLHttpRequest对象的readyState属性值为3。 5. 完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时XMLHttpRequest对象的readyState属性值为4。 此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。
xhr.onreadystatechange = function(){ //判断状态4：已将数据响应到JS中，进行渲染 if(xhr.readyState==4){ } }
五、设置获取服务器返回数据的语句
响应状态码：200-300都是成功
if(xhr.status >= 200 && xhr.status < 300){ //处理服务器端结果 行 头 空行 体 //1.响应行 //通过Ajax的异步调用获得服务器端数据之后，使用DOM来将网页中的数据进行局部更新 result.innerHTML = xhr.response;//响应体 }
三、请求方式
下面代码可以直接复制下来，运行看下效果，请求方式，一定要先配置好 Express
axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 从浏览器中创建 XMLHttpRequests; 自动转换 JSON 数据; 支持 Promise API;
axios 发送 AJAX请求
GET和POST请求，使用npm安装一下express，配置服务端，实现前端与服务端进行数据交互。
前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>axios 发送 AJAX请求</title> <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script> </head> <body> <button>GET</button> <button>POST</button> <button>AJAX</button> <script> const btns = document.querySelectorAll('button'); btns[0].onclick = function(){ //GET请求 axios.get('http://localhost:xxx/axios-server',{ params:{ id:100, vip:7 } }).then(value=>{ //返回消息(比较详细) console.log(value); }); } btns[2].onclick = function(){ axios({ //请求方法 method: 'POST', //URL url:'http://localhost:xxx/axios-server', //Url参数 params: { a:100, b:100 } }) } </script> </body> </html>
服务端
//axios服务 app.all('/axios-server',(request,response)=>{ //设置响应头 response.setHeader('Access-Control-Allow-Origin','*'); //response.setHeader('Access-Control-Allow-Headers','*'); const data = {name: 'XXx'}; // //定时器 setTimeout(() => { response.send(JSON.stringify(data)); }, 1000); });
jquery 发送 AJAX请求
前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script crossorigin src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </head> <body> <div class="container"> <h2 class="page-header">Jquery发送AJAX请求</h2> <button class="btn btn-primary">GET</button> <button class="btn btn-danger">POST</button> <button class="btn btn-info">通用方法ajax</button> </div> <script> $('button').eq(2).click(function(){ $.ajax({ //请求url url: 'http://localhost:xxx/jquery-server', //请求参数 data: {a:100,b:200}, //请求类型 type: 'POST', //响应体结果设置 dataType: 'json', //成功的回调函数 success: function(data){ console.log(data); }, //超时时间 timeout: 2000, //失败的回调函数 error: function(){ console.log("请求超时！！！"); } }) }) </script> </body> </html>
服务端
all任何请求类型都可以接收
app.post('/jquery-server',(request,response)=>{ //设置响应头 response.setHeader('Access-Control-Allow-Origin','*'); const data = {name: 'xxx'}; // //定时器 setTimeout(() => { response.send(JSON.stringify(data)); }, 1000); });
fetch 发送 AJAX请求
前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fetch 发送 AJAX请求</title> </head> <body> <button>AJAX请求</button> <script> const btn = document.querySelector('button'); btn.onclick = function(){ fetch('http://localhost:xxx/fetch-server',{ //请求方法 method: 'POST', //请求头 headers: { name: 'xx' }, //请求体 body: 'username=admin' }).then(response=>{ return response.json(); }).then(response=>{ console.log(response); }) } </script> </body> </html>
服务端
//fetch服务 app.all('/fetch-server',(request,response)=>{ //设置响应头 response.setHeader('Access-Control-Allow-Origin','*'); response.setHeader('Access-Control-Allow-Headers','*'); const data = {name: 'xxx'}; // //定时器 setTimeout(() => { response.send(JSON.stringify(data)); }, 1000); });
XMLHttpRequest超时与网络异常请求
前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1{ width: 300px; height: 300px; border: 1px solid red; } </style> </head> <body> <div id="div1"> </div> <button>点我发送请求</button> <script> const btn = document.getElementsByTagName('button')[0]; const result = document.getElementById('div1'); //绑定事件 btn.addEventListener("click",function(){ //1.创建对象 const xhr = new XMLHttpRequest(); //超时设置 xhr.timeout = 2000; //超时回调 xhr.ontimeout = function(){ alert("网络异常，请稍后重试！！！"); } //网络异常回调 xhr.onerror = function(){ alert("你的网络似乎出了一些问题！"); } //2.初始化 设置请求方法和url xhr.open('GET',"http://localhost:xxx/delay"); //设置请求头 //Content-Type 设置请求体内容的类型 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //3.发送 xhr.send(); //4.事件绑定 xhr.onreadystatechange = function(){ //判断 if(xhr.readyState==4){ //判断响应状态码 if(xhr.status >= 200 && xhr.status < 300){ //处理服务器端结果 行 头 空行 体 //1.响应行 result.innerHTML = xhr.response;//响应体 } } } }) </script> </body> </html>
服务端
//延迟响应 app.all('/delay',(request,response)=>{ //设置响应头 response.setHeader('Access-Control-Allow-Origin','*'); response.setHeader('Access-Control-Allow-Headers','*'); //定时器 setTimeout(() => { response.send("延迟响应"); }, 1000); });
express使用配置
//1.引入express const express = require('Express'); //2.创建应用对象 const app = express(); //3.服务器端代码 //4.监听端口启动服务(端口号) app.listen(xxx,()=>{ console.log("服务器已经启动,xxx端口监听中"); })
