回调函数封装原生AJAX

M78_国产007

已于 2022-08-02 18:13:13 修改

阅读量340

点赞数

CC 4.0 BY-SA版权

分类专栏： node.js 文章标签： ajax 前端 javascript

于 2022-08-02 18:03:42 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59345890/article/details/126120096

node.js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个仅需三个参数的工具函数，用于配置AJAX请求（URL、请求方式和回调），并通过实例演示了如何配合服务器API和前端页面进行数据交互。同时提到了jQuery库的AJAX用法，尽管jQuery不再主流，但其API提供了便捷的API支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们封装的工具函数只需要配置三个形参就可以完全实现功能，第一个参数url请求网址，第二个参数以post还是get方式请求，第三个是我们的业务函数（回调函数），业务函数运行完将数据传入回调函数运行。

封装代码：

function tool(url,method,callback){
    var xhr=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")
    xhr.open(method,url)
    xhr.send()

    //监听
    xhr.onreadystatechange=function(){
        if(this.readyState==4&&this.status==200){
            callback(xhr.responseText)
        }
    }
}

写一个项目测试一下：

这次我们手巧创建一下服务器回顾一下基础，

创建服务器并设置AJAX请求得接口数据：（这里记得下载第三方模块mime）

var http=require("http")
var fs=require("fs")
var mime=require("mime")

var app=http.createServer((req,res)=>{
    // console.log(__dirname+req.url);
    fs.readFile(__dirname+req.url,(err,data)=>{
        
        if(!err){
            
            res.setHeader("content-Type",mime.getType(req.url))
            res.end(data)
        }else if(req.url=="/ajax"){
            res.setHeader("content-Type",mime.getType(req.url))
            res.end('{"name":"zs","age":45}')
        }else{
            res.end("404")
        }
    })
   
})
app.listen(8081)

创建前端页面，导入我们提前封装好的AJAX。

<!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>
</head>
<body>
    <button onclick="fn()">点击获取</button>

    <script type="module">
        import tool from "./fezhuangAJAX.js"
        var btn=document.querySelector("button")
          btn.onclick=function(){
            tool("GET","/ajax",function(str){
            var obj=JSON.parse(str)
            console.log(obj);
        })
        }
       
    </script>
    <!-- <script src="./fezhuangAJAX.js"></script> -->
   
</body>
</html>

运行一下index.html页面获取数据。