web前端面试高频考点——JavaScript-Web-API 篇(二)AJAX、存储

简介: web前端面试高频考点——JavaScript-Web-API 篇(二)AJAX、存储

JS-Web-API-Ajax

一、ajax 的核心API - XMLHttpRequest

1、原生 AJAX 发送 GET 请求

xhr.readyState 不同值的不同意思:


0 - UNSET 尚未调用 open 方法

1 - OPENED open 方法已被调用

2 - HEADERS_RECEIVED send 方法已被调用,header 已被接收

3 - LOADING 下载中,responseText 已有部分内容

4 - DONE 下载完成

xhr.status 不同值的不同意思:

  • 2xx - 表示成功处理请求,如 200
  • 3xx - 需要重定向,浏览器直接跳转,如 301(永久重定向) 302(临时重定向) 304(资源未改变)
  • 4xx - 客户端请求错误,如 404 403
  • 5xx - 服务端错误
  // test.json
  { "name": "zhangsan"}
    const xhr = new XMLHttpRequest()
    xhr.open('GET', './test.json', true) // true 表示异步
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4) {
            if(xhr.status === 200) {
                console.log(JSON.parse(xhr.responseText))
            } else {
                console.log('其他情况')
            }
        } 
    }
    xhr.send(null)

a6257d18988941d9ab7728684c7d65ce.png

2、原生 AJAX 发送 POST 请求

示例:登录的请求,注意:需要传参

    const xhr = new XMLHttpRequest()
    xhr.open('POST', '/login', true)
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4) {
            if(xhr.status === 200) {
                console.log(JSON.parse(xhr.responseText))
            }
        } else {
            console.log('其他情况')
        }
    }
    const postData = {
        username: 'zhangsan',
        password: 'xxx'
    }
    xhr.send(JSON.stringify(postData))

二、浏览器的同源策略

1、同源策略

  • ajax 请求时,浏览器要求当前网页和 server 必须同源(安全)
  • 同源:协议、域名、端口,三者必须一致
  • 不同源 => 前端:http://a.com:8080/ ;server:https://b.com/api/xxx

2、加载图片 css js 可无视同源策略

  • <img/> 可用于统计打点,可使用第三方统计服务
  • <link/> 可使用 CDN,CDN 一般都是外域
  • <script/> 可实现 JSONP
    <img src="跨域的图片地址"/>
    <link href="跨域的css地址"/>
    <script src="跨域的js地址"></script>

3、跨域

  • 所有的跨域,都必须经过 server 端允许和配合
  • 未经 server 端允许就实现跨域,说明浏览器有漏洞、危险信号

三、实现跨域的常见方式 - JSONP 和 CORS

1、JSONP

  • <script> 可以绕过跨域限制
  • 服务器可以任意动态拼接数据返回
  • 所以,<script> 就可以获得跨域的数据,只要服务端愿意返回
  • npm install http-server -g 安装服务
  • http-server -p xxxx 设置服务地址并启动服务

  • 480c7c3227124a029e3d35d9505c206e.png1a5268c428f84ad0a4fdc7e0649aaf79.png
  // jsonp.js
  abc (
      {name: 'xxx'}
  )


  // Demo.html
    <script>
        window.abc = function (data) { 
            console.log(data)
        }
    </script>
    <script src="http://localhost:8002/jsonp.js?username=xxx&callback=abc"></script>

ec9c7d265bfa45c6ab6b227c0f9f2b19.png

2、jQuery 实现 jsonp

    $.ajax({
        url: 'http://localhost:8002/jsonp.js?username=xxx',
        dataType: 'jsonp',
        jsonpCallback: 'callback',
        success: function (data) {
            console.log(data)
        }
    })

3、CORS - 服务器设置 http header

出处:https://coding.imooc.com/lesson/400.html#mid=30315

da2f786708ab40ebb17e03f553bb0c02.png

四、手写一个简易的 AJAX(兼容 Promise)

  • 封装原生 ajax
    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 = './test.json'
    ajax(url)
    .then(res => console.log(res))
    .catch(err => console.error(err))

9d82f6b810144deeb9af2b09a42d2e2a.png

JavaScript-Web-API-存储

一、cookie

  • 本身用于浏览器和 server 通讯
  • 被 “借用” 到本地存储来
  • 可用 document.cookie = ‘…’ 来修改
  • 062ffae41ec449579baea18a391ce509.png

1、cookie 的缺点

  • 存储大小,最大4KB
  • http 请求时需要发送到服务端,增加请求数据量
  • 只能用 document.cookie = ‘…’ 来修改,太过简陋

二、localStorage 和 sessionStorage

两种存储详细内容参考链接

  • HTML5 专门为存储而设计,最大可存 5MB
  • API 简单易用 setItem、getItem
  • 不会随着 http 请求被发送过去

1、localStorage 和 sessionStorage 区别

  • localStorage 数据会永久存储,除非手动删除
  • sessionStorage 数据只存在于当前会话,浏览器关闭则清空
  • 一般用 localStorage 会更多一些

2、cookie 和 localStorage sessionStorage 区别

  • 容量:4KB VS 5MB
  • API 易用性:不易用 VS 易用
  • 是否随着 http 请求发送出去:发送 VS 不发送
  • 不积跬步无以至千里 不积小流无以成江海
相关文章
|
12天前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
45 2
|
2月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
12天前
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
12天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
12天前
|
JSON 前端开发 JavaScript
跨越跨域大山,前端不得不知道的Ajax
该文章介绍了AJAX技术的基本使用方法,包括GET和POST请求的模拟,并探讨了浏览器同源策略及其对跨域请求的影响,同时还提出了JSONP和CORS作为解决跨域问题的方案。
|
2月前
|
前端开发 JavaScript 开发者
【Web 前端】彻底告别“this”指向困扰:从零开始掌握 JavaScript 中“this”的奥秘
【8月更文挑战第23天】在 JavaScript 中,`this` 关键字的指向是根据其调用上下文动态确定的,这对于 Web 前端开发者而言是一项核心技能。本文通过多个示例解释了 `this` 的指向规则:在对象方法中指向该对象,在独立函数中指向全局对象或 `undefined`,在事件处理器中指向触发事件的 DOM 元素,在构造函数中指向新创建的对象。此外,还介绍了一些技巧,如使用箭头函数、`bind` 方法以及在事件处理器中显式保存 `this` 的引用,以帮助开发者更好地理解和控制 `this` 的指向。
30 1
|
2月前
|
前端开发 JavaScript 安全
|
2月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
52 0
|
2月前
|
JavaScript 前端开发 API
Vue.js 3.x新纪元:Composition API引领潮流,Options API何去何从?前端开发者必看的抉择指南!
【8月更文挑战第30天】Vue.js 3.x 引入了 Composition API,为开发者提供了更多灵活性和控制力。本文通过示例代码对比 Composition API 与传统 Options API 的差异,帮助理解两者在逻辑复用、代码组织、类型推断及性能优化方面的不同,并指导在不同场景下的选择。Composition API 改善了代码可读性和维护性,尤其在大型项目中优势明显,同时结合 TypeScript 提供更好的类型推断和代码提示,减少错误并提升开发效率。尽管如此,在选择 API 时仍需考虑项目复杂性、团队熟悉度等因素。
40 0
|
2月前
|
JavaScript 前端开发 测试技术
Web中的JavaScript
Web中的JavaScript