当我们向将后端的数据渲染到页面时，我们就需要去后端请求数据，利用局部刷新技术将我们获取的数据渲染到页面上；这里就要利用AJAX技术。
建立端口，传送数据
我们传入前端的数据是JSON数据所以要将其转成字符串。
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+"/src"
http.createServer(router).listen(8080)
module.exports=router;
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>
</head>
<body>
<button onclick="fn()">点击显示数据</button>
<script>
function fn() {
//AJAX请求
//1.创建ajax对象
var xhr = new XMLHttpRequest() || new ActiveXObject("microsoft.XMLHTTP")
//2.配置连接信息
xhr.open("GET", "/home", true)
//3.发送网络请求
xhr.send()
//4.等待
// while(xhr.readyState!=4){
// }
//xhr.readyState!=4当readyState=4时才是后端发回的数据，所以要等待
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
change(xhr.responseText)
// console.log(xhr.responseText)
}
}
function change(str) {
//将收到的JSON数据转化成为对象
var obj=JSON.parse(str)
console.log(obj)
//利用for循环取出对象里面的数据，动态的添加标签将数据渲染到页面上
for(let i=0;i<obj.data.length;i++){
console.log(obj.data[i],11111)
var box = document.createElement("div")
box.className = box
document.body.appendChild(box)
box.innerHTML=`${obj.data[i].name}---${obj.data[i].age}`
}
}
}
</script>
</body>
</html>
我们会发现如果是一份数据那么代码就不会太多，但是如果有很多份网页呢，那麽我们就需要写很多次相同的网络请求。代码简化，将AJAX请求封装成一个函数，使用时直接调用函数，传入想要获取数据的网址和接受数据的函数。
回调函数
tool("/login",cb)
tool函数一般是执行任务的函数 当这个任务执行完毕时调用传入的cb函数 然后开始运行cb的代码 在这种设计中 cb函数就是我们说的回调函数
回调函数来设计一个网络请求工具
tool("/login",cb)
tool函数就是一个简单的封装了ajax请求的工具 在tool内部 去用ajax请求传入的第一个参数"/login"对应网址 当请求返回数据时 就把数据传给cb函数使用(调用cb)
function tool(url, cb) {
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) {
// console.log(xhr.responseText)
//写页面
cb(xhr.responseText)
}
}
}
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
