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. 顺利通过EMC实验（13）

  2. 《css揭秘》读书笔记

    第一章 引言 css编码技巧 在引言中,作者提到使用em与inherit来实现css代码的简洁与可维护性.但是根据本司机两年的开发经验来看,在实际开发中很少来使用em这个单位.如何用以及何时去使用,还 ...

  3. 检查浏览器支持Webp

    什么是Webp? Webp 是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这 ...

  4. SQL之总结（四）---null问题的处理

    概述:如果表中的某个列是可选的,那么我们可以在不向该列添加值的情况下插入新记录或更新已有的记录.这意味着该字段将以 NULL 值保存. NULL 值的处理方式与其他值不同. NULL 用作未知的或不适 ...

  5. iview table表中使用render函数props传值出现问题

    使用iview中的table表格时避免不了使用render函数渲染自定义内容,或者渲染组件.但是在正常使用时出现了props传值无法识别, 按照官网介绍使用props如下: render: (h, p ...

  6. python-正整数的因子展开式

    [题目描述]编写程序,输出一个给定正整数x(x>1)的质因子展开式. [输入格式]请在一行中输入整数x的值. [输出格式]对每一组输入的x,按以下格式输出x的质因子展开式(假如x的质因子分别为a ...

  7. python爬虫---爬取王者荣耀全部皮肤图片

    代码: import requests json_headers = { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win ...

  8. Java/C++实现命令模式---多次撤销和撤回

    某系统需要提供一个命令集合(注:可以使用链表,栈等集合对象实现),用于存储一系列命令对象,并通过该命令集合实现多次undo()和redo()操作,可以使用加法运算来模拟实现.\ 类图: Java代码: ...

  9. java中单态模式或单例模式(Singleton)有什么意义?

    8.单态模式或单例模式(Singleton) 单态模式有什么用呢?想一下Adobe Photoshop ,处理两张图,会启动两个photoshop吗?多耗费内存呀! ( Consider Adobe ...

  10. BootstrapBlazor-ValidateForm 表单验证组件

    原文链接:https://www.cnblogs.com/ysmc/p/16082279.html 故名思意,这个组件的作用我就不再多说了,配合 AutoGenerateColumnAttribute ...