每日 30 秒之 AJAX 你知不知

2019-03-18 admin

简介

前端在日常开发中最经常需要遇到的场景便是向后端发送数据、拉取数据,最常用到的 HTTP ClientjQuery.ajaxaxiosfetch 等,不知道大家有没有想过了解它们是基于什么封装的?小二刚毕业的时候也没有想过,当时觉得很多东西 拿来用 就对了为什么要知道它们的更多内容?

记得第一次面试时,面试官问了这个问题并给出了提示 XMLHttpRequest 但是小二完全答不出来。面试结束后小二很长一段时间不能理解这个问题的意义所在,直到后来用爬取一个站点数据的时候一直出现 “抓取的数据ID 和 直接用数据ID获取的文章内容不一致” 的问题。经过排查后发现是 JavaScript 数字超过一定位数精度丢失:

// 输出 { id: 352677239567885440 }
console.log(JSON.parse('{"id":352677239567885445}'))

由于是爬取别人的数据肯定没法像自己人一样,直接让后端小哥哥配合改一下传输的数字格式。熟悉 jQuery.ajaxaxios 的情况下我们可以修改配置使用拦截器源码 来把 json 数据中的数字变为字符串解决这个问题,那如果熟悉 XMLHttpRequest 是不是可以自己稍微定制一个?

作为一棵树,向下长得越深,向上长得就越高。 作为一只程序🐒,知道得更多,BUG 就会更少 XDD。

扎深根 不一定会让我们得到什么,但会让我们遇到问题时更加从容。虽然让我们一起 扎根 实现一个简单的 HTTP Client 来学习 XMLHttpRequest 中较为常用的函数方法:

const http = ({
  url,
  callback,
  data=null,
  method='GET',
  err = console.error,
}) => {
    const request = new XMLHttpRequest();
    request.open(method, url, true);
    request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    request.onerror = () => err(request);
    request.onload = () => callback(request.responseText);
    request.send(data ? JSON.stringify(data) : null);
};

代码分析

函数为接受一个对象参数,而不是像 (url, callback) 这样的参数列表?因为使用对象相对参数列表来说不用刻意的去记参数的顺序只需要记住所需数据:

小技巧:根据情况利用对象参数来代替参数列表。

const http = ({
  url,
  callback,
  data=null,
  method='GET',
  err = console.error,
}) => {
    // ...
};

创建 XMLHttpRequest 对象并使用 XMLHttpRequest.open() 方法初始化一个请求(这里的 method 可以是 GET、POST、PUT、DELETE):

const request = new XMLHttpRequest();
request.open(method, url, true);

设置 Request Header 中的内容类型:

request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

当请求完成时利用 回调函数 来执行外部传入的代码:

小技巧:善用用回调函数。

request.onerror = () => err(request);
request.onload = () => callback(request.responseText);

发送需要带上的数据:

request.send(data ? JSON.stringify(data) : null);

使用场景

手痒的同学可以开始动手加上 Promise 或者按照 axios API 实现一个自己的 HTTP Client,好奇宝宝可以试试阅读相关 axiosfetch 源码。下面给出几个使用例子:

http({
    method: 'POST',
    url: 'http://pushme.top/api/v1/posts',
    callback: console.log, 
    data: { title: 'hello', content: 'hello world'}
})

http({
    method: 'GET',
    url: 'http://pushme.top/api/v1/posts',
    callback: console.log, 
})

打赏&联系

如果您感觉有收获,欢迎给我打赏,以激励我输出更多的优质内容。

打赏&联系

本文原稿来自 PushMeTop

[转载]原文链接:https://segmentfault.com/a/1190000018539973

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-57969.html

文章标题:每日 30 秒之 AJAX 你知不知

相关文章
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
Zepto Ajax 事件
当global: true时。在Ajax请求生命周期内,以下这些事件将被触发。 ajaxStart (global):如果没有其他Ajax请求当前活跃将会被触发。 ajaxBeforeSend (data: xhr, options):再...
2017-04-26
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
为你的 VS Code 搭建远程开发环境
开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的,那台台式机基本上处于闲置状态,偶尔用来看看文档。后来随着自己需要做服务端开发,有时候需要同...
2018-02-26
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax <form id="myForm" action="#"&...
2017-04-01
回到顶部