js_web_api --- ajax

最新推荐文章于 2023-04-28 17:16:21 发布

意瑚琏

最新推荐文章于 2023-04-28 17:16:21 发布

阅读量58

点赞数

分类专栏：面试文章标签： jsonp

本文链接：https://blog.csdn.net/weixin_40422539/article/details/108644537

版权

面试专栏收录该内容

13 篇文章 0 订阅

订阅专栏

题目

手写一个ajax
跨域的常用实现方式

知识点

XMLHttpRequest
状态码
跨域：同源策略，跨域解决方案

XMLHttpRequest

xhr.readyState

在这里插入图片描述

jsonp

在这里插入图片描述

CORS

在这里插入图片描述

题目解答

在这里插入图片描述

结合promise的ajax

  <script>
        function ajax(url){
            const p = new Promise((resolve,reject)=>{
                const xhr=new XMLHttpRequest()
                xhr.open('get',url,true)
                xhr.onreadystatechange=function(){
                    if(xhr.readyState===4){
                        if(xhr.status===200){
                            resolve(JSON.parse(xhr.responseText))

                        }else if(xhr.status===404){
                            reject(new Error('404 not found'))
                        }
                    }
                }
                xhr.send(null)
            })
            return p
        }

        const url='/data.json'
        ajax(url)
        .then(res=>console.log(res))
        .catch(err=>console.error(err))
    </script>