客户端代码：

<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. python投票一致性指数（IVC）实现代码

    毕业论文中用于计算联合国会员国间在联合国大会上的投票一致性(IVC) import pandas as pd import sqlite3 import networkx as nx import t ...

  2. PLC入门笔记5

    定时器指令及其应用 定时器指令介绍 设备启动预热时间.化学反应时间.电机星三角转换时间? 我们需要定时器.PLC计时器指令由时间续电器演变而来. 定时器本质是一个输出指令. 主要功能是,当输入端有能流 ...

  3. Linux_GItlab

    Gitlab实战 Gitlab安装 Gitlab简单使用 配置Jenkins 向 Gitlab 拉取代码 配置gitlab 触发器 Gitlab安装 环境需求: 一台干净的新机器(防止端口冲突) 配置 ...

  4. Java mysql查询数据库重复数据(单个或多个字段)

    查询表重复数据: SELECT * FROM 表1 f WHERE (f.字段1,f.字段2) in (SELECT 字段1,字段2 FROM 表1 GROUP BY 字段1,字段2 HAVING c ...

  5. Charles4.5.1抓取HTTPS请求

    Charles下载以后发现 抓取http请求是成功的: 抓取https请求是失败的: 按照失败提示设置即可: 1.点击 Help -> SSL Proxying -> install ch ...

  6. golang RWMutex RLock重入导致死锁

    现象 一个组件实现了raft分布式协议,在分布式部署环境中来进行选主,在某客户现场突然发生文件句柄泄露,在打印某些错误日志后,几个小时内没有日志打印,然后某个协程突然报无可用的文件句柄. 分析 经过代 ...

  7. 精通Spring 4.x 企业应用开发实战 文档链接总结

    Spring在线文档 http://docs.spring.io/spring/docs/current/spring-framework-reference/htmlsingle

  8. npm proxy问题

    检查你的电脑是否需要配置代理,如果不需要可以将代理禁用: npm config set proxy false 如果是需要配置代理服务的: 开启代理 npm config set proxy true ...

  9. C# 图片 等 文件 读取操作 的一点提示

    源于:在读取图片时,总喜欢首先采用:Image img=Image.FromFile("");操作,这种方式由于 调用图片的程序与图片文件是通过 绝对地址关联的,会造成 当前进程或 ...

  10. windows环境下本地项目（或gitlab上拉取项目）在Jenkins上自动打包部署 超超超详细！！！！！

    一.环境准备 1.下载jdk,官网:http://www.oracle.com/ 2.下载Jenkins,官网:https://www.jenkins.io/ 3.下载Tomcat,官网:http:/ ...