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 ...
随机推荐
- mysql自动生成时间
字段类型: DATETIME 默认值: CURRENT_TIMESTAMP
- Jmeter、Postman之RSA加密登录接口测试
方法1:直接用在线加密工具进行加密,得到密码 参考地址 https://www.toolscat.com/decode/rsa 输入公钥和密码,直接加密即可 方法2:postman工具 步骤1:接 ...
- Android studio Internet跳转活动
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...
- Navicat15激活
1.下载Navicat for MySQL 15 https://www.navicat.com.cn/download/navicat-for-mysql 2.下载激活工具 注意:因某些限制,下载链 ...
- Linux /proc 目录
/proc 目录 /proc 文件目录是一个伪文件,它只存在于系统内存中,而不占用外存空间.它以文件系统的方式为用户提供访问内核数据的操作接口.目录下主要包含进程和状态的信息. /proc 下文件含义 ...
- 12.14linux学习第十七天
今天老刘收了下第13章尾巴,讲了第14章和第15章. 13.6 分离解析技术 现在,喜欢看我们这本<Linux就该这么学>的海外读者越来越多,如果继续把本书配套的网站服务器(https:/ ...
- shell typeset 命令使用修改大小写
typeset的-u选项可以将一个变量的字符变成大写 1 /home/lee#typeset -u var=abc 2 /home/lee#echo $var 3 ABC -l选项将一个变量的字符变成 ...
- 树莓派 wiringPi的BCM与BOARD编码
一.基础命令使用wiringPi库 1.1.获取管教信息 gpio readall ---获取管脚信息 1.2.BOARD编码和BCM一般都在python库中使用 import RPi.GPIO ...
- circos plot in R
FIN=read.table(IN,header=TRUE) circos.clear() circos.par("start.degree" = 90) circos.initi ...
- 前端基础复习之HTML
1.web基础知识 1 1.Web基础知识 2 1.Internet 3 1.简介 4 Internet 实际上就是由计算机所组成的网络结构 5 6 服务: 7 1.Telnet 8 远程登录 9 2 ...