简体   繁体   English

如何在node.js中使用AJAX

[英]How to use AJAX with node.js

I am relatively new to server side programming, however I am building a framework in order to learn and as end outcome deliver it to the public after it is finished. 我是服务器端编程的新手,但是我正在构建一个框架,以便学习并在最终结果发布后将其发布给公众。

I want some parts of the web platform to be able to update only parts of the page on requests, however I do not know anything about AJAX yet. 我希望Web平台的某些部分能够根据请求仅更新页面的一部分,但是我对AJAX还是一无所知。

It would be great if someone could suggest a sort of learning curve to what I am aiming for. 如果有人可以提出我所追求的学习曲线,那就太好了。 Kinda SoundCloud like website, with the ability to update only those parts of the DOM which are requested. 像Kinda SoundCloud这样的网站,能够仅更新DOM中要求的那些部分。

Note: I'm kind of new at this as well, so a grain of salt is advised. 注意:我也很新,所以建议加些盐。 I detail a technique that is working for me, but I make no guarantees that it is The Best Way! 我详细介绍了一种对我有用的技术,但我不能保证这是最好的方法!

AJAX is on the client side and is achieved through either standard javascript (a pain which I wouldn't recommend in most cases) or through a library like jQuery. AJAX在客户端,可以通过标准javascript(在大多数情况下我不推荐这样做)或通过jQuery之类的库来实现。 There are a plethora of tutorials on using jQuery for ajax calls, but the gist is that you are requesting some resource on your server that, when it arrives, calls a callback which does something with the data (this behavior is asynchronous, just as node.js tends to be). 关于使用jQuery进行ajax调用的教程有很多,但是要点是,您正在请求服务器上的一些资源,当服务器到达时,该资源会调用对数据执行某些操作的回调(此行为是异步的,就像节点一样.js往往是)。

If you have no experience using AJAX for the client, I suggest you start off with a framework like Express, before rolling your own (this also gets into reinventing the wheel). 如果您没有为客户端使用AJAX的经验,建议您先使用Express之类的框架,然后再滚动使用自己的框架(这也会重新发明轮子)。 An AJAX call is no different than a standard HTTP request: it can be POST, GET, etc. AJAX调用与标准HTTP请求没有什么不同:它可以是POST,GET等。

You then get into the concept of routing: given a request for some information (AJAX or not!), what should I do and what should I return? 然后,您进入了路由的概念:给定一些信息(无论是否AJAX!)的请求,我该怎么办,我应该返回什么? A framework does the behind-the-scenes stuff for you, so that all you need to do is specify the resource to be requested, the method in which it is requested, and then the callback which does the server-side processing which returns some data. 框架为您完成了幕后工作,因此您所需要做的就是指定要请求的资源,请求资源的方法以及执行服务器端处理并返回一些内容的回调。数据。 This data can be a web page, it can be a JSON object, and so on. 此数据可以是网页,也可以是JSON对象,依此类推。 The key point is that you want to structure it in a way that makes sense for the AJAX call. 关键是要以一种对AJAX调用有意义的方式来构造它。

Here is a simple example: say I have a web page that will display a bunch of information relevant to the server, such as uptime, load, memory usage, and so forth. 这是一个简单的示例:说我有一个网页,它将显示与服务器相关的一堆信息,例如正常运行时间,负载,内存使用情况等。 First, I write the basic HTML page (say, index.html ) that structures this data, and I begin to write a script that makes an AJAX call for this information. 首先,我编写了基本HTML页面(例如index.html ),该页面构成了这些数据,然后开始编写一个脚本,对该信息进行AJAX调用。 I decide that the request (say, /json/stats ) will receive a JSON response. 我决定该请求(例如/json/stats )将收到JSON响应。 On the server-side, I whip up a simple Express script which starts the server and has two routes: the first route will take any request for my / page and serve the index.html . 在服务器端,我整理了一个简单的Express脚本,该脚本启动服务器并有两条路由:第一条路由将接受对/页面的任何请求并提供index.html The second route will take any request for /json/stats and make a few calls to figure out the state of the server, construct an object holding this data, and return it as a response. 第二条路由将接受对/json/stats任何请求,并进行一些调用以找出服务器的状态,构造一个保存此数据的对象,并将其作为响应返回。 Now, back in the script for my HTML page, I can act on the structure of this object through jQuery in order to build the page. 现在,回到我的HTML页面的脚本中,我可以通过jQuery对这个对象的结构进行操作以构建页面。

If you'd like to see some code for this, you can view it here . 如果您想查看一些代码,可以在此处查看 I suggest looking into the REST architecture (of which this code adheres to) as to gain more conceptual understanding of this topic. 我建议研究一下REST体系结构 (此代码遵循该体系结构 ),以便对该主题有更多的概念性理解。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM