• Ajax学习：Ajax发送POST请求

    当鼠标移动到div区域的时候，发送post请求给服务端 把响应体内容在div中呈现

    服务器部分

    1.  
    2. //1、导入express
    3. const express=require('express')
    4. //2、创建应用对象  创建web服务器
    5. const app=express()
    6. //3、创建路由规则
    7. //监听客户端的GET请求和POST请求，并向客户端响应具体内容
    8. //requset是对请求报文的封装
    9. //response是对响应报文的封装
    10. app.get('/server',function(requset,response){
    11.     //设置响应头 名称 值----设置允许跨域
    12.     response.setHeader('Access-Control-Allow-Origin','*');
    13.     //设置响应体
    14.     response.send('hello AJAX');
    15. })
    16. app.post('/server',function(requset,response){
    17.     //设置响应头 名称 值----设置允许跨域
    18.     response.setHeader('Access-Control-Allow-Origin','*');
    19.     //设置响应体
    20.     response.send('hello AJAX POST');
    21. })
    22.  
    23. //4、监听端口 启动服务
    24. //启动服务器.lisen(端口号，（启动成功职之后的回调函数）) 端口号是80可以省略
    25. app.listen(8000,()=>{
    26.     console.log('8000启动成功')
    27. })

    前端部分 

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 		<title>Ajax发送POST请求title>
    8. 		<style>
    9. 			#result {
    10. 				width: 200px;
    11. 				height: 100px;
    12. 				border: solid 1px #568;
    13. 			}
    14. 		style>
    15. 	head>
    16. 	<body>
    17. 		<div id="result"> div>
    18. 		<script>
    19. 			//获取元素对象
    20.  
    21. 			const result = document.getElementById('result');
    22. 			//绑定事件
    23. 			result.addEventListener('mouseover', function() {
    24. 				//四步骤
    25. 				//1、创建对象
    26. 				const xhr=new XMLHttpRequest();
    27. 				//2、初始化 
    28. 				xhr.open('POST','http://127.0.0.1:8000/server')
    29. 				//3、发送
    30. 				xhr.send();
    31. 				//4、事件绑定  处理服务端返回的结果
    32. 				xhr.onreadystatechange=function(){
    33. 					//两部判断
    34. 					if(xhr.readyState===4){
    35. 						if(xhr.status>=200&&xhr.status<300){
    36. 							result.innerHTML=xhr.response
    37. 						}
    38. 					}
    39. 					
    40. 				}
    41. 			})
    42. 		script>
    43. 	body>
    44. html>

    请求报文

    响应报文 

     

  • 相关阅读:
    “一斗穷，二斗富”是什么意思，中科院发现关于指纹的基因奥秘
    2023年Java应该怎么学？零基础能自学成功吗？
    linux出现oom分析流程
    C#：Winform界面中英文切换功能
    Scala面向对象部分演示（IDEA开发）
    Properties类
    【Redis速通】基础知识2 - 常用数据结构
    余弦距离介绍
    【C++】string的使用
    java毕业论文设计（中俄跨境贸易供需服务平台）
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/128085955