ajax response.write 执行失败_Day 42:一人分饰三角，初识AJAX

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回调将会是明天日记的重点之一)

1. 请求操作已完成(注意，意味着数据传输已经彻底完成或者失败)
2. 并且请求成功的话，

我就从服务器那里拿到的响应(数据)，根据其类型，用不同的类型进行解析，这样子浏览器就可以正确地加载到页面上。

最终用户就可以看到他通过浏览器发起的请求在页面上的反馈了。

mindset

现在在学习的这一章的名字叫【前后分离】，说实话其实我还不知道前端和后端到底是如何分工的。如果我今天这个一人分饰三角的脑内小剧场大致正确的话，我觉得我开始那么一丝丝感觉了？不过我更加期望整个章节学习完成之后，有一个更加清晰的认识。