目录

(一)网页如何请求数据

(二)资源的请求方式

(三)AJAX

1、什么是AJAX:

2、AJAX的应用场景:

3、Ajax请求中常用的三种方法

(四)接口

(五)XMLHttpRequest

1、使用xhr发起get请求(原生ajax)

2、使用xhr发起 post请求

(六)数据交换格式

1、XML

2、JSON

(七)XMLHttpRequest Level2特性

1、可以设置 HTTP 请求的时限

2、可以使用 FormData 对象管理表单数据

3、可以上传文件

4、可以获得数据传输的进度信息

(八)axios

  (1)用axios发起get请求

(2)用axios发起post请求

(3) 直接用axios发起get请求

(4)直接用axios发起post请求


(一)网页如何请求数据

需要通过请求处理响应三个步骤

  1. 客户端请求数据资源
  2. 服务器处理次数请求
  3. 服务器数据响应客户端

(二)资源请求方式

常见请求方式有getpost

get:请求通常 用于获取服务器端资源例如根据URL地址,从服务器获取HTML文件css文件,JS文件图片数据资源

post:请求通常向服务器提交资源;例如登录时向服务器提交登录信息注册时向服务提交注册信息等各种提交操作

(三)AJAX

1、什么是AJAX:

网页利用XMLHttpRequest对象服务器进行数据交互的方式,不刷新整个页面就可以进行数局部更新

2、AJAX的应用场景

用户名检测搜索提示数据分页显示数据增删改查

3、Ajax请求中常用三种方法

(1)$.get(url,[data],[callback]),专门用于发起get请求,从而将服务器的资源请求到客户端进行使用第一个参数是要请求的资源 地址第二个参数为Object类型,为请求资源期间要携带的参数第三参数为请求成功时的回调函数

如何发送get请求

<script src=”lib/jquery.js“&gt;</script&gt;

    <button class=”btn“&gt;不带参数的请求</button&gt;

    <script&gt;

    //$functionjquery的入口函数

    $(function (){

        document.querySelector(‘.btn‘).addEventListener(‘click‘,function(){

            $.get(‘http://www.liulongbin.top:3006/api/getbooks’,{id:1},function(res){

                console.log(res)

            })

        })

     })

(2)$.post()

$.post(url,[data],[callback]),专门用于发起post请求,第一个参数是提交数据的地址第二个参数为Object类型,为要提交的数据;第三个参数为提交成功时的回调函数

如何服务提交数据

 <script src=”lib/jquery.js“&gt;</script>

    <button class=”btn“>提交数据</button>

    <script>

        $(function(){

            document.querySelector(‘.btn‘).addEventListener(‘click‘,function(){

                $.post(‘http://www.liulongbin.top:3006/api/addbook‘,{bookname: ‘水浒传’, author: ‘施耐庵’, publisher: ‘上海图书出版社’ },function(res){

                    console.log(res)

                })

            })

        })

    </script>

由于多次点击提交显示如图,第一次时候显示的是提交的数据

(3)$.ajax()是一个功能比较综合函数,可以对ajax请求做更详细配置

基本语法

 $.ajax({

            type:”,   //请求方式,像get,post

            url:”,    //请求地址

            data:{},   //请求携带的数据

            success:function(res){}   //请求成功后的回调函数

        })

(3.1)用$.ajax()发起GET请求

只需要将type属性设置get即可

<script src=”lib/jquery.js”></script>

    <button class=”btn“>请求数据</button>

    <script>

        $(function(){

                document.querySelector(‘.btn‘).addEventListener(‘click‘,function(){

                        $.ajax({

                        type:’get‘,//请求方式,像get,post

                        url:’http://www.liulongbin.top:3006/api/getbooks‘,//请求地址

                        data:{id:1},//请求携带的数据

                        success:function(res){

                            console.log(res)

                        }//请求成功后的回调函数

                       

                        })

                })

        })

    </script>

