三十日目：JavaScript　XHR 终ノ章 。

おっすー(U 'ᴗ' U)⑅　SONYKO 打油..°♡
三十日目、各位我成功了 ( 啪叽啪叽

　

今天要来讲 XHR post 跟补充相关知识、刚好是最近的学习目标 。
所以我也没有很强，我现在才要学 post

杂谈留到最後，来吧！ 接招！

　

⑅　CORS（ Cross-Origin Resource Sharing ）

其实并不是每一个JSON 格式都给捞的。

举例：我找了一个 新竹补习班的OPEN DATA
今天一样用XHR 把资料抓下来：

const url ="https://ws.hsinchu.gov.tw/001/Upload/1/opendata/8774/8/439763a6-a05b-4c43-a76f-b40f4ca2c7a1.json"

const xhr = new XMLHttpRequest();
xhr.open ( 'get', url, true )
xhr.send(null)

xhr.onload = function(){
	console.log(xhr.responseText)
}

　

殊不知我们得到... (Uㅎ_ㅎU)
https://ithelp.ithome.com.tw/upload/images/20201013/20129506kTlmEAypzc.png
为什麽他会跳出这个结果？
其实是因为这只 JSON 档没有开啓一个叫 CORS 的设定，没有打开它资源就没办法共享。

　

CORS （ 中文：跨来源资源共享 ）
他是用来让网页的受限资源能够被其他域名的页面存取的一种机制 。
简单来说就是「是否可以跨网域捞资料」的机制。

　

什麽叫做跨网域？
看看这个 OPENDATA 的网址

const url = "https://ws.hsinchu.gov.tw/001/Upload/1/opendata/8774/8/439763a6-a05b-4c43-a76f-b40f4ca2c7a1.json"

只要前面网址为 https://ws.hsinchu.gov.tw/ 的都是同一个网域哩。

同样的网域能互相分享资料、但我们不属於那个网域，因此没办法存取他的资料。

　

这个网站可以察看资料能不能使用 ( ◜ᴗ◝)

　

⑅　传统表单输入介绍

来讲讲表单。

大家都注册过帐号吧，如果有相同帐号的时候他就会提醒你说这个帐号被用过了。
其实就是因为我们输入帐号後，会透过 post 进行验证。
post 传送资料过去问他服务器资料库上有没有相同的帐号。

为了知道使用 post 是使用怎麽样的协定去做撰写的，
所以我们来讲讲传统表单吧。

大家有注意过上面的网址列吗？

假如我今天做一个 form 、里面包帐号密码输入框：
https://ithelp.ithome.com.tw/upload/images/20201013/20129506LS5I505DOv.png

<form action="example.html">
  帐号：
  <input type="email" name="email">
  <br>
  密码：
  <input type="password" name="password">
  <br>
  <input type="submit" value="送出">
</form>

按下送出後我们来观察网址列，会多出一串字：

// example.html?email=chenchenssssss%40gmail.com&password=aaaaaa
  • html 後面的 ? 代表後面接参数。
  • email 和 password 中间的 & 为连接多个内容使用。

当按纽的 type 为 submit 时，就会将内容带进网址里做传递哩！

　

⑅　XHR　post

来讲解 post 的运作流程。
以 注册帐号 为例：

  1. 前端跟後端工程师合作时（ 假如说你要新增帐号 ）
    会拿到一串网址，这个网址就是我们用来做验证用的。
    　

  2. 他会告诉你应该提供怎麽样的格式，
    当给他的内容可以使用、他就会回传一个物件给你。

    // 举例他给的格式
{
	email: '[email protected]',
	password: '666666'
}

    我们就按照这个格式传资料给後端。
    　

  3. 後端接收到我们送的资料後，会回传讯息给我们：

    // Success Response：
{
	'success': true ,
	'result': {},
	'message': '注册帐号成功'
}

// Error Response：
{
	'success': false ,
	'result': {} ,
	'message': '此帐号已被使用'
}

就来看看用 XHR 写 post 该怎麽写吧：

const xhr = new XMLHttpRequest();
const url = '你的网址' ;
xhr.open('post',url,true);

// post 最长使用的格式 
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

// send 括号内输入後端要求的格式
xhr.send("[email protected]&password=aaaaaa")

xhr.setRequestHeader('','') 参数代入你想 post 的格式 。
　
　

°♡ xhr.setRequestHeader

我们写 HTML 时不是都会加一行 <!DOCTYPE html> ，
来表示我们是要撰写 HTML5 的格式吗？
加上它网页才会看得懂我们是要用 HTML5 的格式去撰写 html 。
　
今天 post 东西也是一样、
我们要告诉对方：「 要传东西过去罗！格式是 ＿＿ 喔！」

xhr.setRequestHeader() 就是这个意思哩 ♫
　

那参数里面那个长到爆的格式，可以说是我们最常用的格式，
用来模拟我们传统表单输入的状况。
　
还记得讲解 get 资料的时候都是打 xhr.send(null) 吗？
然後我那时候说 send 里面的字是使用 post 时才会输入的。
就来看一下上面范例 send 括号里的内容吧 (U 'ᴗ' U)⑅

// 楼上程序码再打一次
xhr.send("[email protected]&password=aaaaaa")

你会发现，啊这不是刚刚传统表单讲的那个吗？！
嘿丢，记忆力真棒。 所以才突然插一个传统表单来讲w
括号里面就是要打那个东西。
　
　
刚刚贴过的，後端给我们的格式可能长酱：

{
	email: '[email protected]',
	password: '666666'
}

我们得把他转换为

// [email protected]&password=aaaaaa

再提醒一次： & 用来连接多个内容 ！
　
　
　

°♡ 试着用API 後台送出上面程序码

来看看结果会长什麽样子吧！
https://ithelp.ithome.com.tw/upload/images/20201013/20129506VF1w5lzgEp.png
可以看到系统回覆内容在 reponse 及 reponseText 的地方，
并且显示帐号注册成功哩 (U 'ᴗ' U)⑅

　

　

　

以上！ 就是我们 API post 的流程 。
铁人赛 30 天完赛 (U 'ᴗ' U)⑅　　我要下去领500 了

　

⑅　( 大家最爱看的 ) 完赛心得

不知道每个人打文章平均会花多久时间，
有人好奇我花多久时间吗w

我一天大概4 ~ 5 个小时吧（ 是认真的 ）
　

主要内容大概打4 ~ 5 小时、日文介绍另外计算。
但我还是觉得自己表现不是太好 ((
　
当然因为自己不是大大，
JavaScript 就跟我参赛简介打的一样，我还是新手，
常常会有订好一个题目想研究，但我就真他MD 看不懂的情形
　

我会跟自己说「 看不懂本来就是正常的，因为我还在路上 」
不用沮丧啊，真的都会的话，我干嘛学！
　

这边想鼓励一样和我在半路上的人，
学习的过程一定会有挫折，我觉得不需要否定自己。

你很棒啊，你很努力！
不然你怎麽会看到我这篇文章？ 这麽棒的自己为什麽要否定，对吧？
　

每个人都有一开始、我们都只是刚开始而已
我们迟早会成长，总有一天可以看懂那个 现在可能还看不懂的东西。
　
所以 持续学习， 持续努力，去爱那个 每天努力学习的自己 (U 'ᴗ' U)⑅
　

以上！
谢谢你们观看我的文章。

　　

୨୧(U 'ᴗ' U) SONYKO的　前端日文小教室 ♡

这个 算是最後的彩蛋吧
就还是来认识一些单字吧 ♩
　
最後一天
就决定介绍大家最爱的日式英文发音。
　
CSS 属性英文念法 ヽ(•̀ω•́ )ゝ✧
　
音档
　

　英　 　発音
　background　 　Ba kku gu ra un do　
　color　 　Ka Ra　
　font-size　 　Fon to Sai zu　
　image　 　i Me-Ji　
　position　 　Po ji Shon　
　font-family　 　Fon to Fa mi li　
　text-shadow　 　Te ki su to Sha dou　
　vertical-align　 　Ba- ti ka ru A ra in　
　column　 　Ka ra mu　
　opacity　 　O pa shi ti　
　inherit　 　in he ri tto　
　margin　 　Ma- jin　

　
　
　
收工！


<<:  使用者帐号在Mendix要怎麽管理?

>>:  Day 29：

新零售行销模式案例，全通路时代来临该如何布局

新零售行销模式案例，全通路时代来临该如何布局，一直以来都在担任辅导顾问为中小企业解决网路行销问题但都...

铁人赛 Day4 -- 一定要知道的 CSS (一)

前言 昨天有谈到 Div 区块 是怎麽写出来的之後，今天就要来谈谈 CSS 什麽是 CSS ? 简单...

【演算法】L1 演算法评估

演算法评估 ###　演算法衡量 效率 渐进符号 EX:O(n) 最差案例 平均案例 平摊分析 问题衡...

[Day 2] 超级简单介绍Vue.js

今天是第二天!!我有记得发文，好耶~~那就直接来看看今天的内容吧~!(好突然) 个人认为在学习新技术...

JavaScript入门 Day02_如何撰写

首先要写 JavaScript 肯定要有编辑器，Visual Studio Code 是个好选择 再...