JS-[Ajax篇]-古老的XMLHttpRequest


用最古老的方式發送網路請求:XMLHttpRequest 函式

用XMLHttpRequest 函式發送網路請求


老實說,聽到udemy講師Jonas說看到資料回傳後,並顯示在畫面上,真的會有一種感動有同感XD

現在我們來讓這個“請求”變成動態的函式吧!

把上面整個請求程式碼包在一個getCountry函式裡,並帶上country這個參數
觀察api文件所寫的:https://restcountries.com/v3.1/name/{name}
所以只要將國家名帶入到{name}的位置,即可帶到相關的國家相關資料

用setTimeout控制我想要的請求顯示順序,可以這樣玩

  • 這裡我用setTimeout包起來,讓ajax call照我的順序依序出現我填入的國家

  • 但如果沒有用計時器函式包起來的話,這裡以getCountry函式中用XMLHttpRequest.send所發送的非同步請求是無法預測會先收到並顯示哪個國家資料,但無論哪一個資料先到(ajax calls是同時發送,無法預測誰先抵達),都會先觸發load事件,並先顯示相關資料

    • 這也是為什麼我們需要Promise來幫我們處理這個無法預測哪一筆資料會先抵達的狀況

上課筆記:

這裡的程式碼和筆記都是線上聽課 jonas講師在udemy - The Complete JavaScript Course 2023: From Zero to Expert!

非常推薦這堂課,打好JAVASCRIPT的基礎

補充:

online api有時候會更新,弱要網站時時顯示正確的樣貌,需要注意是否api是否有改版喔!

免費可以使用的APIs

  • https://github.com/public-apis/public-apis
    #### 國家基本資料的url網址
  • https://restcountries.com/#api-endpoints
    #### CORS(Chat GPT解釋)
  • CORS 是 "Cross-Origin Resource Sharing"(跨源资源共享)的缩写,是一种用于在 web 浏览器中处理跨域资源请求的安全机制。它允许服务器控制在一个源(域、协议或端口)下加载的 web 页面如何请求来自其他源的资源。CORS 通过特定的 HTTP 头部信息,使服务器能够告知浏览器哪些源是被允许的,从而允许或拒绝跨域请求。

  • CORS 机制旨在保护用户的隐私和数据安全,防止恶意网站滥用跨域请求来获取敏感信息。通常情况下,浏览器遵循同源策略,即只允许来自同一源的网页进行交互,不允许不同源的网页直接访问对方的数据。CORS 允许服务器声明哪些源具有访问权限,以及允许的请求方法和头部信息,从而实现安全的跨域资源共享。

  • 要启用 CORS,服务器需要在响应中添加特定的 HTTP 头部,其中最常用的是 "Access-Control-Allow-Origin" 头部,用于指定允许访问的源。其他的头部,如 "Access-Control-Allow-Methods" 和 "Access-Control-Allow-Headers",也可以用来控制跨域请求的细节。

  • 总之,CORS 是一种在 web 开发中常见的安全机制,用于控制跨域请求,平衡了数据共享和安全性之间的关系。

#XMLHttpRequest #古老的ajax call #asynchronous #js







你可能感興趣的文章

Node.js 部署到 heroku dynos

Node.js 部署到 heroku dynos

MTR04_1127

MTR04_1127

React 套件-路由 react-router-dom

React 套件-路由 react-router-dom






留言討論