[JavaScript知识库]用回调函数封装AJAX 和 jquery框架

回调函数封装AJAX

? ? ? ? 设计一个tool工具函数用来封装AJAX请求，tool函数传入两个参数，第一个参数代表对应的网址，第二个参数是一个callback回调函数，当网络请求返回数据时，就把返回的数据传入callback函数。

? ? ? ? tool函数代码：

function tool(url,callback) {
    var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
    xhr.open("GET",url,true)
    xhr.send()
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText)
        }
    }
}

? ? ? ? index.js文件代码：

var router = require("./router.js")

router.get("/goods", function (req,res) {
    var obj = {
        data: [{
                name: "衣服",
                price: 123
            },
            {
                name: "裤子",
                price: 99
            },
            {
                name: "鞋子",
                price: 255
            }
        ]}
    var str = JSON.stringify(obj)
    res.setHeader("content-Type","text/json;charset=utf8")
    res.end(str)

})

? ? ? ? router.js文件代码：

var fs=require("fs")
var url=require("url")
var querysting=require("querystring")
var mime=require("mime")
let urls={}
var http=require("http")

let router=function(req,res){
	//这个函数每次用户访问时运行
	let pathname=url.parse(req.url).pathname
	fs.readFile(router.basepath+pathname,(err,data)=>{
		if(!err){
			res.setHeader("content-Type",mime.getType(pathname))
			res.end(data)
		}else{
			if(!urls[pathname]){res.end("404 not found-mymvc")}
			else{urls[pathname](req,res)}
		}
	})
}
router.static=function(path){
	this.basepath=path
}

router.get=function(url,cb){
	urls[url]=cb
}
router.basepath=__dirname+"/public"
http.createServer(router).listen(8081)
module.exports=router;

? ? ? ? index.html文件代码：

    <script src="./tool.js"></script>

    <button onclick="fn()">点击用ajax请求数据</button>

    <script>

        function fn() {
            tool("/goods",function(str) {
                var obj = JSON.parse(str)
                for(let i=0;i<obj.data.length;i++){
                    console.log(obj.data[i]);
                }
            })
        }

    </script>

结果：

jQuery框架?

? ? ? ? 可以直接使用jQuery 函数库来进行ajax请求：

? ? ? ? （1）首先可以通过http://cdn.bytedance.com/? 这个网址去访问字节跳动静态资源库，然后在搜索框中输入要搜索的包名，如：(jquery），然后找到想要得到的版本的包，并复制资源包的地址

????????然后在index.html文件代码中引入jquery：

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.js"></script>

使用时，可以使用 $.get() 方法：

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.js"></script>

    <button onclick="fn()">点击用ajax请求数据</button>

    <script>

        function fn() {
            $.get("/goods",function(res) {
                var obj = res
                for (let i = 0; i < obj.data.length; i++) {
                    console.log(obj.data[i]);
                }
            })
        }

    </script>

同样使用之前的案例的数据，得到结果：

?