【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错误,服务器无法理解请求,这样就需要新的方法解决 ...
随机推荐
- Pyinstaller打包pikepdf失败的问题排查
问题 最近在项目里用到了pikepdf这个库,用于实现pdf水印插入的一个小功能,源码调试阶段运行一切OK但是在出包时报了如下异常. Traceback (most recent call last) ...
- Tapdata肖贝贝：实时数据引擎系列(三) - 流处理引擎对比
摘要:本文将选取市面上一些流计算框架包括 Flink .Spark .Hazelcast,从场景需求出发,在核心功能.资源与性能.用户体验.框架完整性.维护性等方面展开分析和测评,剖析实时数据框架 ...
- 【python】下载中国大学MOOC的视频
[python]下载中国大学MOOC的视频 脚本目标: 输入课程id和cookie下载整个课程的视频文件,方便复习时候看 网站的反爬机制分析: 分析数据包的目的:找到获取m3u8文件的路径 1. 从第 ...
- 如何优雅的升级 Flink Job？
Flink 作为有状态计算的流批一体分布式计算引擎,会在运行过程中保存很多的「状态」数据,并依赖这些数据完成任务的 Failover 以及任务的重启恢复. 那么,请思考一个问题:如果程序升级迭代调整了 ...
- dense_rank()和rank() 窗口函数 mysql
dense_rank()的语法 DENSE_RANK() OVER ( PARTITION BY <expression>[{,<expression>...}] ORDER ...
- 以十字链表为存储结构实现矩阵相加（严5.27）--------西工大noj
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> typedef int ElemT ...
- 丽泽普及2022交流赛day21 社论
A 暴力 . greater<double> -> greater<int> \(100\) -> \(50\) 代码丢了 . B dp . 考场上代码抢救一下就过 ...
- 如何有效地开发 Jmix 扩展组件
扩展组件的概念在使用 Jmix 框架开发中扮演着非常重要的角色.我们将在本文探索什么是扩展组件以及 Jmix Studio 在扩展组件开发和应用程序模块化方面能给开发者带来什么帮助. Jmix 中的扩 ...
- Python3.7+Django2.0.4配合Mongodb打造高性能高扩展标签云存储方案
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_141 书接上回,之前有一篇文章提到了标签云系统的构建:Python3.7+jieba(结巴分词)配合Wordcloud2.js来构 ...
- Mqtt开发笔记：windows下C++ ActiveMQ客户端介绍、编译和使用
前话 项目需求,需要使用到mqtt协议,之前编译QtMqtt库,不支持队列模式queue(点对点),只支持订阅/发布者模式.,所以使用C++ ActiveMQ实现. MQTT协议 简介 M ...