原生 Ajax 初步了解前端

最新推荐文章于 2024-08-08 10:15:42 发布

HGT_ive

最新推荐文章于 2024-08-08 10:15:42 发布

阅读量125

点赞数

分类专栏：前端JavaScript 文章标签：前端 ajax

本文链接：https://blog.csdn.net/HGT_ive/article/details/124042807

版权

前端JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我们首先了解一些什么是 Ajax

Ajax 用来允许浏览器和服务器通信而无需刷新页面的技术

传统的模型是客户端像服务器发送请求服务器返回整个页面如此的反复，在Ajax模型中，数据在客户端与服务器之间独立传输，服务器不在返回整个页面

XMLHttpRequirest一般是最好的创建Ajax的最佳选择

Ajax 是几种技术各尽其职以一种全新的方式聚合在一起

接下来我们就来开始创作

创建我的第一个 AJAX 文件

首先我们来打开 vscode 来创建一个 demo01.js文件

window.onload = function(){ 
    document.getElementsByTagName("a")[0].onclick = function() { 
    //获取到 a 标签元素 我们后面会看到 并且给他添加一个 onclick 函数
        var request = new XMLHttpRequest()
        // 为 XMLHttpRequest 创建一个实例化对象
        //准备发送请求
        var url = this.href
        var method = "GET"

        //调用opne 方法
        request.open(method,url)

        //调用 send 方法
        request.send(null)

        //为 XMLHttprequest 添加 onreadystatachange 函数
        request.onreadystatechange = function()
        {
            if(request.readyState == 4)  
            {
                if(request.status == 200 || request.status == 304)
                {// 状态码为 200 或者 304 时
                    alert(request.responseText) //弹出这个text内容
                }
            }
        }
        
        return false
    }
}

然后再在用一个目录下创建一个 index.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>Document</title>
    <script src= "demo01.js"></script>
</head>
<body>
    <a href="helloajax.txt">hello ajax</a>
</body>
</html>

这里的 href 指向的地方是我们将要创建的一个TXT文本文档

Hello Ajax！！！

最后我们建议将以下的函数进行打包因为会经常的用到

function getHTTPObject() {
    var xhr = false
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    }
    else if(window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP")
    }
    return xhr
}

这样open in browse 就可以看到以下的效果