AJAX(笔记04) - 原生AJAX - GET请求

Tempo lv.1

发布时间：2022-12-15 16:01:34 392

相关标签： # html# java# 服务器# 服务器# 信息

搭建Web服务环境

之前讲过 Express 快速启动Web服务，这里把代码重写一下；

新建 server.js 服务文件：简短4步创建简单Web服务；

const express = require('express')
const app = express()
app.get('/server',(request,response)=>{
    // 设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应体，内容
    response.send('Hello Ajax')
})
app.listen('8000',()=>{
    console.log('Web服务已经启动，端口8000监听中...');
})

启动服务：需在 server.js 目录执行 node 命令；

> node server.js

AJAX(笔记04) - 原生AJAX - GET请求_GET请求

看到服务已启动字样，代表 Web 服务已经搭建好了；

浏览器访问：localhost:8000/server 或 127.0.0.1:8000/server 查看：

AJAX(笔记04) - 原生AJAX - GET请求_GET请求_02

响应体的返回是正常的，再看下响应头的返回：

AJAX(笔记04) - 原生AJAX - GET请求_GET请求_03

Response Headers 响应头中的 Access-Content-Allow-Origin 为 * ；

创建 Ajax 的GET请求

需求：点击按钮，把服务器响应的内容输出在div里；

新建页面： ajax.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 {
            margin-top: 10px;
            width: 200px;
            height: 100px;
            border: 1px solid #FF847C;
        }
    style>
head>
<body>
    <button>点击按钮获取数据button>
    <div id="result">
        
    div>
body>
html>

预览下效果：

AJAX(笔记04) - 原生AJAX - GET请求_GET请求_04

需求是点击按钮将服务器的响应体显示在 div 中；

在这个文件中写下 AJAX 的GET请求的 JS部分：

// 获取button按钮
const btn = document.getElementsByTagName('button')[0]
// 获取div容器
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 状态，只有4表示返回所有结果
        if (xhr.readyState === 4) {
            // 判断响应码 200，400，500 等；
            // 2XX的响应码都表示成功
            if (xhr.status >= 200 && xhr.status < 300) {
                // 结果包括4个部分：行，头，空行，体
                console.log(xhr.status);       // 响应行状态码
                console.log(xhr.statusText);   // 响应行状态码字符串
                console.log(xhr.getAllResponseHeaders())  // 所有响应头
                console.log(xhr.response);     // 响应体

                // 响应体显示在容器里
                result.innerHTML = xhr.response
            }
        }
    }
}

提示1：每行代码都有注释，不需要语法解释了；

提示2：onreadystatechage 是响应状态改变事件，即当 readystate 改变就触发；

on 是当...的时候
readystate 是 xhr 的属性，表示响应状态有5个值： 0，1，2，3，4
change 改变

readystate：存有XMLHttpRequest的状态从0到4发生变化。

0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

要判断是 readystate === 4 时，表示都就绪了；

提示3：xhr.status 是表示HTTP请求响应的状态码，[200-300) 之间表示状态码为成功；不包括300；

200 服务器响应正常
400 无法找到请求资源
403 没有权限访问
404 访问的资源不存在
500 服务器内部错误

提示4：返回的结果包含的4个部分：响应行、响应头、空行、响应体；

响应行：是形如这样的 “HTTP/1.1 200 OK”

xhr.status ：是状态码，这里是200；

xhr.statusText : 是状态码字符串，这里是 OK；

响应头： xhr.getAllResponseHeaders() ，只会显示一部分响应头；

响应体： xhr.response

提示5：把响应体的内容赋值给 result.innerHTML 渲染到页面上；

控制台结果：

AJAX(笔记04) - 原生AJAX - GET请求_AJAX_05

响应行：状态码和状态码字符串显示正常；

响应头：只显示了内容长度和内容类型；

响应体：就是在Web服务器中设置的响应体内容；

页面效果：没有问题；

AJAX(笔记04) - 原生AJAX - GET请求_AJAX_06

交互信息：

响应行和响应头：

AJAX(笔记04) - 原生AJAX - GET请求_GET请求_07

响应体：

AJAX(笔记04) - 原生AJAX - GET请求_AJAX_08

GET请求传参

一般使用搜索都在URL后加上“?”来传参；

参数的形式写成: ?参数名=参数值&参数名=参数值

AJAX(笔记04) - 原生AJAX - GET请求_AJAX_09

在AJAX里GET请求传递参数也是在URL后追加 ?a=1&b=2&c=3 这种形式；

xhr.open('GET', 'http://127.0.0.1:8000/server?a=1&b=2&c=3')

还以上面GET请求为例，改下这段 xhr.open() ，看下效果：

AJAX(笔记04) - 原生AJAX - GET请求_AJAX_10

文章来源： https://blog.51cto.com/ahuiok/5933182

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。