AJAX原理

8个月前 (09-30) 600次浏览 已收录 0个评论

请求的一生(readyState)

  • const request=new XMLHttpRequest() ->  0(0是readyState状态码)
  • request.open()    -> 1
  • request.send()     ->2
  • 当第一个信息出现在浏览器中->3(开始下载了)
  • 下载完全部信息->4

AJAX加载CSS/JS/XML…

  • 创建XMLHttpRequest对象
  • 调用对象的open方法
  • 监听对象的onload(成功)和onerror(失败)事件(不推荐)
  • 监听对象的onreadystatechange事件(推荐)
  • 发送请求
由于本篇文章涉及服务端,所以暂时没有案例展示

mian.js

仔细阅读getCSS的代码,内含AJAX的生命周期,并且json、xml的读取方法与html、css、js不一样
getCSS.onclick=()=>{
    // 创建一个请求HttpRequest对象
    const request=new XMLHttpRequest()
    // 调用对象的open方法
    request.open('GET','/style.css'); //readyState=1
    request.onreadystatechange=()=>{
        console.log(request.readyState)
        // 全部下载完成后readyState=4
        if(request.readyState===4){
             //虽然下载完成,但是有可能是404下载完成了(失败4xx 5xx),
              //而不是css下载完了(2xx),这也是onload没有的功能
            console.log("说明下载完成了")
            //状态码正常
            if(request.status >= 200 && request.status<300){
                //创建style标签
                const style = document.createElement("style");
                //填写style内容
                style.innerHTML=request.response;
                //插到头里面
                document.head.appendChild(style)
            }else{
                alert("加载css失败");
            }
        }
    };
    // 发送请求
    request.send()  //readyState=2
    //下载第一个字节信息后,readyState=3
};
getXML.onclick=()=>{
    // 创建一个请求HttpRequest对象
    const request=new XMLHttpRequest()
    // 调用对象的open方法
    request.open('GET','/4.xml'); //readyState=1
    request.onreadystatechange=()=>{
        console.log(request.readyState)
        // 全部下载完成后readyState=4
        if(request.readyState===4){
             //虽然下载完成,但是有可能是404下载完成了(失败4xx 5xx),而不是css下载完了(2xx),这也是onload没有的功能
            console.log("说明下载完成了")
            //状态码正常
            if(request.status >= 200 && request.status<300){
                const dom=request.responseXML
                const text=dom.getElementsByTagName('warning')[0].textContent
                console.log(text);
            }else{
                alert("加载xml失败");
            }
        }
    };
    // 发送请求
    request.send()  //readyState=2
    //下载第一个字节信息后,readyState=3
};
getJSON.onclick=()=>{
    // 创建一个请求HttpRequest对象
    const request=new XMLHttpRequest()
    // 调用对象的open方法
    request.open('GET','/5.json'); //readyState=1
    request.onreadystatechange=()=>{
        console.log(request.readyState)
        // 全部下载完成后readyState=4
        if(request.readyState===4){
             //虽然下载完成,但是有可能是404下载完成了(失败4xx 5xx),而不是css下载完了(2xx),这也是onload没有的功能
            console.log("说明下载完成了")
            //状态码正常
            if(request.status >= 200 && request.status<300){
                const object=JSON.parse(request.response)
                console.log(object)
                myname.textContent=object.name
            }else{
                alert("加载json失败");
            }
        }
    };
    // 发送请求
    request.send()  //readyState=2
    //下载第一个字节信息后,readyState=3
};

写入server.js

//创建路由
if(path === '/index.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(fs.readFileSync('public/index.html'))
    response.end()
  } else if(path === '/mian.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(fs.readFileSync('public/mian.js'))
    response.end()
} else if(path==='/style.css'){
      response.statusCode = 200
      response.setHeader('Content-Type', 'text/css;charset=utf-8')
      response.write(fs.readFileSync('public/style.css'))
      response.end()
  }else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`你输入的路径不存在对应的内容`)
    response.end()
  }

静态服务器

