【ajax】发送请求 —— 结合【express】框架 { }
1、先用 express 框架搭建一个简单的服务器
（1）在文件夹上点击右键，点击“在集成终端中打开”
（2）使用“npm i express”命令安装【express】
如果无法安装，使用 “npm init” 命令初始化一下 npm
（3）创建 “server.js”
// 1、引入express框架
const express = require('express');
// 2、创建应用对象
const app = express();
// 3、创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server',(request,response) => {
// 设置响应头 // 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('Hello AJAX GET by Fireming');
});
// 4、监听端口启动服务
app.listen(8000,() => {
console.log("服务已经启动~");
})
使用 “node server.js” 在服务端运行js文件
使用 “Ctrl + c” 停止运行
- 为了解决之后因修改server.js中的代码而需要【经常】重新启动服务的问题，使用 “npm i nodemon” 安装【nodemon】插件来重启服务
- 使用 “nodemon server.js” 来启动服务
- 当你修改 server.js 的代码之后，就会出现以下这样的提示
（4）创建 “GET.html”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result {
width: 150px;
height: 50px;
border: 1px solid rgb(0, 133, 44);
}
</style>
</head>
<body>
<button>点击发送请求</button>
<!-- 把服务端返回的响应体结果呈现在div中 -->
<div id="result"></div>
<script>
let result = document.getElementById('result');
// 获取点击按钮
let btn = document.getElementsByTagName('button')[0];
// 绑定事件
btn.onclick = function(){
// 1、创建对象
const xhr = new XMLHttpRequest();
// 2、初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
// 3、发送
xhr.send();
// 4、事件绑定 处理服务端返回的结果
// readystate 是xhr对象中的属性，
// 表示状态 0（未初始化） 1（open调用完毕） 2（send调用完毕） 3（服务端返回部分结果） 4（返回所有结果）
xhr.onreadystatechange = function(){
// 判断（服务端返回了所有结果）
if(xhr.readyState === 4){
// 判断响应状态码（200 404 403 401 500）
// 2 开头的都表示成功
if(xhr.status >= 200 && xhr.status < 300){
// 处理结果 行 头 空行 体
// 1、响应行
/* console.log(xhr.status); // 状态码
console.log(xhr.statusText); // 状态字符串
console.log(xhr.getAllResponseHeaders); // 所有的响应头
console.log(xhr.response); // 响应体 */
result.innerHTML = xhr.responseText;
}else{
}
}
}
}
</script>
</body>
</html>
按下按钮
【ajax】发送请求 —— 结合【express】框架 { }的更多相关文章
- ajax发送请求跨域 - uri java代理
问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...
- Ajax发送请求等待时弹出模态框等待提示
主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...
- Ajax - 发送请求原理
1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替): 主要是用于前后台的交互(表单提交已经被废弃): 使用场景:前台获取数据.表单 ...
- ajax对象。同步与异步及ajax发送请求
ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了 ...
- Django——Ajax发送请求验证用户名是否被注册
场景: 用户注册的时候,输入用户名之后,Ajax发送请求到后端,后端验证该用户名是否已经被注册,然后返回到注册页面提示用户. 1.模型: from django.db import models cl ...
- ajax发送请求
首先创建XMLHttpRequest对象,利用此对象发送请求 主页面 <!doctype html> <html lang="en"> <head&g ...
- 原生Ajax发送请求
ajax get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...
- angularjs --- ngResource 类似于 ajax发送请求。
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- Ajax发送请求的四个步骤
1.创建XMLHttpRequest let xhr=new XMLHttpRequest; 2.连接服务器 xhr.open("get","goods.json&quo ...
- flask ajax发送请求返回400
在flaskWTF使用csrf保护后,一般提交form表单都需要一个隐藏的csrf 这样可以成功提交,但是使用ajax提交时就不能成功提交,会返回400错误,服务器无法理解请求,这样就需要新的方法解决 ...
随机推荐
- 基于Svelte3.x桌面端UI组件库Svelte UI
Svelte-UI,一套基于svelte.js开发的桌面pc端ui组件库 最近一直忙于写svelte-ui,一套svelte3开发的桌面端ui组件库.在设计及功能上借鉴了element-ui组件库.所 ...
- p_b_p_b 杂题选讲
[ARC119F] AtCoder Express 3 [ARC117F] Gateau 考虑二分答案,对前缀和建差分约束 \(\text{check}\) ,但是用 \(\text{spfa}\) ...
- k8s之有状态服务部署基石（基础知识）
PV&PVC&HeadlessService 4.1.什么是无状态/有状态服务? 无状态服务: 1.没有实时的数据需要存储 (即使有,也是静态数据) 2.服务集群网络中,拿掉一个服务后 ...
- 数据结构-查找-二叉排序查找（平衡二叉树，B树，B+树概念）
0.为什么需要二叉排序树 1)数组存储方式: 优点:通过下标访问元素,速度快,对于有序数组,可以通过二分查找提高检索效率: 缺点:如果检索具体某个值,或者插入值(按一定顺序)会整体移动,效率较低: 2 ...
- while循环&&连接的两个条件
做题的时候出现这种情况,把while中用&&连接的两个条件交换一下就会报错. 原因是 while 中是先检查第一个条件,如果第一个就为false就不看下一个了.如果第一个是true再检 ...
- 使用Java客户端发送消息和消费的应用
体验链接:https://developer.aliyun.com/adc/scenario/fb1b72ee956a4068a95228066c3a40d6 实验简介 本教程将Demo演示使用jav ...
- Redis_
Redis学习 Redis学习(一) 1. NoSQL的引言 NoSQL(Not Only SQL ),意即不仅仅是SQL, 泛指非关系型的数据库.Nosql这个技术门类,早期就有人提出,发展至200 ...
- 基于 Hexo 从零开始搭建个人博客（五）
阅读本篇前,请先阅读前几篇文章: 基于 Hexo 从零开始搭建个人博客(一) 基于 Hexo 从零开始搭建个人博客(二) 基于 Hexo 从零开始搭建个人博客(三) 基于 Hexo 从零开始搭建个人博 ...
- 4G巴歇尔槽流量采集网关
首先向大家展示下拓扑图: 金鸽科技R10物联网网关,带有一个RS485口可以采集巴歇尔槽的液位状态,还提供一个网口用于给摄像头和现场其他的网络设备提供网络传输通道!R10A内置了巴歇尔槽液位换算成流量 ...
- C#里如何简单的校验时间格式
前言: 晚上打算睡觉的时候,群里反馈订单接收失败,开工排查问题,日志显示验签失败,发现一个蛮有意思的BUG,总算有了一个写作的素材 场景描述 本次的场景属于比较常见的收单API,对第三方的订单进行签名 ...