客户端代码：

<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. Tesstwo9.1.0配置步骤

    一,配置步骤 环境:Tesstwo9.1.0+Android10(华为)+Android11(模拟器) 1.查看tess-two的最新版本(GitHub - rmtheis/tess-two: For ...

  2. Debug --> python中的True False 0 1

    今天看了下python中的一些基础知识,以offer64为例叭! 求 1+2+...+n ,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B ...

  3. uniapp里面设置onlaunch以后在加载页面调接口

    main.js 里面 Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolv ...

  4. input设置自定义属性，并获取值。

    HTML代码: JavaScript代码: 因为busCode不是input标签原生的属性,所以不能使用"点"操作. 非标准属性,要用:obj.getAttribute(" ...

  5. Docker 安装 MySQL5.7

    1.拉取数据库镜像 docker pull mysql:5.7 docker images命令查看镜像是否下载成功 docker images 2.配置mysql 创建mysql目录,用于存放mysq ...

  6. hello cnb

    Huawei executive Meng Wanzhou freed by Canada arrives home in China 目录 关于git merge冲突时候的想法 Git修改commi ...

  7. 2020/5/14-笔记：Oracle数据库新建用户与给用户授权

  8. 2022.07.25 TypeScript基础类型介绍

    基础类型: 字符串(string)(String) let first: string = 'niu' // 直接赋值 let fourth: string = `niu` // 模板字符串 let ...

  9. P2962 [USACO09NOV]Lights G(Meet In The Middle)

    [USACO09NOV]Lights G 题目描述 给出一张n个点n条边的无向图,每个点的初始状态都为0. 你可以操作任意一个点,操作结束后该点以及所有与该点相邻的点的状态都会改变,由0变成1或由1变 ...

  10. 线程Thread小记

    1 public class ConcurentDemo extends Thread { 2 @Override 3 public void run() { 4 super.run(); 5 Sys ...