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 ...
随机推荐
- WSGI网站部署以及requests请求的一些随想.
一直想项目,没怎么写过后端服务,但很多时候,有些服务又是公用的,平时一般都用redis来当做通信的中间件,但这个标准的通用型与扩展信太差了. 与一些群友交流,建议还是起http服务比较好,自己也偏向与 ...
- SAP ABAP 验证与替代
1.校验与替代的作用 校验(Validation):在凭证保存前根据设置条件判断此凭证是否有效,其中可以按抬头.行项目或完全凭证来判断,然后再根据Validation设置的消息类型决定凭证是否允许保存 ...
- 【JSON】Python读取JSON文件报错json.decoder.JSONDecodeError的问题
报错 json.decoder.JSONDecodeError: Expecting property name enclosed in double quotes: line * column * ...
- python更新pip报错pip._vendor.urllib3.exceptions.ProxySchemeUnknown: Not supported proxy scheme None
更新pip报错: 看到最后一行很明显是proxy的问题,查看cmd下的代理 将代理删掉重启cmd执行命令就不会报错了
- Centos7下搭建部署DoClever接口管理平台
项目地址: github:https://github.com/sx1989827/DOClever 码云:https://gitee.com/sx1989827/SBDoc 1.根据官方文档,先安装 ...
- renren-fast-vue人人开源前端项目搭建保姆级教程
1.从gitee上clone项目 git clone https://gitee.com/renrenio/renren-fast-vue.git 2.准备好python环境 需要有Python2以上 ...
- python Queue（队列学习）
Python 的Queue模块中提供了同步的.线程安全的队列类,包括FIFO(先入先出)队列Queue,LIFO(后入先出)队列LifoQueue,和优先级队列PriorityQueue.这些队列都实 ...
- ABP vNext微服务架构详细教程——镜像推送
1. Jenkins搭建 为实现容器化部署,我们需要将代码打包成镜像并推送至容器仓库,我们可以选择自建容器仓库或者使用公有云服务商提供的镜像仓库.这里我们使用阿里云提供的免费镜像仓库. 代码打包和镜像 ...
- 003Java的诞生
003Java的诞生 1.计算机语言发展史 (1)第一代语言 机器语言 我们都知道计算机的基本计算方式都是基于二进制的方式. 二进制:010111001010110010110100 这种代码是直接输 ...
- VBA中的集合
Sub testSet() Dim c As New Collection c.Add ("A") c.Add (2) c.Add ("A") For i = ...