Ajax案例：点击按钮向服务端发送请求，将服务端返回的响应体结果在div中显示(get请求)
客户端代码：
<style>
#div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
</style>
<body>
<button id="btn">点击发送请求</button>
<div id="div"></div>
<script>
let btn = document.querySelector('#btn');
let div = document.querySelector('#div')
btn.onclick = function () {
//1.创建对象
let xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
//在url后面加上？之后可以设置参数，多的参数用&连接
//3.发送
xhr.send(); //当为post时，参数在此设置
//4.事件绑定 处理服务器端返回的结果
//on when 当...时候
//readystate 是xhr对象的属性，表示状态0 1 2 3 4
//change 改变
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果 行 头 空行 体
//status 状态码、statusText 状态字符串、getAllResponseHeaders 所有响应头、response 响应体
div.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
服务端代码（js文件）：
//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
app.get('/server', (request, response) => { //当请求为post时，需要改成app.post
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
//设置响应体
response.send('Hello Ajax')
})
//4.监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动，8000端口监听中...');
})
在终端中node Ajax请求.js（js代码）
运行html页面，点击按钮之后显示结果
当设置POST请求时，我们只需在服务端代码（js文件）中新增一条post路由规则即可
Ajax案例：点击按钮向服务端发送请求，将服务端返回的响应体结果在div中显示(get请求)的更多相关文章
- Android开发案例 点击按钮出现 简易的消息提示框
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。
1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- SignalR Self Host+MVC等多端消息推送服务(3)
一.概述 最近项目确实太忙,而且身体也有点不舒服,慢性咽炎犯了,昨晚睡觉时喘不过气来,一直没休息好,也没什么时间写博客,今天朋友问我什么时候能出web端的消息发送的文章时,我还在忙着改项目的事,趁着中 ...
- 数往知来 ASP.NET 模拟服务器:服务端_静态页面_动态页面的响应<十七>
一.客户端是怎么看到我们的网页的呢/ 在浏览器端,如果用汉语请求的是一普通的HTML网页,呢么我们的IIS服务器, 接收到请求以后,那么从IIS服务器所在的电脑区查找该HTML网页, 找到以后将该 ...
- http客户端请求及服务端详解
http客户端请求及服务端详解 引言 HTTP 是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和 扩展. ...
- 关于emoji表情，支持在app端发送web端显示，web端发送给app端显示，web与wap端互相显示。
要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...
- Query通过Ajax向PHP服务端发送请求并返回JSON数据
Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
SON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教 ...
- Ajax来实现下拉框省市区三级联动效果（服务端基于express）
//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...
- 移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法
H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验.最后通过度娘,找到解决方法: 就是给点击的元素添加一个CSS属性或者全局添加一个css. -webkit-t ...
随机推荐
- github秒变vscode
方法一:github.sth -> github1s.sth 方法二:github保持登录状态,然后是英文输入法,点击'.'就行
- 4组-Beta冲刺-3/5
一.基本情况 队名:摸鲨鱼小队 组长博客:https://www.cnblogs.com/smallgrape/p/15600609.html github链接:https://github.com/ ...
- CSS设置边距
1.内边距 所有的 HTML 元素基本都是以矩形为基础. 每个 HTML 元素周围的矩形空间由三个重要的属性来控制: padding(内边距) margin(外边距) border(边框 ...
- 如何卸载cdr x8？怎么把cdr x8彻底卸载删除干净重新安装的方法【转载】
标题:如何卸载cdr x8?怎么把cdr x8彻底卸载删除干净重新安装的方法.cdr x8显示已安装或者报错出现提示安装未完成某些产品无法安装的问题,怎么完全彻底删除清理干净cdr x8各种残留注册表 ...
- Navicat15激活
1.下载Navicat for MySQL 15 https://www.navicat.com.cn/download/navicat-for-mysql 2.下载激活工具 注意:因某些限制,下载链 ...
- 如何修改被编译后DLL文件 (转发)
我们平时在工作中经常会遇到一些已经被编译后的DLL,而且更加麻烦是没有源代码可以进行修改,只能针对这个DLL的文件进行修改才能得到我们想要的结果:本文将通过一个实例来演示如果完成一个简单的修改;我们将 ...
- 小梅哥课程学习——LED花式玩法（从计数器器到线性序列机）——实验六
//每隔10ms,让led灯的一个8状态循环执行一次(每个变化时间值小一点,方便测试比如设置为10us) 源代码 module counter_led_6( clk, reset_n, ...
- 20181224《网络攻防技术》Exp 8 Web综合
20181224<网络攻防技术>Exp 8 Web综合 目录 20181224<网络攻防技术>Exp 8 Web综合 相关知识点总结 web前端 web后端 数据库编程 实验内 ...
- excel制作表格
我们这个表格举例: 1. 序号列自动生成序号.选中数字"1"所在的单元格,将鼠标停留在图片中标红的区域向下拖动即可 ...
- Flutter安装SDK及配置
一.下载SDK 1.官网下载 https://docs.flutter.dev/development/tools/sdk/releases?tab=macos 2.git下载 git clone h ...