COMP3322A Modern Technologies on World Wide Web AJAX, JSON and MongoDB Examples

Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

COMP3322A Modern Technologies on World Wide Web

AJAX, JSON and MongoDB Examples

We   have   provided   source   code   of   examples   from   the   two   sets   of   lecture   slides 9_AJAX_COMP3322A_f2022.pdf  and  10_XML_JSON_MongoDB_COMP3322A_f2020.pdf  in ajax_json_mongodb_examples.zip. Please try them out using the Node.js environment you have installed.

Example 1: This  is the simple  user  name validation  app  using AJAX.   You can  reuse the Express project directory you created before, i.e., “test” . Copy app.js in our given example1 folder    to    the “test”    project    directory,    overwriting    the    previous    app.js.    Copy AJAXexample.html into the public directory. Then in the “test” project directory, run the app as follows:

node app.js

Then the server is up running at port 8081 on your computer. Launch a browser and access the URLhttp://127.0.0.1:8081/AJAXexample.html to check the page out.

Example 2: This is the same simple user name validation app implemented with fetch (using default GET  method).   You can  reuse the app.js  in example1. Copy AJAXexample.html  in example2 folder into the public directory, overwriting the previous AJAXexample.html. Then in the “test” project directory, run the app as follows:

node app.js

Then the server is up running at port 8081 on your computer. Launch a browser and access the URLhttp://127.0.0.1:8081/AJAXexample.html to check the page out.

Example 3: This is the same simple user name validation app implemented with fetch using the  POST  method.     Copy  app.js  in  example3  folder  to  the “test”   project  directory, overwriting the previous app.js.  Copy AJAXexample.html in example3 folder into the public directory, overwriting the previous AJAXexample.html. Then in the “test” project directory, run the app as follows:

node app.js

Then the server is up running at port 8081 on your computer. Launch a browser and access the URLhttp://127.0.0.1:8081/AJAXexample.html to check the page out.

Example 4: This is the weather forecast app for retrieving weather.xml from the web server using AJAX and responseXML.  Copy app.js in example4 folder to the “test” project directory, overwriting  the  previous  app.js.     Copy  responseXMLexample.html  and  weather.xml  in example4 folder into the public directory. Then in the “test” project directory, run the app as follows:

node app.js

Then the server is up running at port 8081 on your computer. Launch a browser and access the URLhttp://127.0.0.1:8081/responseXMLexample.html to check the page out.

Example 5: This is the weather forecast app with AJAX and JSON. Copy app.js in example5 folder    to    the “test”    project    directory,    overwriting    the    previous    app.js.    Copy jsonexample.html   and   weather.xml   in   example5   folder   to   the   public   directory   and

weatherforecast.jpg into public/images.

We need to use the xml2js module in the express app. Install it as follows:

npm install xml2js

Then in the project directory, run the app as follows:

node app.js

Then the server is up running at port 8081 on your computer. Launch a browser and access the URL http://127.0.0.1:8081/jsonexample.html to check the page out.

Example 6: This is the Express.js app for user name validation and registration through AJAX, with  user  information  stored  in  MongoDB.  To  run  this  app,  we  will  need  a  MongoDB database to store user information. We install the database as follows.

[Step 1]: In the “test” project directory, create a new directory “data”. This directory will be used to store database files.

cd test

mkdir data

[Step  2]:  Go to https://www.mongodb.com/try/download/community and  download the  latest “Community  Server”   release   of   MongoDB  which   has  the   mongo shell  in the “bin” folder  (it  is version  5.0.13 for  macOS  and Windows ) . Then install MongoDB to a directory at your choice.

[Step 3]: Launch the 2nd terminal (besides the one you use for running NPM commands), and switch to the directory where MongoDB is installed. Start MongoDB server using the “data”  directory  of the “test”  project  as  the  database  location,  as  follows:  (replace “YourPath” by the actual path on your computer that leads to the “test” directory)

./bin/mongod --dbpath YourPath/test/data

After  starting  the  database  server  successfully,  you  should  see  some  prompts  in  the terminal. This database server is up running now and listening on the default port 27017. Then leave this terminal open and do not close it when your Express app is running in order to allow connections to the database from your Express app.

[Step 4]: Launch the 3rd terminal, switch to the directory where  mongodb  is installed, and execute the following command:

/bin/mongo

Following the prompt “>”, run the following commands one by one:

use testdb

db.userList.insert({'name':'Tom', 'password':'password1'})

db.userList.insert({'name':'Bobby', 'password':'password2'})

db.userList.insert({'name':'Harry', 'password':'password3'})

The “use testdb” command creates a database named “testdb” . The following commands “db.userList.insert()” insert three new records into a “userList” collection in the database, respectively.      After      you      run      each      insert      command,      you      should      see “WriteResult({ "nInserted" : 1 })” on the terminal.

You can check out all documents in the “userList” collection with the following command:

db.userList.find()

And the MongoDB documents in the “userList” collection are like the following:

{ "_id" : ObjectId("5d960015a5e8892980882689"), "name" : "Tom", "password" : "password1" }

{ "_id" : ObjectId("5d960025a5e889298088268a"), "name" : "Bobby", "password" : "password2" }

{ "_id" : ObjectId("5d96002aa5e889298088268b"), "name" : "Harry", "password" : "password3" }

The "_id" field is created by MongoDB when you insert a record into a collection. Now the MongoDB is ready for use.

[Step 5]: Switch back to the 1st terminal which you use for running NPM commands. Install the monk module for your express app project with the following command:

npm install --save monk

Copy app.js in our given example6 folder to your “test” project directory, overwriting the previous app.js, and copy AJAXexample.html to the “public” folder of the project directory, overwriting the previous AJAXexample.html. Then in the project directory, run the app by command “node app.js”.

Then the server is up running at port 8081 on your computer. Launch a browser and access the URLhttp://127.0.0.1:8081/AJAXexample.htmlto check the page out (fill in the form and then click “Submit”).

2022-12-11