React Service Call Test<\/title>\r\n\u00a0\u00a0\u00a0 <script src=\"https:\/\/fb.me\/react-0.13.3.js\"><\/script>\r\n\u00a0\u00a0\u00a0 <script src=\"https:\/\/fb.me\/JSXTransformer-0.13.3.js\"><\/script>\r\n\u00a0\u00a0\u00a0 <script src=\"http:\/\/code.jquery.com\/jquery-2.1.4.min.js\"><\/script>\r\n\u00a0 <\/head>\r\n\u00a0 <body>\r\n\u00a0\u00a0\u00a0 <div id=\"order_date\"><\/div>\r\n\u00a0\u00a0\u00a0 <script type=\"text\/jsx\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var CallService = React.createClass({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 getInitialState: function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return {text: ''};\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 componentDidMount: function(){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 setInterval(this.callService.bind(this),5000);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 callService: function(){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.get(\"http:\/\/host:port\/service.jsp\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 function(data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 this.setState({text: data});\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }.bind(this));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 render: function() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return <div>Response - {this.state.text}<\/div>;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 React.render(<CallService \/>, document.getElementById('order_date'));\r\n\u00a0\u00a0\u00a0 <\/script>\r\n\u00a0 <\/body>\r\n<\/html>\r\n<\/pre>\n<p>…with the service\/web page below…<\/p>\n<pre>\r\n<%@page contentType=\"text\/plain\"%>\r\n<%@ page import=\"java.sql.*\" %>\r\n<%\r\n\u00a0 Connection con = null;\r\n\u00a0 try {\r\n\u00a0\u00a0\u00a0 Class.forName(\"oracle.jdbc.driver.OracleDriver\");\r\n\u00a0\u00a0\u00a0 con = DriverManager.getConnection(\"jdbc:oracle:thin:user\/password@host:1521\/service\");\r\n\u00a0\u00a0\u00a0 PreparedStatement pst = con.prepareStatement(\"select max(submitted_date) from orders where submitted_date >= sysdate - 5\/1440\");\r\n\u00a0\u00a0\u00a0 ResultSet rst = pst.executeQuery();\r\n\u00a0\u00a0\u00a0 while (rst.next()) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 out.println(rst.getString(1));\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 finally {\r\n\u00a0\u00a0\u00a0 con.close();\r\n\u00a0 }\r\n%>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This is a simple example of using React JS to call a web service (simple web page in our example). Of course, a true web service would normally be the source of the data, this is just a simple example…<\/p>\n<p class=\"more-link-p\"><a class=\"more-link\" href=\"http:\/\/appcrawler.com\/wordpress\/2016\/10\/11\/react-js-example-with-web-service-call\/\">Read more →<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[78],"tags":[],"_links":{"self":[{"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/posts\/5543"}],"collection":[{"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/comments?post=5543"}],"version-history":[{"count":6,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/posts\/5543\/revisions"}],"predecessor-version":[{"id":6950,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/posts\/5543\/revisions\/6950"}],"wp:attachment":[{"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/media?parent=5543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/categories?post=5543"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/tags?post=5543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5543,"date":"2016-10-11T15:59:20","date_gmt":"2016-10-11T20:59:20","guid":{"rendered":"http:\/\/appcrawler.com\/wordpress\/?p=5543"},"modified":"2017-03-29T15:40:14","modified_gmt":"2017-03-29T20:40:14","slug":"react-js-example-with-web-service-call","status":"publish","type":"post","link":"http:\/\/appcrawler.com\/wordpress\/2016\/10\/11\/react-js-example-with-web-service-call\/","title":{"rendered":"React JS example with web service call"},"content":{"rendered":"

This is a simple example of using React JS to call a web service (simple web page in our example). Of course, a true web service would normally be the source of the data, this is just a simple example to show the call.<\/p>\n

The example queries the database for the newest record timestamp every five seconds, and renders the value…<\/p>\n

\r\n\r\n\r\n\u00a0 \r\n\u00a0\u00a0\u00a0 React Service Call Test<\/title>\r\n\u00a0\u00a0\u00a0 <script src=\"https:\/\/fb.me\/react-0.13.3.js\"><\/script>\r\n\u00a0\u00a0\u00a0 <script src=\"https:\/\/fb.me\/JSXTransformer-0.13.3.js\"><\/script>\r\n\u00a0\u00a0\u00a0 <script src=\"http:\/\/code.jquery.com\/jquery-2.1.4.min.js\"><\/script>\r\n\u00a0 <\/head>\r\n\u00a0 <body>\r\n\u00a0\u00a0\u00a0 <div id=\"order_date\"><\/div>\r\n\u00a0\u00a0\u00a0 <script type=\"text\/jsx\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var CallService = React.createClass({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 getInitialState: function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return {text: ''};\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 componentDidMount: function(){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 setInterval(this.callService.bind(this),5000);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 callService: function(){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.get(\"http:\/\/host:port\/service.jsp\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 function(data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 this.setState({text: data});\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }.bind(this));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 render: function() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return <div>Response - {this.state.text}<\/div>;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 React.render(<CallService \/>, document.getElementById('order_date'));\r\n\u00a0\u00a0\u00a0 <\/script>\r\n\u00a0 <\/body>\r\n<\/html>\r\n<\/pre>\n<p>…with the service\/web page below…<\/p>\n<pre>\r\n<%@page contentType=\"text\/plain\"%>\r\n<%@ page import=\"java.sql.*\" %>\r\n<%\r\n\u00a0 Connection con = null;\r\n\u00a0 try {\r\n\u00a0\u00a0\u00a0 Class.forName(\"oracle.jdbc.driver.OracleDriver\");\r\n\u00a0\u00a0\u00a0 con = DriverManager.getConnection(\"jdbc:oracle:thin:user\/password@host:1521\/service\");\r\n\u00a0\u00a0\u00a0 PreparedStatement pst = con.prepareStatement(\"select max(submitted_date) from orders where submitted_date >= sysdate - 5\/1440\");\r\n\u00a0\u00a0\u00a0 ResultSet rst = pst.executeQuery();\r\n\u00a0\u00a0\u00a0 while (rst.next()) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 out.println(rst.getString(1));\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 finally {\r\n\u00a0\u00a0\u00a0 con.close();\r\n\u00a0 }\r\n%>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This is a simple example of using React JS to call a web service (simple web page in our example). Of course, a true web service would normally be the source of the data, this is just a simple example…<\/p>\n<p class=\"more-link-p\"><a class=\"more-link\" href=\"http:\/\/appcrawler.com\/wordpress\/2016\/10\/11\/react-js-example-with-web-service-call\/\">Read more →<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[78],"tags":[],"_links":{"self":[{"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/posts\/5543"}],"collection":[{"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/comments?post=5543"}],"version-history":[{"count":6,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/posts\/5543\/revisions"}],"predecessor-version":[{"id":6950,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/posts\/5543\/revisions\/6950"}],"wp:attachment":[{"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/media?parent=5543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/categories?post=5543"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/appcrawler.com\/wordpress\/wp-json\/wp\/v2\/tags?post=5543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}