【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错误,服务器无法理解请求,这样就需要新的方法解决 ...
随机推荐
- centos 7搭建svn+apache及权限控制
SVN服务器运行模式: 模式1:svn服务器单独运行 监听: 3690端口 访问: svn://IP 模式2: svn 服务器+ apache : 80 端口 访问: http://IP 1. #安装 ...
- ssh-基于ssh的文件传输
scp 基于ssh做Linux主机间的文件传输 scp 文件路径 用户名@被传输的主机名/IP:文件要存放的路径 scp /etc/fstab root@10.0.0.2:/t ...
- Sentinel-流量防卫兵
1.背景 1.1 简介 Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性. Sentinel 具有以下特征 丰富的应用场景:Sentinel 承接了阿里巴 ...
- Metasploit（msf）利用ms17_010（永恒之蓝）出现Encoding::UndefinedConversionError问题
Metasploit利用ms17_010(永恒之蓝) 利用流程 先确保目标靶机和kali处于同一网段,可以互相Ping通 目标靶机防火墙关闭,开启了445端口 输入search ms17_010 搜索 ...
- day07 聊天室-1_集合
聊天室(续) 实现服务端发送消息给客户端 在服务端通过Socket获取输出流,客户端获取输入流,实现服务端将消息发送给客户端. 这里让服务端直接将客户端发送过来的消息再回复给客户端来进行测试. 服务端 ...
- day04 缓冲字符流__异常处理
缓冲字符流 缓冲字符输入流:java.io.BufferedReader 是一个高级的字符流,特点是块读文本数据,并且可以按行读取字符串. package io; import java.io.*; ...
- Solution -「校内题」矩阵求和
Description 共 \(T\) 组数据.对于每组数据,给定 \(a, b, n\),求 \(\sum_{i = 1}^{n} \sum_{j = 1}^{n} \gcd(a^i - b^i, ...
- ETL工具 （二）sqoop 数据同步工具
Sqoop简介 将关系数据库(oracle.mysql.postgresql等)数据与hadoop数据进行转换的工具. 官网: http://sqoop.apache.org/ 版本:(两个版本完全不 ...
- 好串_via牛客网
题目 链接:https://ac.nowcoder.com/acm/contest/28537/C 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言 ...
- Javaweb-文件上传和邮件发送
1.文件上传 新建空项目 准备工作 在maven仓库里下载commons io 和 commons fileupload两个jar包 实用类介绍 文件上传注意事项 为保证服务器安全,上传文件应该放在外 ...