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. c++中的左值和右值的理解

    1.左值和右值的概念 C++中左值(lvalue)和右值(rvalue)是比较基础的概念,虽然平常几乎用不到,但C++11之后变得十分重要,它是理解 move/forward 等新语义的基础. 左值与 ...

  2. 网络协议之:socket协议详解之Datagram Socket

    目录 简介 什么是Datagram Socket 使用socat来创建UDP服务 使用ss命令来监控Datagram Sockets 使用nc建立和UDP Socket的连接 总结 简介 上一篇文章我 ...

  3. 【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）

    原本自己也想画大白,正巧看到一位同学(github:https://github.com/shiyiwang)也用相同的方法画了. 且细节相当到位.所以我就fork了一下,在此我也分享一下.同时,我也 ...

  4. C#编写程序，找一找一个二维数组中的鞍点

    编写程序,找一找一个二维数组中的鞍点(即该位置上的元素值在行中最大,在该列上最小.有可能数组没有鞍点).要求: 1.二维数组的大小.数组元素的值在运行时输入: 2.程序有友好的提示信息. 代码: us ...

  5. Android普通工具类获取Context

    在普通工具类中定义一个构造方法,类成员context,用于接收传过来的context 在activity中定义: 将context传过去. 在工具类中也可以使用SharePreferences,get ...

  6. Idea中配置Tomcat以及运行maven项目

    maven安装和详细配置 提示:下面是Tomcat9.0版本的下载链接,需要其他版本的去官方网站下载. 链接:https://pan.baidu.com/s/1CONf8KVXM4gyJj4pxjFB ...

  7. jsp中c:forEach使用

    首先需要在jsp中引入<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> ...

  8. Codeforces Round #721 (Div. 2)A. And Then There Were K(位运算,二进制) B1. Palindrome Game (easy version)(博弈论)

    半个月没看cf 手生了很多(手动大哭) Problem - A - Codeforces 题意 给定数字n, 求出最大数字k, 使得  n & (n−1) & (n−2) & ...

  9. 使用vscode编辑markdown文件（可粘贴截图）

    使用markdown粘贴截图时,操作步骤比较多: 1)截取图片: 2)将图片存在特定位置: 3)记住图片路径,在markdown文件中编写代码: 4)预览效果: 而word之类的文档编辑器,只需要截图 ...

  10. 面渣逆袭：Spring三十五问，四万字+五十图详解

    大家好,我是老三啊,面渣逆袭 继续,这节我们来搞定另一个面试必问知识点--Spring. 有人说,"Java程序员都是Spring程序员",老三不太赞成这个观点,但是这也可以看出S ...