数据请求之AJAX

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

<button class="btn">不带参数的请求</button>

<script>

//$function为jquery的入口函数

$(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"></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）

创建XHR对象
调用open方法，指定请求地址与URL地址
使用send函数，发起ajax请求
监听onreadystatechange事件

2、使用xhr发起 post请求

创建 xhr 对象
调用 xhr.open() 函数设置 Content-Type 属性（固定写法）
调用 xhr.send() 函数，同时指定要发送的数据
监听 xhr.onreadystatechange 事件

（六）数据交换格式

1、XML

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

<note>

        <to>ls</to>

        <from>zs</from>

        <heading>通知</heading>

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

（1）XML缺点

XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
在 Javascript 中解析 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语法的注意事项

属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
JSON 中不允许使用单引号表示字符串
JSON 中不能写注释
JSON 的最外层必须是对象或数组格式不能使用 undefined 或函数作为 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&&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&&xhr.status===200){

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

}

}

（2）用于获取网页表单中的值

<form id="form1">

<input type="text" name='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&&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&&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 简单易用。相比于 jQuery，axios 更加轻量化，只专注于网络数据请求.

(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

（一）网页如何请求数据

（二）资源的请求方式

（三）AJAX

1、什么是AJAX：

2、AJAX的应用场景：

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