Ajax设置请求头信息
1-GET.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax GET请求</title> <style> #result{ width:200px; height:100px; border:solid 1px #4fad09; } </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?a=100&b=200&c=300'); //3.发送 xhr.send(); //4.事件绑定 处理服务端返回的结果 //on即when:当...时候 //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){ //处理结果:行 头 空行 体 //1.响应行 console.log(xhr.status); //响应状态码 console.log(xhr.statusText); //响应状态字符串 console.log(xhr.getAllResponseHeaders()); //所有响应头 console.log(xhr.response); //响应体 //设置result的文本 result.innerHTML=xhr.response; } } } } </script> </body> </html>
2-POST.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax 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(){ //1.创建对象 const xhr=new XMLHttpRequest(); //2.初始化 设置类型与URL xhr.open('POST','http://127.0.0.1:8000/server'); //设置请求头 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.setRequestHeader('name','atguigu'); //3.发送 xhr.send('a=100&bb=200&c=300'); //4.事件绑定 xhr.onreadystatechange=function(){ //判断 if(xhr.readyState===4){ if(xhr.status>=200&&xhr.status<300){ //处理服务端返回的结果 result.innerHTML=xhr.response; } } } }) </script> </body> </html>
server.js
//1.引入express const express=require('express'); //2.创建应用对象 const app=express(); //3.创建路由规则 //request是对请求报文的封装 //response是对响应报文的封装 app.get('/server',(request,response)=>{ //设置响应头 允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); //设置响应体 response.send('Hello Ajax GET'); }); app.all('/server',(request,response)=>{ //设置响应头 允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); //响应头 response.setHeader('Access-Control-Allow-Headers','*'); //设置响应体 response.send('Hello Ajax POST'); }); //4.监听端口启动服务 app.listen(8000,()=>{ console.log("服务已经启动,8000端口监听中......"); })
启动服务：
Ajax GET请求页面：
Ajax POST请求页面：(其中鼠标放在红色框便会显示Hello Ajax POST)
由上图可见,增加了name属性.
