AJAX原理

AJAX原理_第1张图片

AJAX使用XHR 对象和服务器进行数据交互

XHR

AJAX原理_第2张图片

 <p class="my-p"></p>

    <script>
        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)
            const myp = document.querySelector(`.my-p`)
            myp.innerHTML =  data.list.join(`
`
) }) xhr.send() </script>

XHR查询参数

AJAX原理_第3张图片

新API URLSearchParams

在这里插入图片描述

XHR 提交数据

AJAX原理_第4张图片

将上传数据通过JSON.stringify()方法修改作为xhr.send()的实参

你可能感兴趣的:(ajax,前端,javascript)