Ajax学习记录

tech2024-08-05 43

一、GET请求

先创建一个js文件

//引入express const express = require('express'); //创建应用对象 const app = express(); //创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 app.get('/', (request, response)=>{ //设置响应头 //设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应体 response.send('Hello express'); }); //监听端口启动服务 app.listen(8000, ()=>{ console.log("服务已经启动，8000端口监听中。"); });

再创建一个html文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ajax</title> </head> <style> #view{ width: 100px; height:100px; border:1px solid #60add5; } </style> <body> <div id="view"> </div> <button>request</button> <script> const btn = document.getElementsByTagName('button')[0]; btn.onclick = function(){ //创建对象 const xhr = new XMLHttpRequest(); //初始化，设置请求方法和url xhr.open('GET', 'http://127.0.0.1:8000'); //发送 xhr.send(); //实践绑定，处理服务端返回的结果 xhr.onreadystatechange = function(){ //判断服务端返回了所有结果 if(xhr.readyState === 4){ if(xhr.status >= 200 && xhr.status < 300){ //响应行 // console.log(xhr.status); //状态码 // console.log(xhr.statusText); //状态字符串 // console.log(xhr.getAllResponseHeaders()); //所有响应头 // console.log(xhr.response); //响应体 view.innerHTML = xhr.response; } } } } </script> </body> </html>

二、POST请求

先创建一个js文件

//引入express const express = require('express'); //创建应用对象 const app = express(); //创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 app.get('/', (request, response)=>{ //设置响应头 //设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应体 response.send('Hello express get'); }); app.post('/', (request, response)=>{ //设置响应头 //设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应体 response.send('Hello express post'); }); //监听端口启动服务 app.listen(8000, ()=>{ console.log("服务已经启动，8000端口监听中。"); });

再创建一个HTML文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ajax</title> </head> <style> #result{ width: 200px; height:200px; border:1px solid #60add5; } </style> <body> <div id="result"></div> <script> result = document.getElementById("result"); result.addEventListener("mouseover", function(){ //创建对象 const xhr = new XMLHttpRequest(); //设置请求方法和url xhr.open("POST", "http://127.0.0.1:8000"); //发送 xhr.send(); //事件绑定 xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status >= 200 && xhr.status < 300){ //处理服务端返回的结果 result.innerHTML = xhr.response; } } } }); </script> </body> </html>

最后文件

js文件

//引入express const express = require('express'); //创建应用对象 const app = express(); //创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 // app.all('/', (request, response)=>{ // //设置响应头 // //设置允许跨域 // response.setHeader('Access-Control-Allow-Origin', '*'); // //设置响应数据 // const data = { // name : "LaoWang", // age : "100" // }; // let str = JSON.stringify(data); // //设置响应体 // response.send(str); // }); app.get('/server', (request, response)=>{ //设置响应头 //设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Access-Control-Allow-Headers', '*'); response.setHeader('Access-Control-Allow-Method', '*'); //设置响应体 setTimeout(()=>{ response.send('延时响应'); }, 3000); }); app.post('/server', (request, response)=>{ //设置响应头 //设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应体 response.send('Hello express post'); }); //监听端口启动服务 app.listen(8000, ()=>{ console.log("服务已经启动，8000端口监听中。"); }); 在终端中输入 nodemon Ajax.js可开启服务

html 文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ajax</title> </head> <style> #result{ width: 200px; height:200px; border:1px solid #60add5; } </style> <body> <div id="result"></div> <button>点击发送</button> <button>点击取消</button> <script> result = document.getElementById("result"); btn = document.getElementsByTagName('button'); result.addEventListener("click", function(){ //创建对象 const xhr = new XMLHttpRequest(); //设置响应体数据类型 //xhr.responseType = 'json'; //超时设置 2s xhr.timeout = 2000; //超时回调 // xhr.ontimeout = function(){ // alert("请求超时，请稍后再试！"); // }; //网络异常回调 xhr.onerror = function(){ alert("网络异常！"); }; //设置请求方法和url xhr.open("POST", "http://127.0.0.1:8000/server"); //发送 xhr.send(); //事件绑定 xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status >= 200 && xhr.status < 300){ //处理服务端返回的结果 result.innerHTML = xhr.response; } } } }); window.onkeydown = function(){ const xhr = new XMLHttpRequest(); //xhr.responseType = "json"; xhr.timeout = 2000; // xhr.ontimeout = function(){ // alert("请求超时，请稍后再试！"); // }; xhr.onerror = function(){ alert("网络异常！"); }; xhr.open("GET", "http://127.0.0.1:8000/server"); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status >= 200 && xhr.status < 300){ result.innerHTML = xhr.response; } } } } let x = null; let isSending = false; btn[0].onclick = function(){ if(isSending) x.abort(); //如果已经有一个请求，就把它取消，再创建一个新的请求 x = new XMLHttpRequest; isSending = true; x.open("GET", "http://127.0.0.1:8000/server"); x.send(); x.onreadystatechange = function(){ if(x.readyState === 4){ isSending = false; if(x.status >= 200 && x.status < 300){ result.innerHTML = x.response; } } } } btn[1].onclick = function(){ x.abort(); } </script> </body> </html>

最新回复(0)