8. 发送POST请求
服务端：
// 导入express const express = require('express') // 创建应用对象 const app = express() // 创建路由对象 // request 是对请求报文的封装 // response 是对响应报文的封装 app.get('/', (request, response) => { //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); // 向客户端发送数据 response.send('Hello AJAX') }) app.post('/', (request, response) => { //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); // 向客户端发送数据 response.send('Hello AJAX POST') }) // 启动服务器进行监听 // 8000 端口 服务端在8000端口监听客户端向8000端口发送过来的请求 app.listen(8000, () => { console.log('服务端在8000端口监听') })
<!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> #result { width: 200px; height: 100px; border: solid 1px #90b; } </style> </head> <body> <button>发送POST请求</button> <div id="result"></div> <script> // 获取按钮 const btn = document.querySelector('button') // 获取div const div = document.querySelector('div') // 绑定事件 btn.addEventListener('click', function () { // 创建发送AJAX请求的对象 const xhr = new XMLHttpRequest() // 初始化 设置请求的方法和url xhr.open('POST', 'http://127.0.0.1:8000/') // 发送请求 xhr.send() // 处理返回的数据 xhr.onreadystatechange = function () { // 服务端返回了所有的结果 if (xhr.readyState === 4) { // 响应状态码 2xx 为成功 if (xhr.status >= 200 && xhr.status < 300) { // 设置div中的文本 div.innerHTML = xhr.response } } } }) </script> </body> </html>
8.1 POST设置请求体
在xhr.send()中设置，可以设置任意类型任意格式的数据
// 绑定事件 btn.addEventListener('click', function () { // 创建发送AJAX请求的对象 const xhr = new XMLHttpRequest() // 初始化 设置请求的方法和url xhr.open('POST', 'http://127.0.0.1:8000/') // 发送请求 xhr.send('name=zs&age=12') ... })
8.2 设置请求头
在open方法后进行添加 xhr.setRequestHeader()进行设置
// 绑定事件 btn.addEventListener('click', function () { // 创建发送AJAX请求的对象 const xhr = new XMLHttpRequest() // 初始化 设置请求的方法和url xhr.open('POST', 'http://127.0.0.1:8000/') //设置请求头 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') // 发送请求 xhr.send('name=zs&age=12') ... })
9. 服务端响应JSON格式的数据
// 导入express const express = require('express') // 创建应用对象 const app = express() // 创建路由对象 // request 是对请求报文的封装 // response 是对响应报文的封装 app.get('/', (request, response) => { //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); // 向客户端发送数据 response.send('Hello AJAX') }) app.post('/', (request, response) => { //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); // 向客户端发送数据 response.send('Hello AJAX POST') }) app.get('/json', (request, response) => { //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); const data = { name: 'zs', age: 12 } // 对对象进行字符串转换 let str = JSON.stringify(data) // 向客户端发送数据 response.send(str) }) // 启动服务器进行监听 // 8000 端口 服务端在8000端口监听客户端向8000端口发送过来的请求 app.listen(8000, () => { console.log('服务端在8000端口监听') })
<!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> #result { width: 200px; height: 100px; border: solid 1px #90b; } </style> </head> <body> <button>发送GET请求JSON数据</button> <div id="result"></div> <script> // 获取按钮 const btn = document.querySelector('button') // 获取div const div = document.querySelector('div') // 绑定事件 btn.addEventListener('click', function () { // 创建发送AJAX请求的对象 const xhr = new XMLHttpRequest() // 初始化 设置请求的方法和url xhr.open('GET', 'http://127.0.0.1:8000/json') // 发送请求 xhr.send() // 处理返回的数据 xhr.onreadystatechange = function () { // 服务端返回了所有的结果 if (xhr.readyState === 4) { // 响应状态码 2xx 为成功 if (xhr.status >= 200 && xhr.status < 300) { // 设置div中的文本 div.innerHTML = xhr.response console.log(xhr.response) // 手动对数据进行转化 console.log(JSON.parse(xhr.response)) } } } }) </script> </body> </html>
9.1 服务端返回的JSON自动转化
设置：
// 设置响应体数据的类型 xhr.responseType = 'json'
<!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> #result { width: 200px; height: 100px; border: solid 1px #90b; } </style> </head> <body> <button>发送GET请求JSON数据</button> <div id="result"></div> <script> // 获取按钮 const btn = document.querySelector('button') // 获取div const div = document.querySelector('div') // 绑定事件 btn.addEventListener('click', function () { // 创建发送AJAX请求的对象 const xhr = new XMLHttpRequest() // 设置响应体数据的类型 xhr.responseType = 'json' // 初始化 设置请求的方法和url xhr.open('GET', 'http://127.0.0.1:8000/json') // 发送请求 xhr.send() // 处理返回的数据 xhr.onreadystatechange = function () { // 服务端返回了所有的结果 if (xhr.readyState === 4) { // 响应状态码 2xx 为成功 if (xhr.status >= 200 && xhr.status < 300) { // 设置div中的文本 div.innerHTML = xhr.response console.log(xhr.response) // 手动对数据进行转化 // console.log(JSON.parse(xhr.response)) } } } }) </script> </body> </html>
10. nodemon
11. 解决 IE 缓存问题
在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：
浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题。
在请求url后添加?t='+Date.now()
将原来的请求地址：
xhr.open( 'GET', 'http://127.0.0.1:8000/ie' )
修改为：
xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now())
由于每次的请求时间不一样，产生的时间戳不一样，所以每次发起的请求url都不同。
<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(); xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now()); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status >= 200 && xhr.status< 300){ result.innerHTML = xhr.response; } } } }) </script> </body>
