使用原生的ajax发送get请求

最新推荐文章于 2024-09-19 16:13:24 发布

丁七岁

最新推荐文章于 2024-09-19 16:13:24 发布

阅读量1.9k

点赞数 2

分类专栏： Ajax 文章标签： ajax js

本文链接：https://blog.csdn.net/qq_43612538/article/details/109222941

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文展示了如何使用原生JavaScript实现AJAX进行无刷新GET请求，以提升用户体验。通过创建XMLHttpRequest对象，设置请求方法和URL，监听状态变化来处理服务器返回的数据。同时，提供了一个简单的Node.js服务器端响应示例。虽然AJAX带来更好的交互体验，但可能对SEO不利。

摘要由CSDN通过智能技术生成

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
下面是一个使用原生的ajax发送get请求例子：

在这里插入图片描述
特点就是：页面不需要刷新，异步请求，用户体验好。但是SEO不友好。
完整代码：
html：

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>使用原生的ajax发送get请求</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #result {
                width: 500px;
                height: 130px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <button>点我发送请求</button>
        <div id="result"></div>
        <script type="text/javascript">
            //获取button
            let button = document.getElementsByTagName('button')[0]
            //获取id为result的那个div
            let result = document.getElementById('result')
            //绑定一个点击事件
            //弄不清这些看mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
            button.onclick = function () {
                //创建XMLHttpRequest对象
                const xhr = new XMLHttpRequest()
                //设置请求方法和url
                xhr.open('GET', 'http://127.0.0.1:8888/server?username=ding&password=123456')
                //发送
                xhr.send()
                //处理服务端返回的结果
                /**
                 *XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest  代理当前所处的状态
                 值    状态    描述
                 0    UNSENT    代理被创建，但尚未调用 open() 方法。
                 1    OPENED    open() 方法已经被调用。
                 2    HEADERS_RECEIVED    send() 方法已经被调用，并且头部和状态已经可获得。
                 3    LOADING    下载中； responseText 属性已经包含部分数据。
                 4    DONE    下载操作已完成。
                 */
                xhr.onreadystatechange = function () {
                    //判断服务端 返回的所有的结果
                    if (xhr.readyState === 4) {
                        //状态码 200~300之间都是成功
                        if (xhr.status >= 200 && xhr.status < 300) {
                            //success
                            //处理结果 报文（行 头 空行 体）
                            let status = xhr.status //状态码
                            let statusText = xhr.statusText //状态字符串
                            let arh = xhr.getAllResponseHeaders() //所有响应头
                            let response = xhr.response //响应体
                            //设置id为result的那个div的响应文本
                            result.innerHTML = 'status:' + status + '<br/>statusText:' + statusText +
                                '<br/>AllResponseHeaders:' + arh + '<br/>response:' + response
                        } else {
                            console.log('server error')
                        }
                    }
                }
            }
        </script>
    </body>
</html>

在这里插入图片描述

这里的服务器我用的是node.js

//引入express
const express = require('express')
//端口号
const port = 8888
//创建应用对象
const app = express()

//创建路由规则 路由就是引路人 根据不同的url请求 导航到不同的页面
app.get('/server', (request, response) => {
    //request 是对请求报文的封装
    //response 是对响应报文的封装
    //设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应体
    response.send('Hello Ajax,I am dingqiusi->get')
})
//监听端口 启动服务
app.listen(port, () => {
    console.log(`服务已经启动了，端口号：${port}`)
})

在这里插入图片描述