客户端代码：

<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. jquery 判断字符串长度

    function titleLength(str) { var strLength = 0; var list = str.split(""); for (var i = 0; i ...

  2. 面向对象1（Java）

    什么是面向对象 面向对象编程(oop) 面向对象编程的本质是:以类的方式组织代码,以对象的组织(封装)数据 抽象 三大特征:封装.继承.多态 从认识论角度考虑是先有对象后有类.对象是具体的事物.类是抽 ...

  3. Merge Overlapping Intervals

    refer to: https://www.algoexpert.io/questions/Merge%20Overlapping%20Intervals Problem Statement Samp ...

  4. 为什么你需要升级 pip

    更新软件版本可以修复bug,增加新功能和提升性能.例如,NumPy 1.20 添加了类型注释,并在可能的情况下通过使用SIMD来提高性能.如果您要安装NumPy,则可能要安装最新版本. 相反,如果您使 ...

  5. python——pkl文件

    pkl文件是python里面保存文件的一种格式,如果直接打开会显示一堆序列化的东西. cPickle在python3中更名为pickle 使用方式如下: import pickle as p shop ...

  6. CATIA的后处理

    同其他的cam软件一样,catia可以使用配置好的后处理文件输出相应的G代码文件, 也可以输出相应的刀位文件. 下图中的1选择的是后处理文件:下图2种设置的是输出刀位文件的格式. 输出G代码: 选择[ ...

  7. 在winodws server r2上安装AD域

    一.创建第一个域 服务器管理-管理--添加角色和功能 其他都是默认值,下一步 二.重启后,已域账号登录 三.检查AD域有没有安装成功 1.查看计算机名 更改计算机名 2.检查是否含有以下,AD管理中心 ...

  8. HBase启动HMaster闪退

    1.问题描述 (1)HBase启动 [Hadoop@master conf]$ start-hbase.sh SLF4J: Class path contains multiple SLF4J bin ...

  9. This class is not trusted to be serialized as ObjectMessage payload.ActiveMQ序列化设置

    引子 ObjectMessage引入的生产者和消费者之间的类路径耦合,ActiveMQ支持他们作为JMS规范的一部分. ObjectMessage对象依赖marshal/unmarshal进行java ...

  10. sqlserver 生成随机值

    随机生成100以内的整数 select top 10 number,ceiling(rand(checksum(newid()))*100) from master.dbo.spt_valueswhe ...