//1 创建对象
//2 初始化，设置请求方法和 url
//3 发送
//4 事件绑定 处理服务器端返回的结果
//1引入express
const express = require('express');
//2创建应用对象
const app = express();
//3创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装//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')
});//all all可以接受任意类型请求
app.all('/server',(request,response) =>{response.setHeader('Access-Control-Allow-Origin','*');//响应头，设置什么类型的响应头都能接受到response.setHeader('Access-Control-Allow-Headers','*');response.send('Hello AJAX POST')
});//json数据处理app.all('/json-server',(request,response) =>{response.setHeader('Access-Control-Allow-Origin','*');//响应头，设置什么类型的响应头都能接受到response.setHeader('Access-Control-Allow-Headers','*');//响应一个数据const data = {name:'牛虎'}//数据进行转换 send(字符串)let str = JSON.stringify(data);//响应体response.send(str);
});//4监听端口启动服务
app.listen(8000,()=>{console.log("服务器已启动，8000端口监听中....");
})<body><button class="btn">点击发送get请求</button><textarea name="" id="text" cols="30" rows="10"></textarea><script>//获取button按键const btn = document.querySelector('.btn');//获取文本框const te = document.querySelector('#text');//绑定点击事件btn.addEventListener('click',function(){//1 创建对象const xhr = new XMLHttpRequest();//2 初始化，设置请求方法和 urlxhr.open('GET','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 改变*/adystatechange = function(){//判断（服务器端返回了 所有的结果）adyState ===4){//判断状态码 200 404 403 401 500//响应状态码 2** 2开头的都是代表成功的if(xhr.status >= 200 && xhr.status < 300){//处理结果 行 头 空行 体//1 响应行console.log(xhr.status);//状态码console.log(xhr.statusText);//状态字符串console.AllResponseHeaders());//所有响应头console.sponse);//响应体te.innerHTML = sponse;}}}});</script>
</body><body><textarea name="" id="text" cols="30" rows="10"></textarea><script>const test = document.querySelector('#text');test.addEventListener('mouseover',function(){//1 创建对象const xhr = new XMLHttpRequest();//2 初始化，设置请求方法和 urlxhr.open('POST',"127.0.0.1:8000/server");//设置请求头，固定写法 content-type设置请求体内容类型 application/x-www-form-urlencoded参数查询字符串类型xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//3 发送 //xhr.send()xhr.send('2133132156123niuhu');//设置请求体213313256123niuhu//4 事件绑定 处理服务器端返回的结果adystatechange = function(){adyState === 4){if(xhr.status >=200 && xhr.status < 300){test.innerHTML = sponse;}}}});</script></body><body><textarea name="" id="text" cols="30" rows="10"></textarea><script>const test = document.querySelector('#text');test.addEventListener('mouseover',function(){//1 创建对象const xhr = new XMLHttpRequest();//2 初始化，设置请求方法和 urlxhr.open('POST',"127.0.0.1:8000/server");//设置请求头，固定写法 content-type设置请求体内容类型 application/x-www-form-urlencoded参数查询字符串类型 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//自定义响应头类型，值，同时要在server.js设置 //响应头，设置什么类型的响应头都能接受到 response.setHeader('Access-Control-Allow-Headers','*');xhr.setRequestHeader('name','niuhu')//3 发送 //xhr.send()xhr.send('2133132156123niuhu');//设置请求体213313256123niuhu//4 事件绑定 处理服务器端返回的结果adystatechange = function(){adyState === 4){if(xhr.status >=200 && xhr.status < 300){test.innerHTML = sponse;}}}});</script></body>
<body><textarea name="" class="text" cols="30" rows="10"></textarea><button class="button">点击获取json</button><script>const text = document.querySelector(".text");const btn = document.querySelector(".button")text.addEventListener("keydown",function(){const xhr = new XMLHttpRequest();sponseType = 'json';xhr.open("GET","127.0.0.1:8000/json-server");xhr.send();adystatechange = function(){adyState === 4){if(xhr.status >=200 && xhr.status < 300){text.innerHTML = sponse.name;}}}})</script></body>
本文发布于:2024-02-02 07:14:17，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170682925842207.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
