AJAX使用 - 技术栈

定义:使用XMLHttpRequest对象与服务器通信。

axios库，与服务器进行数据通信，基于XMLHttpRequest封装

语法：

引入axios.js
使用axios函数

传入配置对象

在.then回调函数接受结果，进行后续处理

html 复制代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

        axios({

            url:'http://hmajax.itheima.net/api/province'

        }).then(result =>{

            console.log(result)

        })

    </script>

hmajax.itheima.net/api/province

数组转字符串<br>

URL:统一资源定位符，网址

组成：协议 http超文本传输协议，https

域名（必须）：标记服务器在互联网上的方位

资源路径：标记资源在服务器下的具体路径

url查询参数：浏览器提供给服务器的额外信息，让服务器返回浏览器的想要的数据

url?参数名1=值&参数名2=值

params:{

参数名：值

}

常见请求方法：

post:提交数据，需要把数据提交到服务器中

method:'post'

data:{

参数名：值

}

<button class="mybutton">注册用户</button>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

document.querySelector('.mybutton').addEventListener('click',()=>{

axios({

url:'http://hmajax.itheima.net/api/register',

method:'post',

data:{

username:'12341524',

password:'123454'

}

}).then(result =>{

console.log(result)

document.querySelector('.my-p').innerHTML = result.data.list.join('<br>');

})

})

</script>

axios错误处理

axios({

请求选项

}).then(result=>{

处理数据

}).catch(error=>{

错误处理

})

html 复制代码

 <button class="mybutton">注册用户</button>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        document.querySelector('.mybutton').addEventListener('click',()=>{
            axios({
            url:'http://hmajax.itheima.net/api/register',
            method:'post',
            data:{
                username:'12341524',
                password:'123454'

            }
        }).then(result =>{
           /* console.log(result)
            document.querySelector('.my-p').innerHTML = result.data.list.join('<br>');*/
        }).catch(error=>{
            alert(error.message)
        })
        })
    </script>

查看请求报文以排查错误

http协议------响应报文

接口文档：描述接口文档

接口：使用Ajax和服务器通讯时，使用的url，请求参数

form-serialize插件：快速手机表单元素的值

引入插件

语法：form哪个表单的数据，表单元素要设置name属性，值会作为对象的属性，建议name的值与接口对象一致

参数二：配置对象

hash设置获取数据结构 ture:json对象（推荐）false：查询字符串

empty控制是否获取表单中的空值 true：获取空值 false:不获取空值的字段

const data = serialize(form,{hash:true,empty:true})

图片上传（form-data)

获取图片文件对象
使用FormData携带图片文件

const fd = new FormData();

fd.append('imag',e.target.files[0])

XMLHttpRequest:对象用于服务器交互

创建XMLHttpRequest对象 const xml = new XMLHttpRequest()
配置请求方法和请求url地址 xhr.open('请求方法'，'请求地址')
监听loadend事件，接受响应结果xhr.addEventListener('loadend',()=>{

//响应结果

console.log(xhr.response)

})

4.发起请求xhr.send()

javascript 复制代码

const xhr = new XMLHttpRequest();
        xhr.open('GET','http://hmajax.itheima.net/api/province');
        xhr.addEventListener('loadend',()=>{
            console.log(xhr.response)
            const data =JSON.parse(xhr.response)
        });
        xhr.send();

查询参数：提供给服务器的额外信息，让服务器返回浏览器想要的数据

url?参数名1=值&参数名2=值

数据提交：请求体参数（application/json)

请求体中设置Content-Type:application/json
请求体携带json字符串

xhr.setRequestHeader('Content-Type','application/json')

const user = {username:'kkk',password:'hihh'}

const userStr = JSON.stringify(user)

xhr.send(userStr)

javascript 复制代码

    const xhr = new XMLHttpRequest();
        xhr.open('POST','http://hmajax.itheima.net/api/register');
        xhr.addEventListener('loadend',()=>{
            console.log(xhr.response)
            const data =JSON.parse(xhr.response)
        });
        xhr.setRequestHeader('Content-Type','application/json');
        const user = {username:'huhuih',password:'1232456'}
        const usetStr = JSON.stringify(user)
        xhr.send(usetStr);