get.html代码:
<!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>Ajax Get 请求</title> <style> #result { width: 200px; height: 100px; border:solid 1px #90b; } </style> </head> <body> <button>点击发送请求</button> <div id="result"></div> <script> //获取button元素 const btn = document.getElementsByTagName('button')[0]; const result = document.getElementById('result'); //绑定事件 btn.onclick = function() { //1.创建对象 const xhr = new XMLHttpRequest(); //2.初始化,设置请求方法和url xhr.open('GET', 'http://127.0.0.1:8000/server'); //3.发送 xhr.send(); //4.事件绑定,处理服务端返回的结果 //on 当...时候 //readystate是xhr对象中的属性,表示状态0 1 2 3 4 //change 改变 xhr.onreadystatechange = function() { //判断服务端是否返回了所有的结果 if (xhr.readyState === 4) { //判断响应状态码 200 404 403 401 500 //2xx表示成功 if (xhr.status >= 200 && xhr.status < 300) { //响应行 //console.log(xhr.status); //状态码 //console.log(xhr.statusText); //状态字符串 //console.log(xhr.getAllResponseHeaders()); //所有响应头 //console.log(xhr.response); //响应体 result.innerHTML = xhr.response; } else { } } } } </script> </body> </html>
xhr.open('GET', 'http://127.0.0.1:8000/server');
客户端发送get请求,服务器中路由也要设置get,app.get('/server', (request, response) => {
,如果客户端发送的是post请求,服务器端也要设置postpost.html代码:
<!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>Post</title> <style> #result { width: 200px; height: 100px; border: solid 1px #903; } </style> </head> <body> <div id="result"></div> <script> const result = document.getElementById('result'); result.addEventListener('mouseover', function() { const xhr = new XMLHttpRequest(); xhr.open('POST', 'http://127.0.0.1:8000/server'); //设置请求头信息 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send("a=100&b=200&c=300"); //发送参数的值 xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { result.innerHTML = xhr.response; } } else { } } }); </script> </body> </html>
json.html代码:
<!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>JSON</title> <style> #result { width: 200px; height: 100px; border: solid 1px #89b; } </style> </head> <body> <div id="result"></div> <script> const result = document.getElementById('result'); window.onkeydown = function() { const xhr = new XMLHttpRequest(); //设置响应体数据类型,自动转换数据 xhr.responseType = 'json'; xhr.open('GET', 'http://127.0.0.1:8000/json-server'); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { //result.innerHTML = xhr.response; //手动将response数据转化为对象 //let data = JSON.parse(xhr.response); //console.log(data); //result.innerHTML = data.name; //自动对数据进行转换 console.log(xhr.response); result.innerHTML = xhr.response.name; } } else { } } } </script> </body> </html>
xhr.responseType = 'json';
会自动将xhr.response转换成对象类型servser.js代码:
//引入express const express = require('express'); //创建应用对象 const app = express(); //创建路由规则 //get请求 app.get('/server', (request, response) => { //设置响应头 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应体 response.send('hello ajax GET'); }); //post请求 app.post('/server', (request, response) => { //设置响应头 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应体 response.send('hello ajax POST'); }); //服务端响应json数据 app.get('/json-server', (request, response) => { //设置响应头 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应体 const data = { name: 'jerry' }; var str = JSON.stringify(data); response.send(str); }); //监听端口启动服务 app.listen(8000, () => { console.log("服务已经启动,8000端口监听中...."); });