How to test your Ajax call using JSP

If you building the web app and want to test your Ajax call by calling the controller here is the snippet you can use.

$(document).ready(function() {
$.ajax({
type: "GET", 
url: "/YourControllerURL"
}).done(function(data) {
console.log(data);
});
});
  1. place the snippet inside the tag inside JSP
  2. in chrome press F12 for developer tools in chrome.
  3. navigate to console tab
  4. in browser navigate to JSP with snippet code.

 

Alternatively, you can view the navigation tab inside the developer tools and see your ajax request and response from controller.

Sweetness of this approach compared to Postman, is that you don’t need to provide all the authorization details.

Note: for testing purpose change your controller to GET method

Note 2: great article to learn about Ajax methods:

https://learn.jquery.com/ajax/jquery-ajax-methods/

Also if you need to pass data to your controller you can use bellow snippet. It returns json, of course your controller must return json too.


var data = {some data you need for your controller ex. id}
$(document).ready(function() {
$.ajax({
type: "GET", 
url: "/YourControllerURL",
contentType: "application/json",
dataType: "json",
data:data
}).done(function (nameOfJsonControllerReturns){ 

console.log(nameOfJsonControllerReturns.data); 

}); 
}); 
Advertisements

Using the Chart.js

I need to use new chart.js to render the pie charts. However, I don’t know how to use it,

these are the steps I followed:

  1. Install node.js from installer then restart
  2. in command prompt: npm install npm -g
  3. add the canvas id to the place where you want to see the chart
    <canvas id="myChart" width="400" height="400"></canvas>
  4. add the script for the chart
    1. <script>
      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {

      ……………………………..}

new Chart is the constructor for the chart.

 

Action time: Let’s start some project

Dear readers and me, I’ve decided that I should start developing my own application. Only this action can justify my accumulation of knowledge. Therefore, let’s decide on couple things:

  1. Frontend: jQuery, AJAX and JavaScript
  2. Backend: Spring framework

As for app idea, I’ve decided that I will be making clone of project which I’m working on now. But I won’t reuse any materials from it, only the knowledge I’ve acquired. I want my project to be opensource so all the codes will be available on my GitHub account. The link I will put once I got anything to show.

Thank you.

Reflection and Prototyping in JS

Prototyping in java script is nothing but act as an Java Interface. Meaning it’s used to define the methods of the object.

 

 

Reflection in java script is used to observe the content of the object. As for modification we can use method expansion:

ex.:

<p style=”line-height: 18px; font-size: 18px; font-family: times;”>
Click “<i>Load samples</i>” to view and edit more JS samples.<br>

function display(p) {

if (p.hasOwnProperty(‘name’)) {
p.name.lastname = ‘Terry’;
alert(p.name.firstname);
}
}

var person = { combinedname: { fistname: ‘John’ }};
display(person);

</p>

JS: Closure

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain.

The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters

You create a closure by adding a function inside another function.
A Basic Example of Closures in JavaScript:

function showName (firstName, lastName) {
var nameIntro = “Your name is “;
// this inner function has access to the outer function’s variables, including the parameter
function makeFullName () {
return nameIntro + firstName + ” ” + lastName;
}
return makeFullName ();
}
showName (“Michael”, “Jackson”); // Your name is Michael Jackson

Closures are used extensively in Node.js; they are workhorses in Node.js’ asynchronous, non-blocking architecture. Closures are also frequently used in jQuery and just about every piece of JavaScript code you read.

function celebrityID () {
var celebrityID = 999;
// We are returning an object with some inner functions
// All the inner functions have access to the outer function’s variables
return {
getID: function () {
// This inner function will return the UPDATED celebrityID variable
// It will return the current value of celebrityID, even after the changeTheID function changes it
return celebrityID;
},
setID: function (theNewID) {
// This inner function will change the outer function’s variable anytime
celebrityID = theNewID;
}}}

var mjID = celebrityID (); // At this juncture, the celebrityID outer function has returned.
mjID.getID(); // 999
mjID.setID(567); // Changes the outer function’s variable
mjID.getID(); // 567: It returns the updated celebrityId variable

To outcan can use console.log(mjID.getID()); then press F12 in the Chrome to see the console