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】框架 { }的更多相关文章

  1. ajax发送请求跨域 - uri java代理

    问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...

  2. Ajax发送请求等待时弹出模态框等待提示

    主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...

  3. Ajax - 发送请求原理

    1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替): 主要是用于前后台的交互(表单提交已经被废弃): 使用场景:前台获取数据.表单 ...

  4. ajax对象。同步与异步及ajax发送请求

    ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了 ...

  5. Django——Ajax发送请求验证用户名是否被注册

    场景: 用户注册的时候,输入用户名之后,Ajax发送请求到后端,后端验证该用户名是否已经被注册,然后返回到注册页面提示用户. 1.模型: from django.db import models cl ...

  6. ajax发送请求

    首先创建XMLHttpRequest对象,利用此对象发送请求 主页面 <!doctype html> <html lang="en"> <head&g ...

  7. 原生Ajax发送请求

    ajax  get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...

  8. angularjs --- ngResource 类似于 ajax发送请求。

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  9. Ajax发送请求的四个步骤

    1.创建XMLHttpRequest let xhr=new XMLHttpRequest; 2.连接服务器 xhr.open("get","goods.json&quo ...

  10. flask ajax发送请求返回400

    在flaskWTF使用csrf保护后,一般提交form表单都需要一个隐藏的csrf 这样可以成功提交,但是使用ajax提交时就不能成功提交,会返回400错误,服务器无法理解请求,这样就需要新的方法解决 ...

随机推荐

  1. django--ORM表的多对一关系

    多对一关系是什么 Django使用django.db.models.ForeignKey定义多对一关系. ForeignKey需要一个位置参数:与该模型关联的类  class Info(models. ...

  2. c# 怎样能写个sql的解析器

    c# 怎样能写个sql的解析器 本示例主要是讲明sql解析的原理,真实的源代码下查看 sql解析器源代码 详细示例DEMO 请查看demo代码 前言 阅读本文需要有一定正则表达式基础 正则表达式基础教 ...

  3. Mybatis-Plus介绍

    Mybatis-Plus介绍 Mybatis-Plus概念 Mybatis-Plus介绍 官网https://mybatis-plus/或https://mp.baomidou.com/ mybati ...

  4. Tapdata 实时数据融合平台解决方案（四）：技术选型

    作者介绍:TJ,唐建法,Tapdata 钛铂数据CTO,MongoDB中文社区主席,原MongoDB大中华区首席架构师,极客时间MongoDB视频课程讲师. 常见搭建数据中台的技术产品 数据中台包括: ...

  5. IO多路复用epoll

    0 why: 问题来源 0.1 网络编程流程 //创建socket int s = socket(AF_INET, SOCK_STREAM, 0); //绑定IP地址和端口号port bind(s, ...

  6. 下载Chrome离线安装包

    https://www.google.com/chrome/thankyou.html?standalone=1&platform=mac&installdataindex=defau ...

  7. 业务可视化-让你的流程图"Run"起来(3.分支选择&跨语言分布式运行节点)

    前言 首先,感谢大家对上一篇文章[业务可视化-让你的流程图"Run"起来(2.问题与改进)]的支持. 分享一下近期我对这个项目的一些改进. 1. 增加了分支选择工程,可以根据节点的 ...

  8. git和提交分支

    实习到今天,已经开始做项目一段时间了,当然只是实习生的个人项目. 项目是导师发在git上面的,要求我们用git的PR提交 可是我不会啊...git仅仅是简单的个人提交总的项目到仓库里,什么新建分支,p ...

  9. 浅谈 Lucas 定理

    Lucas 定理是用来求 \(C^n_m\bmod p\) 的. 定理 \[C^n_m\equiv C^{n\bmod p}_{m\bmod p}\cdot C^{\lfloor n/p\rfloor ...

  10. JavaWeb--基本概念、Web服务器与Tomcat

    前言 Java Web 其实就是一个技术的总和,把Web看成一个容器而已主要使用JavaEE技术来实现.在加上各种中间件. 整个javaWeb阶段的内容通过实际的案例贯穿学习, 所涉及到的技术知识点会 ...