Hello大家好！我是Cathy海希，今天是我學習編程的第42天。

歡迎同時關注我的Youtube&B站?Cathy海希TV

每日斯多葛

你沒必要做正確的事情。你可以變得自私，粗魯，惡心，沒遠見，迂腐，邪惡，愚蠢(selfish, rude, awful, shortsighted, pedantic, evil, or stupid)人們難免會有想要作惡的沖動。

那我們如何維持自己思考的底線，堅持做正確的事情？因為我愿意，我樂意。

coding

8h

學習內容

【實戰】用AJAX加載不同類型的文件

初識AJAX

什么是AJAX？簡而言之，就是用JS發送請求，接收響應。簡單吧？這就是方方老師的style???

這一課的作業就是自己實際利用用AJAX加載不同類型的文件，我梳理了一下其中我都到底干了一些什么。我發現其實我扮演了三個角色。

角色一：服務端

【服務端我】利用Node.js里的http模塊來實現了響應的功能。值得注意的是，這邊的服務器功能也可以用其它編程語言實現的，只是我們正巧用的是Node.js，其實還可以用PHP啊Python之類的。

我們的目的不是搞清Node.js,而是請求和響應的過程(Node.js只是幫助我們理解整個過程的工具而已)把代碼中每一句干了什么搞清楚就可以了。方方老師還說了，新手不要過早開始學Node.js,JS都還沒整明白呢? 之前每次修改代碼之后，都要ctrl+C斷開，然后執行node再次監聽。這次引進了一個新工具叫node-dev，它可以實時幫忙刷新。

那我在扮演服務端的時候具體干了些什么呢？答：添加了各種路由。啥是路由？就是代碼里的if else，也就是你請求什么，我就給你返回什么類型的文件。

Node.js里面有一行代碼是

response.write(fs.readFileSync(db/page2.json))
//不一定是JSON，可能是其它文件類型

我感覺，這個文件也是由前端來寫的，寫好了放在數據庫里，然后供服務端讀取。

角色二：用戶

【用戶我】在瀏覽器里，實際通過鼠標按下各個按鈕，期待得到某種結果，比如說頁面樣式有變化啊，得到新內容啊，翻到下一頁啊，這是我在扮演使用瀏覽器的用戶的角色。

角色三：前端

我不太確定這個角色是不是就叫前端哦，但是跟我在學習的內容高度符合，所以我猜測大概這些事情實際平時就是前端在做了。

情景：用戶點擊了一個“請求CSS”的按鈕，那【前端我】要如何把用戶期待的變化展現在他的瀏覽器上呢？

首先，我要用到一個我第一次接觸的對象：XMLHttpRequest(XHR)，它用于與服務器交互。

?

AJAX的正式定義：使用 XMLHttpRequest 技術構建更復雜，動態的網頁的編程實踐

?

所以，用了XHR，就可以說我就是在AJAX了?

OK，回到上面設定的情景。之前說了，AJAX其實就是用JS發送請求，接收響應對吧？用戶點擊了瀏覽器上的某個按鈕，我需要把這一行為構造成一個請求，發送給服務端，然后接收來自服務端的響應。這么想想，前端是不是連接用戶(用戶的瀏覽器)和服務端的橋梁的感覺？

用代碼實現

用代碼來實現上述的過程，簡單來說分為以下四步：

const request = new XMLHttpRequest()
//1. 創建一個XHR對象
request.open(method,url)
//2.初始化請求
request.onreadystatechange = callback
//3. 監聽它的狀態變化
request.send()
//4.發送請求

• 第2步的.open(method,url)

其實后頭還可以接收幾個參數，但是我想特別談談第三個參數async。它的默認值是true，所以不用寫。我感覺這個默認值true對于AJAX來說特別精華，因為，它表示要不要異步執行操作。如果改成false，那就跟AJAX里的A意味的異步相矛盾了。所以，我們一般只寫前兩個參數。

• 第4步的.send()

用于發送 HTTP 請求。如果是異步請求(默認為異步請求)，則此方法會在請求發送后立即返回；如果是同步請求，則此方法直到響應到達后才會返回。因為.open()的默認值是true，所以就是前面一種情況。

• 第3步的onreadystatechange

當 readyState 的值改變的時候，相應的callback函數會被調用。(callback回調將會是明天日記的重點之一)

請求操作已完成(注意，意味著數據傳輸已經徹底完成或者失敗)

并且請求成功的話，

我就從服務器那里拿到的響應(數據)，根據其類型，用不同的類型進行解析，這樣子瀏覽器就可以正確地加載到頁面上。

最終用戶就可以看到他通過瀏覽器發起的請求在頁面上的反饋了。

mindset

現在在學習的這一章的名字叫【前后分離】，說實話其實我還不知道前端和后端到底是如何分工的。如果我今天這個一人分飾三角的腦內小劇場大致正確的話，我覺得我開始那么一絲絲感覺了？不過我更加期望整個章節學習完成之后，有一個更加清晰的認識。

總結

以上是生活随笔為你收集整理的ajax response.write 执行失败_Day 42:一人分饰三角，初识AJAX的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。