请求的一生(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()

onload&onerror

创建mian.js

getJS.onclick=()=>{
    const request = new XMLHttpRequest()
    request.open("GET","/2.js")
    request.onload=()=>{
        console.log("成功");
        //创建一个script标签
        const script=document.createElement('script');
        //填写script内容
        script.innerHTML=request.response
        //插入内容
        document.body.appendChild(script);
    }
    request.onerror=()=>{
        console.log("失败");
    }
    request.send()
};
getHTML.onclick=()=>{
    const request=new XMLHttpRequest()
    request.open('GET','/3.html')
    request.onload=()=>{
    console.log("成功了");
    //创建一个div标签
    const div=document.createElement('div');
    //填写内容
    div.innerHTML=request.response
    //插入内容
    document.body.appendChild(div)
    }
    request.onerror=()=>{
        console.log("失败了");
    }
    request.send()
}

首页html

<!DOCTYPE html>
<html>

<head>
    <title>ajax</title>
</head>

<body>
    <h1>ajas <span id="myname">点击json我会了解我</span></h1>
    <button id="getCSS">
        请求css
    </button>
    <button id="getJS">
        请求js
    </button>
    <button id="getHTML">
        请求html
    </button>
    <button id="getXML">
        请求xml
    </button>
    <button id="getJSON">
        请求json
    </button>
    <script src="mian.js"></script>
</body>

</html>

终端执行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>

结果演示

AJAX原理

请求的一生(readyState)

AJAX加载CSS/JS/XML…

mian.js

写入server.js

静态服务器

axios

get请求

post请求

使用解构赋值

axios直接发起请求

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

请求的一生(readyState)

AJAX加载CSS/JS/XML…

mian.js

写入server.js

静态服务器

axios

get请求

post请求

使用解构赋值

axios直接发起请求

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

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