客户端代码：

<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. cobbler安装CentOS-8系统

    cobbler安装CentOS-8系统 cobbler 1. cobbler简介 2. cobbler服务端部署 3. 客户端安装 4. 定制安装 1. cobbler简介 Cobbler是一个Lin ...

  2. Shell 更多结构化命令（流程控制）

    更多的结构化命令 上一章里,你看到了如何通过检查命令的输出和变量的值来改变 shell 脚本程序的流程.本章会继续介绍能够控制 shell 脚本流程的结构化命令.你会了解如何重复一些过程和命令,也就是 ...

  3. vue富文本（5版本）组件

    <template> <div> <div style="border: 1px solid #ccc; width: 500px"> < ...

  4. POJ3723 Conscription 题解

    start: 2021-08-04 16:56:50 题目链接: http://poj.org/problem?id=3723 题目内容: Description Windy has a countr ...

  5. OSIDP-并发：死锁和饥饿-06

    死锁原理 死锁:一组相互竞争系统资源或者进行通信的进程间"永久"阻塞的现象. 资源分为两类:可重用资源和可消耗资源. 可重用资源:一次只能被一个进程使用且不会被耗尽的资源.如处理器 ...

  6. Training time_SSM

    三阶段 MyBatis 1 三层架构介绍 2 MyBatis介绍 类库:对于现有技术的一个封装. 框架:对于一个问题的一整套解决方案. MyBatis是一个半自动的ORM持久层的框架.刚开始叫做iBa ...

  7. JMeter参数化（一）--CSV参数化

    一.CSV Data Set Config 1.添加配置元件-CSV Data Set Config 其中,分隔符不能是参数化的值中的符号,否则会被截断. 2.调用 3.循环读取文件中数据 假设数据内 ...

  8. Linux配置NTP时间同步

    1.检查系统是否安装了NTP包(linux系统一般自带NTP4.2)没有安装我们直接使用yum命令在线安装:yum install ntp2.NTP服务端配置文件编辑vim /etc/ntp.conf ...

  9. kafka 学习

    https://kafka.apache.org/quickstart C:\W_O_R_K\kafka_2.12-2.2.0\kafka_2.12-2.2.0\bin\windows\zookeep ...

  10. C Ⅸ

    数组例子:统计个数  #include <stdio.h> ​ int main(void) {     int x;     int count[10];     int i;      ...