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. 3_Phase Portrait_相图_相轨迹

  2. Creating a File Mapping Object

    创建一个文件映射对象 映射一个文件的第一步是通过调用CreateFile函数来打开一个文件.为了确保其他的进程不能对文件已经被映射的那一部分进行写操作,你应该以唯一访问(exclusive acces ...

  3. 创建TypeScript代码模板(NVS+Yarn+ESLint+Prettier+Husky)

    创建TypeScript代码模板(NVS+Yarn+ESLint+Prettier+Husky) Cui, Richard Chikun 本文笔者将带你在Github代码仓库创建TypeScript代 ...

  4. JS练习实例--编写经典小游戏俄罗斯方块

    最近在学习JavaScript,想编一些实例练练手,之前编了个贪吃蛇,但是实现时没有注意使用面向对象的思想,实现起来也比较简单所以就不总结了,今天就总结下俄罗斯方块小游戏的思路和实现吧(需要下载代码也 ...

  5. mysql实现in子句的limit查询 (转)

    在supesite里面执行一个SQL语句: select * from supe_spaceitems where catid=98 and itemid not in(select itemid f ...

  6. python-转换函数使用

    输入一个整数和进制,转换成十进制输出 输入格式: 在一行输入整数和进制 输出格式: 在一行十进制输出结果 输入样例: 在这里给出一组输入.例如: 45,8 输出样例: 在这里给出相应的输出.例如: 3 ...

  7. 142. 环形链表 II

    做题思路 or 感想 : 1,这一题用快慢指针来判断是否有环,快慢指针同一起点,速度不同,如果有环,则必定会相遇 2,第二个有意思的点就是数论环节来弄出环入口了,真的太精妙了,但因为我表述能力不好,这 ...

  8. Shiro-登陆流程认证-图解

  9. linux修改中文字符集

    //修改系统配置 cd /etc/profile //末尾加如下代码 export LC_ALL="zh_CN.GBK"export LANG="zh_CN.GBK&qu ...

  10. SwitchHosts管理编辑hosts工具

    管理Hosts工具 SwitchHosts 地址: SwitchHosts 开发工程中,针对不同项目设置不同的域名. 办法很多,例如直接编辑hosts文件,通过环境工具提供的功能设置等. 现在要安利一 ...