页面刷新技术-------AJAX

一、前提步骤（先把静态网页写出来）

1、首先先要配置文件

 2、然后去后端建立服务器，把该下载的模块下载好

var http=require("http")
var fs=require("fs")
var url=require("url")
var querystring=require("querystring")
var mime=require("mime")
var app=http.createServer((req,res)=>{
    let pathname=url.parse(req.url).pathname
    fs.readFile(__dirname+"/src"+pathname ,(err,data)=>{
        if(!err){
            res.setHeader("content-Type",mime.getType(pathname))
            res.end(data)
        }else if(pathname=="/ajax1"){
            res.end('{"name":"karen"}')
        }else{
            res.setHeader("content-Type",text/json)
            res.end("404 没有找到")
        }
    })
})
app.listen(9090)

3、去窗口去输入指令npm run dev

4、然后去浏览器去输入网址

二、ajax

1、为什么会有ajax技术

前端刷新页面是有2种技术

一是，整个页面刷新 跳转到一个新的网页HTML

二是局部刷新（ajax技术）  用js去做网络请求  然后得到的数据 动态的渲染的dom

代码

 <button onclick="fn()">ajax请求数据</button>
    <script>
        function fn(){
            console.log(00)
            //ajaxs技术
            //1、创建ajax对象
            let xhr=new XMLHttpRequest()||new ActiveXObject("Microdoft.XMLHTTP")
            //2、配置连接信息（用get去请求/ajax1 这个页面）
            xhr.open("GET","/ajax1",true)
            // 3、发起网络请求
            xhr.send()
            // 4、等待
          xhr.onreadystatechange=function(){
            console.log( xhr.readyState)
            //4代表请求成功
            if( xhr.readyState==4&&xhr.status==200){
               // console.log(xhr.responseText,11111)//

            }else if(xhr.readyState==4&&xhr.status==404){
                //console.log(xhr.responseText,12121)
   //5.解析数据
     console.log(JSON.parse(xhr.responseText))
     var data=JSON.parse(xhr.responseText)
     //6.使用数据DOM操作局部渲染刷新页面
     div.innerHTML=data.xx.xx
     }

            }
          }
           
        }
    </script>

结果