ajax及请求方式get、post的区别

tangyu520leihua

已于 2023-02-11 14:23:04 修改

阅读量605

点赞数

文章标签： ajax javascript 前端

于 2022-10-20 19:59:30 首次发布

本文链接：https://blog.csdn.net/tangyu520lehua/article/details/127423577

版权

js语言特性

js在发明之初，它的目的是做一些网页上面的小效果（小广告），最初使用的时候觉得有点鸡肋
被设计成单线程，一次只能做一件使用

只要前面的代码执行完毕了，后面的代码才能执行
特别消耗浏览器性能，假如前面一行代码执行了10s，后面的代码需要等待10s后才执行

为了解决单线程的问题，所以js里面提出了异步编程思想
异步可以和同步代码并存，而且彼此之间没有多大影响
异步程序代码执行时不会阻塞其他程序代码执行，从而提升整体执行效率。
同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务
异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。
编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。

创建ajax

xml指的是前后端使用的数据格式，功能和json是一样的
http上网的协议，超文本传输协议，发送请求的时候绕不过http协议
request表示请求
注意点：
- ajax不一个新的技术，而是几个技术的结合体

 <button>发送请求</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = function(){
            /*
            创建ajax
            + xml指的是前后端使用的数据格式，功能和json是一样的
            + http上网的协议，超文本传输协议，发送请求的时候绕不过http协议
            + request表示请求
            + 注意点：
              => ajax不一个新的技术，而是几个技术的结合体
            */
            let xhr = new XMLHttpRequest()
            // console.log(xhr.readyState)
            /*
                填写请求信息
                + 参数1表示请求方式
                => get
                => post
                + 参数2表示请求地址
                => 后端地址
                => api（称之为接口）
                + 参数3表示同步或者异步
                => 默认就是异步
                => true异步
                => false同步
                + 注意点：
                => 咱们在实际的开发中后端会给咱们请求地址
                => 在工作有一个开发文档，需要的东西都在这个文档里面
            */
            xhr.open('get', 'http://localhost:8888/test/second')
            // console.log(xhr.readyState)
            /*
                监听请求的状态
                + onreadystatechange 监听请求状态的事件
                + responseText就是后端给咱们前端返回数据

                xhrObj.readyState - 返回当前请求的状态
                xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()
                xhr.readyState = 1时-初始化,对象建立未调用send()
                xhr.readyState = 2时-发送数据,send()方法调用,但是当前的状态及http头未知,请求未完成
                xhr.readyState = 3时-数据传输中,接受部分数据
                xhr.readyState = 4时-响应内容解析完成
            */
            xhr.onreadystatechange = ()=>{
                // console.log(xhr.readyState)
                // 注意点1：判断readyState==4表示只有数据解析完成，才去接受完整的数据，如果不判断有可能接收的数据是不完整的
                if(xhr.readyState == 4){
                    // 注意点2：判断status==200表示只要状态码是200，是成功的情况再去接收数据，如果由于其他的原因请求无法成功就不接收数据
                    if(xhr.status == 200){
                        console.log(xhr.responseText)
                    }else{
                        console.log('请求失败')
                    }
                }
            }
            // 发送请求
            xhr.send()
            // console.log(xhr.readyState)
        }
    
    </script>

ajax ——get的请求方式

<button>request</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = function(){
            // 创建ajax对象
            let xhr = new XMLHttpRequest()
            // 请求信息
            // get请求方式，给服务器传递参数的时候，要求在open()第二个参数哪里进行查询字符串拼接
            xhr.open('get', 'http://localhost:8888/test/second?name=张三&age=18')
            // 监听请求状态
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        // 注意点：后端给咱们返回的数据是json格式，咱们要使用需要用JSON.parse()进行数据解析
                        console.log(JSON.parse(xhr.responseText))
                        console.log(xhr.responseText)
                    }
                }
            }
            // 发送请求
            xhr.send()
        }
    </script>

ajax ——post的请求方式

y>
    <button>request</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = function(){
            // 创建ajax对象
            let xhr = new XMLHttpRequest()
            // 请求信息
            xhr.open('post', 'http://localhost:8888/test/fourth')
            // 请求头信息设置
            // 注意点：post请求方式要求设置请求头，这个设置内容比较长，你们最好复制
            // application/x-www-form-urlencoded表示数据以表单形式去解析，例如：咱们传递参数的时候
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            // 监听请求状态
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        // 注意点：后端给咱们返回的数据是json格式，咱们要使用需要用JSON.parse()进行数据解析
                        console.log(xhr.responseText)
                        console.log(JSON.parse(xhr.responseText))
                    }
                }
            }
            // 发送请求
            // post请求方式传递参数要求咱们把数据写在send()方法
            xhr.send('name=张三&age=18')
        }
    </script>