JavaXp.com | Java Experts Blog | Java Examples | API | Errors

Showing posts with label AJAX. Show all posts

Saturday, June 1, 2019

Example with React, Redux and Axios API

In previous article we have seen a simple react with redux example. In this article we will add Axios api to it. Axios is used for Promise based HTTP client for the browser and node.js. To know more about axios package, click here.

In this example we will get input name from user and hit a hello world rest endpoint. For running this example you may need to install below packages -

redux
react-redux
axios
redux-thunk

App.js

PHP example - Google Recaptcha validation using jquery (AJAX)

In earlier post we have seen JSP example, how to validate Recaptcha using jquery, Now we will see how to achieve the same in PHP.

To know more about Google recaptcha, click here.

To run php example add recaptcha-php-1.11 in your application. Please see the self explanatory PHP code below.

test.php

JSP example - Google Recaptcha validation using jquery (AJAX)

Below is the example for Google Recaptcha validation using jquery(AJAX).

What is reCAPTCHA?

reCAPTCHA is a free CAPTCHA service that protects your site against spam, malicious registrations and other forms of attacks where computers try to disguise themselves as a human; a CAPTCHA is a Completely Automated Public Turing test to tell Computers and Human Apart. reCAPTCHA comes in the form of a widget that you can easily add to your blog, forum, registration form, etc.

To know more about Google recaptcha, please see below links
http://www.google.com/recaptcha
https://developers.google.com/recaptcha/

Please see self explanatory JSP code below. To run below example add recaptcha4j-0.0.7.jar file in your applications classpath.

test.jsp

Javascript : On scroll fill data at the end of the page

Other day while browsing facebook, i saw when we scroll to the end of the home page it fills more data without refreshing the whole page. Again when u reach to the end of the page it fetches more data and this continues. I didn't bother to check its upper limit, may be at some point of time it will go out of memory of the browser.

So lets see how this functionality can be achieved. Below javascript variables can be used to detect when user have reached to the end of the body.

document.body.scrollTop - scroll bar position
document.body.scrollHeight - height of the scroll bar
document.body.clientHeight - total height of the body

so if (scrollHeight - scrollTop) is equal to clientHeight you have reached to the end of the body. And obviously you can use various APIs like AJAX, DWR, Ext JS etc to load data without refreshing the whole page.

Below is the standalone tested HTML code, directly you can test this example no need to have any server. Please see the self explanatory html code.

<HTML>

<HEAD>
<TITLE>Scroll Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY onload="onLoadData();" onscroll="onScrollDiv();">
<center>
Simple Javascript example which fills data when you scroll at the end of the file same like Facebook
<br />
Resize the window so that scroll bar appears on the right hand side then you can test it.

<div>
<div id="div1"></div>
</div>

</center>
</BODY>
</HTML>

Monday, June 18, 2012

DWR Hello World example

DWR - Direct Web Remoting

DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible. In simple words DWR is Easy Ajax for Java. Unlike AJAX you don't have to write codes to get XHTML object or check for state change etc. To know more about DWR, click here.

DWR is supported by almost all browsers like Firefox,Internet Explorer,Opera and Safari. To know more, click here.

About the example

We will create a simple java class (i.e HelloWorld.java) with a method sayHello() which will accept a name and print Hello name. We can call this java fuction with JavaScript in a browser. Same as Ajax call without refreshing the whole page.

Below are the steps to run the example.

1. For running the below example you need to add below mentioned JAR file in lib folder of your web project.

dwr.jar
commons-logging-1.1.1.jar

For downloading dwr.jar, click here.
commons-logging-1.1.1.jar, click here.

2. Add the DWR servlet definition and mapping to your application's web.xml. This is just like defining a normal servlet.

<servlet>
  <display-name>DWR Servlet</display-name>
  <servlet-name>dwr-invoker</servlet-name> 
  <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
  <init-param>
     <param-name>debug</param-name>
     <param-value>true</param-value>
  </init-param>
</servlet>
 
<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

Simple AJAX Example

AJAX = Asynchronous JavaScript and XML.

AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page. ie Within the same web page we can communicate with other web page without getting out of current page.

Lets see a simple AJAX Example using .html files, directly you can run this example no need of any server.

Here we have a MainPage.html, as the name suggest this is our Main Page which will communicate with another simple page called SimplePage.html. MainPage.html will fetch data from SimplePage.html and display it without refreshing the whole page. lets see the codes.

<!-- MainPage.html -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>MainPage.html</title>

<script TYPE="text/javascript" LANGUAGE="JavaScript">

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

function stateChanged() 

{

// if request finished and response is ready

if (xmlHttp.readyState==4)

{

//get the response data as a string

var response = xmlHttp.responseText; 

alert("Response :: "+response);

document.getElementById("myDiv").innerHTML=response;

}

}

function AJAXTest()

{

document.getElementById("myDiv").innerHTML="Fetching data...";

alert("AJAXTest function called");

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

{

alert ("Your browser does not support AJAX!");

return;

}

//Stores a function (or the name of a function) to be called automatically each time the readyState property changes

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET","SimplePage.html",true);

xmlHttp.send();

}

</script>

</head>

<body>

This is a Main page. <br/><br/>

<a href="#" onclick="AJAXTest()">Click Here</a> to call SimplePage.html<br/><br/>

<div id="myDiv"> </div>

</body>

</html>

Add a simple text line in another page, which will be displayed on main page.

<!-- SimplePage.html -->

<h1>This is a Simple Page</h1>

Output

Pages