Get.html:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Ajax GET 请求测试</title>

  <style>

    #result {

      width: 200px;

      height: 100px;

      border: solid 1px rgb(15, 12, 15);

    }

  </style>

</head>

<body>

  <button>点击发送请求</button>

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

  <script>

    //获取button元素

    const btn = document.getElementsByTagName('button')[0];

    const result = document.getElementById('result');

    //绑定事件

    btn.onclick = function(){

      // 1. 创建对象

      const xhr = new XMLHttpRequest();

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

      xhr.open('GET', 'http://127.0.0.1:8000/server')

      // 3. 发送

      xhr.send();

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

      xhr.onreadystatechange = function(){

        // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4

        //判断 (服务端返回了所有的结果)

        if(xhr.readyState === 4){

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

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

            // 处理结果 行 头 空行 体

            // 响应

            console.log('状态码', xhr.status); // 状态码

            console.log('状态字符串', xhr.statusText); // 状态字符串

            console.log('所有响应头', xhr.getAllResponseHeaders()); // 所有响应头

            console.log('响应体', xhr.response); // 响应体

            //设置 result 的文本

            result.innerHTML=xhr.response;

          }else{

          }

        }

      }

    }

  </script>

</body>

</html>

server.js

// 1. 引入express

const express = require('express');

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

app.get('/server', (request, response) => {

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

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

  // 设置响应体

  response.send("Ajax测试......");

});

// 4. 监听服务

app.listen(8000, () => {

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

 })

运行截图：

Ajax——Get请求的更多相关文章

  1. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  2. Ajax --- 数据请求

    下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...

  3. spring HandlerInterceptorAdapter拦截ajax异步请求，报错ERR_INCOMPLETE_CHUNKED_ENCODING

    话不多说,直接上正文. 异常信息: Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 问题描述: 该异常是在页面发送ajax请 ...

  4. 解决YII提交POST表单出现400错误，以及ajax post请求时出现400问题

    POST表单400错误: 正确做法: Add this in the head section of your layout: <?= Html::csrfMetaTags() ?> -- ...

  5. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  6. ajax异步请求Response.Redirect重定向

    一个ajax异步请求报错->捕获异常->重定向错误提示页面.  一个简单的流程 结果一直搞不定.重定向无效.各种百度之. 后来突然想起 ajax的请求是不能在后台重定向的. 如果硬要重定向 ...

  7. [整理]Ajax Post请求下的Form Data和Request Payload

    Ajax Post请求下的Form Data和Request Payload 通常情况下,我们通过Post提交表单,以键值对的形式存储在请求体中.此时的reqeuest headers会有Conten ...

  8. 原生JS代码实现一个Ajax异步请求

    异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...

  9. jQuery:多个AJAX/JSON请求对应单个回调并行加载

    因为我们使用jQuery,这意味着需要调用 jQuery.getScript 和 jQuery.getJSON 函数. 我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回, ...

  10. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

随机推荐

  1. APICloud重磅支持Atom编辑器，并建立开发工具核心库

    APICloud技术再次升级,不仅支持Atom编辑器开发工具,并推出核心开发工具库,使开发者进行App开发更便捷高效. APICloud支持Atom编辑器开发工具 APICloud始终坚持多开发工具支 ...

  2. JavaScript の 内容属性（HTML属性attribute）和 DOM 属性（property）

    [博文]内容属性(HTML属性)和 DOM 属性 标签: 博文 JavaScript 粗略解读(与jQuery做对比) 内容属性(HTML属性) : attribute DOM 属性(Element属 ...

  3. ES6-11学习笔记--正则表达式的扩展

    y修饰符 u修饰符   复习以前的修饰符: i(忽略大小写) m(多行匹配) g(全局匹配)   y修饰符:粘连修饰符 const str = 'aaa_aa_a' const reg1 = /a+/ ...

  4. 文件上传——IIS6.0解析漏洞

    介绍 IIS6.0漏洞可分为目录漏洞和文件漏洞 目录漏洞 访问*.asp格式命令的文件夹下的文件,都会被当成asp文件执行 文件漏洞 畸形文件命名 123.asp -> 123.asp;.txt ...

  5. LC-数组-二分查找-704

    二分查找 [left, right] 方式 [left, mid -1] [mid + 1, right] int left = 0, right = nums.length - 1; while ( ...

  6. go socket、http网络编程demo

    1.socket通信 服务端接收数据 package main import ( "fmt" "net" "strings" ) func ...

  7. 记录,element ui的日期选择器只有第一次回显成功

    首先是这个 <el-date-picker v-model="value1" type="daterange" range-separator=" ...

  8. HTML5+JavaScript+MUI 毕业答辩常见问题

    问题1:HTML5前端开发环境有哪些? HTML5网页前端开发,实际也是HTML网页开发,HTML5知识万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改的第五次 ...

  9. Elasticsearch 索引策略

    Elasticsearch 7.6 索引生命周期 es的生命周期就对应了索引的策略,比如我们在使用elk的时候,由于数据量较大,时间比较久远的数据就没有那么有价值了,因此就需要定期的清除这些历史数据, ...

  10. android软件简约记账app开发day04-记账页面条目的代码书写

    android软件简约记账app开发day04-记账页面条目的代码书写 在前三天我们完成了基本的界面展示,从今天开始,我们进入到后台逻辑代码的编写中,今天开发记账条目的代码 我们在主页面点击记一笔图标 ...