response.statusCode = 200
    //默认首页
    const filepath=path==='/' ? 'index.html' : path
    const index=filepath.lastIndexOf('.')
    const houzhui=filepath.substring(index)
    const fileTypes={
      '.html':'text/html',
      '.css':'text/css',
      '.js':'text/javascript',
      '.png':'image/png'
    }
    response.setHeader('Content-Type', 
    ${fileTypes[houzhui] || 'text/html'}charset=utf-8’)
    let content
    try {
      content= fs.readFileSync('public/'+filepath)
    } catch (error) {
      content='文件不存在'
      response.statusCode=404
    }
    response.write(content)
    response.end()

终端执行node-dev server.js 8888


axios

与jquery不同,axios是专注于数据请求的库,并不能操作dom等。

get请求

<!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>axios基本使用</title>
</head>
<body>
    <script src='./axios.js'></script>
    <script>
        // //调用axios方法得到的返回值是promise对象
        // const result=axios({
        //     method:'GET',
        //     url:'http://www.liulongbin.top:3006/api/getbooks'
        // })
        
        axios({
            //请求方式
            method:'GET',
            //请求的地址
            url:'http://www.liulongbin.top:3006/api/getbooks',
            //URL中的查询参数,比如get传参,用params
            params:{
                id:1 //获取id为1的图书信息
            },
            //请求体参数,比如post传参,用data
            data:{}
            
        }).then(function(result){
            console.log(result)
        })
    </script>
</body>

</html>
结果演示

post请求

<!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>axios基本使用-post</title>
</head>
<body>
    <button id='btn'>发起post请求</button>
    <script src='./axios.js'></script>
    <script>
        document.querySelector('#btn').addEventListener('click',async function(){
            // axios的返回值是promise对象
            //如果返回值promise实例,则前面可以添加await,然后返回值就是结果了
            // 然后await只能用在被async修饰的方法中
            // 此时result不是真实的数据
            const result= await axios({
                //请求方式
                method:'POST',
                //请求的地址
                url:'http://www.liulongbin.top:3006/api/post',
                //请求体参数,比如post传参,用data
                data:{
                    name:'zzl',
                    age:20
                }
                
            })
            console.log(result)
            console.log(result.data)
        })
    </script>
</body>

</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>使用解构赋值</title>
</head>

<body>
    <button id='btnpost'>发起post请求</button>
    <button id='btnget'>发起get请求</button>
    <script src='./axios.js'></script>
    <script>
        document.querySelector('#btnpost').addEventListener('click', async function () {
            //使用解构赋值拿到6个属性中的data属性
            const {data} = await axios({
                method: 'POST',
                //请求的地址
                url: 'http://www.liulongbin.top:3006/api/post',
                //请求体参数,比如post传参,用data
                data: {
                    name: 'zzl',
                    age: 20
                }
            })
            console.log(data)
        })
        document.querySelector('#btnget').addEventListener('click', async function () {
            //使用解构赋值,从axios封装的大对象(6个属性)中解构出来data属性,并对它进行重命名
            const {data:bieming} = await axios({
                method: 'GET',
                //请求的地址
                url: 'http://www.liulongbin.top:3006/api/getbooks',
                
            })
            console.log(bieming.data)
        })
    </script>
</body>

</html>
结果演示

axios直接发起请求

<!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>axios直接发起请求</title>
</head>
<body>
    <button id="btnget">get</button>
    <button id="btnpost">post</button>
    <script src="./axios.js"></script>
    <script>
        document.querySelector('#btnget').addEventListener('click',async function(){
            // axios.get('url',{
            //     params:{}  //get参数
            // })
            const {data:bieming}=await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
                params:{id:1} //获取id为1的图书信息
            })
            console.log(bieming)
            console.log(bieming.data)
        })
        document.querySelector('#btnpost').addEventListener('click',async function(){
            // axios.post('url',{post请求体数据})
            const {data:bieming}=await axios.post('http://www.liulongbin.top:3006/api/post',{
                name:'zzl',
                gender:'男'
            })
            console.log(bieming)
        })
    </script>
</body>
</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:AJAX原理
喜欢 (3)

您必须 登录 才能发表评论!