【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错误,服务器无法理解请求,这样就需要新的方法解决 ...
随机推荐
- 在Ubuntu系统下，可执行文件的表现形式
在Windows系统下的可执行文件都带有.exe的后缀,而对于Linux系统下的可执行文件,则不会带有后缀,如下图 对于.txt文件,Ubuntu下也有相应的记事本程序打开,对于.xml,ubuntu ...
- 好用到爆！GitHub 星标 32.5k+的命令行软件管理神器，功能真心强大！
前言(废话) 本来打算在公司偷偷摸摸给星球的用户写一篇编程喵整合 MongoDB 的文章,结果在通过 brew 安装 MongoDB 的时候竟然报错了.原因很简单,公司这台 Mac 上的 homebr ...
- 全网求解，用Python处理一个基础题目
昨天在群里看见一个Python的问题,趁着今天有那么一点点时间,就想把这个题目分享出来,让大家一起解决.毕竟三个臭皮匠,赛过诸葛亮.原始数据如下: 1 origin_lst = [0, 0, 1, 2 ...
- HDFS数据平衡
一.datanode之间的数据平衡 1.1.介绍 Hadoop 分布式文件系统(Hadoop Distributed FilSystem),简称 HDFS,被设计成适合运行在通用硬件上的分布式文件 ...
- 史上最全学习率调整策略lr_scheduler
学习率是深度学习训练中至关重要的参数,很多时候一个合适的学习率才能发挥出模型的较大潜力.所以学习率调整策略同样至关重要,这篇博客介绍一下Pytorch中常见的学习率调整方法. import torch ...
- Effective Java 3 读后感
Effective Java 3 读后感 最近学习了一下Effectvie Java,这是一本非常适合有一定经验的Java后端人员阅读的书.书中总结许多编码经验对开发很有帮助,比如其中总结的对于流和L ...
- MLX90640 红外热成像仪测温模块简要介绍说明
MLX90640 红外热成像仪测温模块简要介绍说明 (1) A 型和 B 型的区别 区别主要有以下几点 视场角不同: A 型为 110*75° , B 型为 55*35° ,通俗一点讲就是 A 型是广 ...
- Wpf 多指应用开发解析
1 首先分析多指事件与单指事件,以及执行顺序 2 事件阻断 订阅多指事件后,在TouchDown时 采用e.handle = true,阻断多指事件,或在ManipulationStarting. ...
- HTML表单学习
HTML表单学习 前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...
- vue的一些问题
如有不正,请指正! 目录 1.组件化 2.注册组件 a.创建组件构造器 b.注册组件: c.使用组件 3.组件不能访问vue实例上的数据 4.全局组件与局部组件 5.v-model语法糖 组件通信 6 ...