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. HTML5 meta标签的用法

    声明文档使用的字符编码:<meta charset="utf-8" />声明文档的兼容模式:<meta http-equiv="X-UA-Compati ...

  2. 通过CSS给图像设置圆角边框

    <html> <style> .smaller-image{ border-radius: 50%; width: 100px; } </style> <bo ...

  3. hashlib加密模块、logging日志模块

    hashlib模块 加密:将明文数据通过一系列算法变成密文数据 目的: 就是为了数据的安全 基本使用 基本使用 import hashlib # 1.先确定算法类型(md5普遍使用) md5 = ha ...

  4. C. Sum of Cubes

    原题链接 https://codeforces.com/problemset/problem/1490/C 题目 题意 如果一个数 n = x3 + y3 (x, y可以相等, 且> 0) 输出 ...

  5. AWS-Basic-S3

    Amazon Simple Storage Service,简称 S3 服务,是 AWS 2006 年推出的第一个服务,用于提供对象存储服务.其在可拓展性,数据可用性,安全性和性能都有着非常不错的体验 ...

  6. python相关知识理解

    Python3 基础了解 编码  Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串   # -*- coding: cp-1252 -*- 标识符 · 第一个字符 ...

  7. 读完学会shell语法,shell脚本80%已经学会

    第3章 shell语法讲解 3.1 shell运算讲解 3.1.1 运算符的讲解 3.1.2 shell运算方式的讲解 3.1.2.1 $(())运算 [root@m01 test_init] # a ...

  8. Python小游戏——猜数字

    1 print("--------------我爱鱼-----------") 2 temp = input("不妨猜一下甲鱼现在心里想的是哪个数字:") 3 ...

  9. Java并发编程之Lock(同步锁、死锁)

    这篇文章是接着我上一篇文章来的. 上一篇文章 同步锁 为什么需要同步锁? 首先,我们来看看这张图. 这是一个程序,多个对象进行抢票. package MovieDemo; public class T ...

  10. XCTF练习题---MISC---Training-Stegano-1

    XCTF练习题---MISC---Training-Stegano-1 flag:steganoI 解题步骤: 1.观察题目,下载附件 2.打开下载的图片文件,发现就是一个点,修改文件扩展名,还是说查 ...