【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错误,服务器无法理解请求,这样就需要新的方法解决 ...
随机推荐
- C++库的随机数生成
C++库为我们提供了很多生成随机数的方法. 使用C的随机数生成法 先学过C语言,或者仅仅用C++做算法的人.对rand()是非常熟悉了.这个函数没有参数,生成0到RAND_MAX的随机数(RAND_M ...
- 不花钱~Python制作视频解析免费追剧神器
同学们在闲暇之余是否喜欢看电影或者电视剧呢? 今天带领大家使用python制作能免费追剧的桌面软件.还在等什么?发车了! 效果我就不再这里演示了https://jq.qq.com/?_wv=1027& ...
- TCP和UDP协议的区别以及原理
参考文章https://blog.csdn.net/weixin_38483133/article/details/123864253
- CentOS yum命令404
1.获得新的repo列表文件 http://mirrors.163.com/.help/centos.html 2.备份 mv /etc/yum.repos.d/CentOS-Base.repo Ce ...
- 最强人工智能 OpenAI 极简教程
大家好哇,新同学都叫我张北海,老同学都叫我老胡,其实是一个人,只是我特别喜欢章北海这个<三体>中的人物,张是错别字. 上个月安利了一波:机器学习自动补全代(hán)码(shù)神器,然后就 ...
- logback-spring 集成 ELK、kafka的配置
pom.xml <dependency> <groupId>com.github.danielwegener</groupId> <artifactId> ...
- day09 集合排序_Collection接口与Collections工具类
集合的排序 java.util.Collections类 Collections是集合的工具类,里面定义了很多静态方法用于操作集合. Collections.sort(List list)方法 可以对 ...
- EFCore高级Saas系统下一个DbContext如何支持多数据库迁移
EFCore高级玩法单DbContext支持多数据库迁移 前言 随着系统的不断开发和迭代默认的efcore功能十分强大,但是随着Saas系统的引进efcore基于表字段的多租户模式已经非常完美了,但是 ...
- SpringBoot中Tomcat和SpringMVC整合源码分析
概述 SpringBoot中集成官方的第三方组件是通过在POM文件中添加组件的starter的Maven依赖来完成的.添加相关的Maven依赖之后,会引入具体的jar包,在SpringBoot启动 ...
- SQLServer从入门基础
1.数据库管理工具 工具创建数据库 1>登录数据库管理工具[Microsoft SQL Server Management Studio] 2>右键[新建数据库] 3>数据数据库名称 ...