Hello大家好！我是Cathy海希，今天是我學(xué)習(xí)編程的第42天。

歡迎同時(shí)關(guān)注我的Youtube&B站?Cathy海希TV

每日斯多葛

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

那我們?nèi)绾尉S持自己思考的底線，堅(jiān)持做正確的事情？因?yàn)槲以敢?#xff0c;我樂意。

coding

8h

學(xué)習(xí)內(nèi)容

【實(shí)戰(zhàn)】用AJAX加載不同類型的文件

初識AJAX

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

這一課的作業(yè)就是自己實(shí)際利用用AJAX加載不同類型的文件，我梳理了一下其中我都到底干了一些什么。我發(fā)現(xiàn)其實(shí)我扮演了三個(gè)角色。

角色一：服務(wù)端

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

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

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

Node.js里面有一行代碼是

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

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

角色二：用戶

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

角色三：前端

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

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

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

?

AJAX的正式定義：使用 XMLHttpRequest 技術(shù)構(gòu)建更復(fù)雜，動(dòng)態(tài)的網(wǎng)頁的編程實(shí)踐

?

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

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

用代碼實(shí)現(xiàn)

用代碼來實(shí)現(xiàn)上述的過程，簡單來說分為以下四步：

const request = new XMLHttpRequest()
//1. 創(chuàng)建一個(gè)XHR對象
request.open(method,url)
//2.初始化請求
request.onreadystatechange = callback
//3. 監(jiān)聽它的狀態(tài)變化
request.send()
//4.發(fā)送請求

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

其實(shí)后頭還可以接收幾個(gè)參數(shù)，但是我想特別談?wù)劦谌齻€(gè)參數(shù)async。它的默認(rèn)值是true，所以不用寫。我感覺這個(gè)默認(rèn)值true對于AJAX來說特別精華，因?yàn)?#xff0c;它表示要不要異步執(zhí)行操作。如果改成false，那就跟AJAX里的A意味的異步相矛盾了。所以，我們一般只寫前兩個(gè)參數(shù)。

• 第4步的.send()

用于發(fā)送 HTTP 請求。如果是異步請求(默認(rèn)為異步請求)，則此方法會(huì)在請求發(fā)送后立即返回；如果是同步請求，則此方法直到響應(yīng)到達(dá)后才會(huì)返回。因?yàn)?open()的默認(rèn)值是true，所以就是前面一種情況。

• 第3步的onreadystatechange

當(dāng) readyState 的值改變的時(shí)候，相應(yīng)的callback函數(shù)會(huì)被調(diào)用。(callback回調(diào)將會(huì)是明天日記的重點(diǎn)之一)

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

并且請求成功的話，

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

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

mindset

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。