客户端代码：

<style>

    #div {

        width: 200px;

        height: 100px;

        border: 2px solid blue;

    }

</style>

<body>

    <button id="btn">点击发送请求</button>

    <div id="div"></div>

    <script>

        let btn = document.querySelector('#btn');

        let div = document.querySelector('#div')

        btn.onclick = function () {

            //1.创建对象

            let xhr = new XMLHttpRequest();

            //2.初始化 设置请求方法和url

            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');

            //在url后面加上？之后可以设置参数，多的参数用&连接

            //3.发送

            xhr.send();		//当为post时，参数在此设置

            //4.事件绑定 处理服务器端返回的结果

            //on when 当...时候

            //readystate 是xhr对象的属性，表示状态0 1 2 3 4

            //change 改变

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4) {

                    //判断响应状态码 200 404 403 401 500

                    if (xhr.status >= 200 && xhr.status < 300) {

                        //处理结果 行 头 空行 体

        //status 状态码、statusText 状态字符串、getAllResponseHeaders 所有响应头、response 响应体

                        div.innerHTML = xhr.response;

                    }

                }

            }

        }

    </script>

</body>

服务端代码（js文件）：

//1.引入express

const express = require('express');

//2.创建应用对象

const app = express();

//3.创建路由规则

app.get('/server', (request, response) => {	//当请求为post时，需要改成app.post

    //设置响应头 设置允许跨域

    response.setHeader('Access-Control-Allow-Origin', '*')

    //设置响应体

    response.send('Hello Ajax')

})

//4.监听端口启动服务

app.listen(8000, () => {

    console.log('服务已经启动，8000端口监听中...');

})

在终端中node Ajax请求.js（js代码）

运行html页面，点击按钮之后显示结果



当设置POST请求时，我们只需在服务端代码（js文件）中新增一条post路由规则即可

Ajax案例：点击按钮向服务端发送请求，将服务端返回的响应体结果在div中显示(get请求)的更多相关文章

  1. Android开发案例 点击按钮出现 简易的消息提示框

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  2. Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。

    1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   ...

  3. SignalR Self Host+MVC等多端消息推送服务(3)

    一.概述 最近项目确实太忙,而且身体也有点不舒服,慢性咽炎犯了,昨晚睡觉时喘不过气来,一直没休息好,也没什么时间写博客,今天朋友问我什么时候能出web端的消息发送的文章时,我还在忙着改项目的事,趁着中 ...

  4. 数往知来 ASP.NET 模拟服务器:服务端_静态页面_动态页面的响应<十七>

      一.客户端是怎么看到我们的网页的呢/ 在浏览器端,如果用汉语请求的是一普通的HTML网页,呢么我们的IIS服务器, 接收到请求以后,那么从IIS服务器所在的电脑区查找该HTML网页, 找到以后将该 ...

  5. http客户端请求及服务端详解

    http客户端请求及服务端详解 引言 HTTP 是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和 扩展. ...

  6. 关于emoji表情，支持在app端发送web端显示，web端发送给app端显示，web与wap端互相显示。

    要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...

  7. Query通过Ajax向PHP服务端发送请求并返回JSON数据

    Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...

  8. jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    SON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教 ...

  9. Ajax来实现下拉框省市区三级联动效果（服务端基于express）

    //服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...

  10. 移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法

    H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验.最后通过度娘,找到解决方法: 就是给点击的元素添加一个CSS属性或者全局添加一个css. -webkit-t ...

随机推荐

  1. 在Scorpio 1.0（天蝎座）中使用C# System.Diagnostics.Process打开chrome遇到的问题

    1 //在天蝎座 中使用C# System.Diagnostics.Process打开chrome遇到的问题 2 DiagProcess = import_type("System.Diag ...

  2. mac下eclipse关联svn插件

    由于新冠状病毒的疫情这一周都需要在家办公了,家里只有一个mac之前只是娱乐工具,今天不得不用它撸代码,无奈重新安装各种环境,mac和windows的环境安装区别还是很大的,今天差点折磨死我,尤其是在e ...

  3. nohup 命令 追加输入日志或者覆盖输出日志

    nohup python3 -u botxiaohui.py >> botruninfo.log 2 >&1 & >>  是追加的输出 >    单 ...

  4. Python 使用json存储数据

    一.前言 很多程序都要求用户输入某种信息,如让用户存储游戏首选项或提供要可视化的数据.不管专注的是什么,程序都把用户提供的信息存储在列表和字典等数据结构中.用户关闭程序时,你几乎总是要保存他们提供的信 ...

  5. PVE联网及更换国内源

    一.PVE联网 第一次安装PVE,正常情况下PVE的IP是在我们上网的网段的.没有网络有可能是没有配置DNS服务器地址或DNS地址是软路由网关地址.解决方法有3种: 1:设置DHCP自动获取网络地址和 ...

  6. C# NAudio 检测声音

    using NAudio.Wave;using System;using System.Collections.Generic; namespace WinFromBaidu{ class NAudi ...

  7. 十大经典排序之计数排序（C++实现）

    计数排序 核心思想:计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中. 作为一种线性时间复杂度的排序,计数排序要求输入的数据必须是有确定范围的整数. 思路: 找出待排序的数组中最大和 ...

  8. linux 学习之xargs

    xargs 可以将筛选结果作为执行条件 如 ls *.go | xargs rm -rf 删除当前目前所有后缀为go的文件 指定单行列数 cat test.txt | xargs -n2

  9. 位运算与MOD快速幂详细知识点

    最近写的一些题目设计到了数论的取模 如下题 链接:https://ac.nowcoder.com/acm/contest/3003/G来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制: ...

  10. MMDetection中模型的Checkpoints下载

    mmdetection中的模型checkpoints是需要自己手动下载的,下载步骤如下: 打开mmdetection, 进入configs目录,可以看到这里面有很多以目标检测模型命名的文件夹,选择你想 ...