二十八日目：JavaScript　XMLHttpRequest 壱ノ章

おっはー(U 'ᴗ' U)⑅ 我是SONYKO 。
今天天气好好。连假我还真tm的都在家写文章呢
　
十八日目有讲到 axios ，他是用来串接远端资料用的。
今天介绍的 XMLHttpRequest 也是一样的东西。
　
　
上次有稍微提到捞远端资料有四种方法：

• jQueryAJAX
• axios
• fetch
• XMLHttpRequest

虽然就目前而言 axios 是最简便的方法、但还是要了解一下其他种方法。
加油，你快成为学霸了。

⑅　AJAX 到底是什麽

AJAX 全名 Asynchronous JavaScript and XML 。
中译：非同步的JavaScript 与 XML 技术。
　
不知道会不会有人跟我一样，一直误以为他是一个... 方法的名称 ( ˙꒳˙ ٥)
其实你像服务器请求资料 这个技术就叫做 AJAX。
　
然後这个技术又分了四种请求方法（ axios 、jQueryAJAX ... ）
这四种方法，也都可以称作 AJAX 。
　
所以你才会看到 明明使用 XMLHttpRequest 为什麽叫他AJAX ？
axios 也是 AJAX！ 到底什麽是 AJAX ( 猫咪宇宙 )
　
这样解释你应该就不会混乱了。
　
　

⑅　XMLHttpRequest 名字有够长

起手式：

const xhr = new XMLHttpRequest();

今天要去跟远端要资料，必须先打上这行产生一个物件出来。
我们要透过这个 XMLHttpRequest 才能去跟远端服务器要资料。
　
来看看 console xhr 会出现什麽东西

出现一个物件
这就是我们要存放远端资料用的物件。
　
下方可以看到一堆格式，他们是请求资料的各种状态。
比如第三行 onload ，当我们从远端捞完资料就会触发这个 onload 。
　
来看其中一行 readyState ，他是用来表示目前捞资料的各种状态。
我们可以看到目前数字显示 0 ，0 是代表 我们已经产生好物件了、但还没连结要捞的资料。
　
这边整理给各位：

• 0：已经产生一个 XHLHttpRequest , 但还没连结你要捞的资料
• 1：已经用了open，但还没把资料传送过去
• 2：侦测到你用send
• 3：loading 中（ 完成後变成 4 ）
• 4：有捞到资料了，数据已完全接收 。
  　
  所以我们目前位於 1 的状态。因为我们只先建了一个物件而已。
  　
  　　

⑅　读取资料

xhr.open ( 'get', /* 网址 */, true )

这边有三个参数：

• 格式
  get：读取资料
  post：传送资料
  ( 像帐号验证，我们会传一些文字问服务器这个帐号能不能用 )
• 读取的网址
• 同步、非同步

这边就来插一个网址看看资料状态：

const url = 'https://data.kcg.gov.tw/dataset/a98754a3-3446-4c9a-abfc-58dc49f2158c/resource/48d4dfc4-a4b2-44a5-bdec-70f9558cd25d/download/yopendata1070622opendatajson-1070622.json'
xhr.open ( 'get', url, true )

readyState 变成 1 了，赞 。
依照上面状态解释，我们目前是：已经用了open ，但还没把资料传送过去的状态。
　
　　

⑅　资料传送

上面提到格式 post 是传送资料，藉由传字串过去给後台做验证用的。
要post 东西过去时会这样做：

xhr.send(// 这边输入你要传的字 )

上面我们纯粹只想捞资料，没有要传东西的话，这段 send 一样要打。
小括号里会输入空値：

xhr.send(null)

没有加入这行，readyStatus 的状态会一直在 1 ，你也得不到资料。

当你这行打上之後，再来看看 console 的状态：

这样才算真的捞到资料 (U 'ᴗ' U)⑅
目前状态就变到 4 了。 4 代表数据完全接收。
　

那你可能会有疑问，什麽时候会看到 3 ？

可能你抓的是一笔很大的资料，你才会看到他在 loading 中。
然後他 loading 完状态才会跳到 4 ，但平常如果只是用来捞一些 opendata 应该不太会看到3 ，档案不大一下子就读取完哩。
　
　

⑅　非同步？

上面提到的，我们会带入三个参数，第三个参数是代表非同步。
我们在程序码下方加入console ，察看 responseText 看看：

const xhr = new XMLHttpRequest();
const url = 'https://data.kcg.gov.tw/dataset/a98754a3-3446-4c9a-abfc-58dc49f2158c/resource/48d4dfc4-a4b2-44a5-bdec-70f9558cd25d/download/yopendata1070622opendatajson-1070622.json'
xhr.open ( 'get', url, true )
xhr.send(null)

console.log(xhr.responseText)

(Uㅎ_ㅎU) ？？？？ 我有打错吗 ？怎麽什麽东西都没有？
其实并不是因为我有打错、因为我如果在 console 输入 xhr.responseText 确实有东西。
这就是我们常讲到的 非同步 。
　
什麽是非同步？
非同步就是他不会等资料传回来，就先跑下面的程序码。等资料回来再传给你。
就像你回家你家的人不等你吃晚餐先吃、啊你回来再自己吃 。
　
这边要知道，参数的 true 是非同步 的意思、 false 是取消非同步。
　
所以为什麽我们会得到一个空白？
因为我们执行非同步，资料还没回传就先执行 console.log ，理所当然它印不出东西。
　
我们把 true 改成 false 看看：

资料成功印出来了。
　
因为关掉非同步就等於 程序等资料传回来後，才执行 console.log
就像你家人等你回家，才一起吃晚餐 。
　
　
　

⑅　要怎麽样才能取得资料？

我们可以用 onload 这个状态来取得资料。
onload 是一个函式，你可以这样写：

const xhr = new XMLHttpRequest();
const url = 'https://data.kcg.gov.tw/dataset/a98754a3-3446-4c9a-abfc-58dc49f2158c/resource/48d4dfc4-a4b2-44a5-bdec-70f9558cd25d/download/yopendata1070622opendatajson-1070622.json'
xhr.open ( 'get', url, true )
xhr.send(null)

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

你一样能取得 responseText 内的资料。
　
onload 当他确定资料有回传回来时，就会执行後面 function 。
所以上面程序码意思就是：资料回传回来了→ 执行 function → 得到 console.log 的结果。
　
　
　
　
　
今天的 XMLHttpRequest 先讲一半。
明天再介绍更多的运用 ( ◜ᴗ◝)

让我过一下连假，要跨日了。

じゃあね〜　♫
　
　

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

我累累
放弃想梗

音档
　

今天什麽都看：

• ネットワーク経由でリクエスト送信
  →　透过网路发送请求。
  　

• サーバーは応答していません
  →　服务器没有回应。
  　

• 同期（どうき）、非同期（ひどうき）
  →　Dou ki 、Hi dou ki
  　

• アップロード
  →　upload 上传
  　

• 受取済み（うけとりずみ）
  →　接收完了
  　

• クライアント
  →　client 用户端
  　

• ダウンロード
  →　download 下载　必学
  　

• コンテンツ
  →　contents 内容