(3.2)$.ajax设置post请求,只需要将type改为post即可

 $(function(){

                document.querySelector(‘.btn‘).addEventListener(‘click‘,function(){

                        $.ajax({

                        type:’post’,//请求方式,像get,post

                        url:’http://www.liulongbin.top:3006/api/addbook‘,//请求地址

                        data:{

                            bookname: ‘水浒传’,

                            author: ‘施耐庵’,

                            publisher: ‘上海图书出版社’

                        },//请求携带的数据

                        success:function(res){

                            console.log(res)

                        }//请求成功后的回调函数

                       

                        })

                })

        })

(四)接口

1、接口概念使用Ajax请求数据时,被请求的url地址,就叫做数据接口,同时,每个接口有自己的请求方式。

2、接口测试工具postman

(五)XMLHttpRequest

浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,Ajax函数,就是基于xhr对象封装出来的

1、使用xhr发起get请求(原生ajax

2、使用xhr发起 post请求

(六)数据交换格式

1、XML

XML是可扩展标签语言用来传输存储数据,是数据的载体

<note>

        <to>ls</to>

        <from>zs</from>

        <heading>通知</heading>

<body>晚上开会</body> </note>

(1)XML缺点

2、JSON

JSON就是JavaScript对象和数组字符串表示方法使用文本表示JS对象或数组信息,JSON的本质就是字符串

(1)作用:JSON是一种轻量级文本数据交换格式,专门用于存储传输数据,JSON比XML更小,更快,更易于解析

(2)JSON的两种结构

JSON中有数组和对象两种结构,通过这两种结构相互嵌套,可以实现各种复杂数据结构;JSON中字符串必须用双引号包裹value数据类型可以是数字字符串布尔值、Null、数组,对象。

{    

        “name“: “zs”,  

        “age”: 20,  

        “gender”: “男”,    

        “address“: null,    

        “hobby“: [“吃饭”, “睡觉”, “打豆豆”]

}

(3)JSON语法注意事项

(4)JSON和JS对象的相互转换

(4.1)JSON.parse()

将JSON字符串转换为JS对象

 var obj=JSON.parse(‘{“a”:”hello“,”b“:”world“}’)

       console.log(obj)

(4.2)JSON.stringfy()

将JS对象转换为JSON字符串

 let obj={

        a:’hello‘,

        b:’world

       }

       let str=JSON.stringify(obj)

       console.log(str)

(七)XMLHttpRequest Level2特性

1、可以设置 HTTP 请求的时限

可以设置xhr.timeout属性设置请求时限,当 等待时间超过多久时,会停止发送HTTP请求

 let xhr=new XMLHttpRequest()

        xhr.timeout=30

        xhr.ontimeout=function(){

            console.log(‘请求超时了’)

        }

       

        xhr.open(‘GET’,’http://www.liulongbin.top:3006/api/getbooks‘)

        xhr.send()

        xhr.onreadystatechange=function(){

            if(xhr.readyState===4&amp;&amp;xhr.status===200){

                 console.log(JSON.parse(xhr.responseText))

            }

        }

当请求超过30毫秒

当将请求时限设置为3000毫秒时,未超时打印出请求成功的数据

2、可以使用 FormData 对象管理表单数据

(1)提交表单数据

// 1、创建FormData()实例

        let fd=new FormData()

        //2、调用append函数,向fd追加数据

        fd.append(‘uname‘,’zs’)

        fd.append(‘password‘,’123456’)

       

        let xhr=new XMLHttpRequest()

        xhr.open(‘POST’,’http://www.liulongbin.top:3006/api/formdata‘)

        xhr.send(fd)

        xhr.onreadystatechange=function(){

            if(xhr.readyState===4&amp;&amp;xhr.status===200){

                console.log(JSON.parse(xhr.responseText))

            }

        }

 (2)用于获取网页表单中的值

 <!– //这里要写name属性 –>

    <form id=”form1″>

        <input type=”textname=’uname’ autocomplete=”off“>

        <input type=”password” name=”upwd“>

        <button type=”submit“>提交</button>

    </form>

    <script>      

        let form=document.querySelector(‘#form1′)

        form.addEventListener(‘submit‘,function(e){

            //阻止表单默认行为

            e.preventDefault()

           // 创建FormData()实例,快速获取表单中的数据

           let fd=new FormData(form)

           let xhr=new XMLHttpRequest()

            xhr.open(‘POST’,’http://www.liulongbin.top:3006/api/formdata‘)

            xhr.send(fd)

            xhr.onreadystatechange=function(){

                if(xhr.readyState===4&amp;&amp;xhr.status===200){

                    console.log(JSON.parse(xhr.responseText))

                }

            }

   })

3、可以上传文件

判断是否选择文件,再将文件追加到FormData中,通过ajax提交给服务器,获取数据的信息,将图片显示定位位置

<body>
    <input type="file" id="file1"/>
    <button id="btnUpload">上传文件</button>
    <br>
    <!-- 文件上传成功后显示文件 -->
    <img src="" alt="" id="img"  width="400" >

    <script>
        const btnUpload=document.querySelector('#btnUpload')
        // 为按钮添加 click 事件监听
        btnUpload.addEventListener('click',function(){
           // 3. 获取到选择的文件列表,其获取的结果为数组
           let files=document.querySelector('#file1').files
           if(files.length<=0){
            alert("请选择上传的文件")
           }else{
            // 如果选择了文件则创建FormData实例,向FormData中追加文件
            let fd=new FormData()
            fd.append('avatar',files[0])
            
            let xhr=new XMLHttpRequest()
            xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4&amp;&amp;xhr.status===200){
                    let data=JSON.parse(xhr.responseText)
                    console.log(data)
                    if(data.status===200){
                        document.querySelector('#img').src='http://www.liulongbin.top:3006' + data.url

                    }
                    else{
                        console.log(`图片上传失败${data.message}`)
                    }

                }
            }
           }

        })
    </script>
</body>

4、可以获得数据传输进度信息

用xhr.upload.onprogress事件,获取文件上传的进度,主要属e.lengthComputable,e.loaded,e.total分别为当前资源是否可以计算长度,已传字节,需要传输的总字节

  //在上次上传文件的基础上            
             let xhr=new XMLHttpRequest()

            // 在此处监听上传的进度
            xhr.upload.onprogress=function(e){
                if (e.lengthComputable) {
                // e.loaded传输字节
                // e.total传输的总字节
                let percentComplete = Math.ceil((e.loaded / e.total) * 100)
                console.log(percentComplete)
                 }
            }

(八)axios

Axios 是专注于网络数据请求的库。 相比于原生的 XMLHttpRequest 对象,axios 简单易用。 相比于 jQueryaxios 更加轻量化,只专注于网络数据请求.

(1)用axios发起get请求

 document.querySelector('#btn1').addEventListener('click',function(){
            let url='http://www.liulongbin.top:3006/api/get'
            let paramsObj={name:'小开心',age:21}

            axios.get(url,{ params:paramsObj }).then(function(res){
                // console.log(res)
                console.log(res.data)

            })
        })

 (2)用axios发起post请求

document.querySelector('#btn2').addEventListener('click',function(){
                let url='http://www.liulongbin.top:3006/api/post'
                let  dataObj={address:'北京',location:'广义区'}
                axios.post(url,dataObj).then(function(res){
                    //res.data就是向服务器提交的数据
                    console.log(res.data)

                })

            })

(3) 直接axios发起get请求

document.querySelector('#btn3').addEventListener('click',function(){
                let url='http://www.liulongbin.top:3006/api/get'
                let paramsObj={name:"小开心",age:22}
                axios({
                    method:'GET',
                    url:url,
                    params:paramsObj, 
                }).then(function(res){
                    console.log(res.data)
                })
                

            })

 (4)直接用axios发起post请求

与get一样只是传输数据params换成data

原文地址:https://blog.csdn.net/qq_50582468/article/details/129684256

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_41458.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注