Trigger webservice - javascript

I have a webservice that I can trigger to do various stuff by typing in the URL in a browser with some defined parameters:
Example:
http://hsserver/HomeSeer_REST_API.aspx?function=setdevicebyname&param1=bedroomlight&param2=on
I am building a web front end in plain HTML but cannot find a way to do this trigger without opening a new page in the broswer.
It would be preferable if it was a function like:
UPDATE: Got it to work with this code, but cant get the parameters to work (func,param1,param2) when I call it with
<button type="button" onclick="processnew('setdevicebyname','bedroom desktop light','off')">processnew</button>
function processnew(func,param1,param2)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","HomeSeer_REST_API.aspx?function=setdevicebyname&param1=bedroom%20desktop%20light&param2=off",true);
xmlhttp.send();
I have no clue where to look for this - hoping for some help

XHR baby.
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
or jquery's abstraction [ajax generic, or post/get for shortcuts]
http://api.jquery.com/jquery.ajax/

well... that would be a simple HTTP GET request.
if you use jQuery, check this out: http://api.jquery.com/jquery.get/
if you want to stick to plain javascript (I wouldn't recommend that though due to some incompatibilities across browsers): http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

Try jQuery
$.ajax({
url: 'http://hsserver/HomeSeer_REST_API.aspx?function=setdevicebyname&param1=bedroomlight&param2=on',
method: 'GET' // HTTP request method
}).done(function(data) {
console.log('Response from server: ' + data);
});

Related

Calling second XMLHttpRequest after first one XMLHttpRequest (failed)

First one XMLHttpRequest is calling script to update MySQL database it can run multiple times depending on the situation. Script insertLocation will do the job, but in the end I am calling second XMLHttpRequest which should update file made from database. The problem is the second XMLHttpRequest will never read from updated database so there are data missing from first XMLHttpRequest.
However when I look to database, the data are there. I tried even sleeping before the creating of the file, but it did not helped. It seems like calling 2 XMLHttpRequest is not possible. I know about that third parameter of .open() , that when its set to false it will wait for request to be done, but it is now working. Here is my code:
insertToDatabase(lat,lng,id);
//there I tried 10 second sleep
updateDatabaseFile();
function updateDatabaseFile() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","updateCoords.php",false);
xmlhttp.send();
alert("updated");
}
function insertToDatabase(lat,lng,id) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","insertLocation.php?lat="+lat+"&lng="+lng+"&id="+id,false);
xmlhttp.send();
alert("inserted")
}
One lats thing, when I run the updateDatabaseFile.php manually it will do the job. So I think the problem might be that changes done to database are made when this whole script ends so that is why I am getting incomplete data when reading.
EDIT: the alert("inserted") will open after the alert("updated") so there is the fail. The second one will finish first.

How to send a parameter from java script function to a servlet

I want to send some parameters to a servlet with the help of javascript.....
In my jsp page there is a parameter "a[j]" which is generated dynamically and on a click the javascript function invoke and this a[j] parameter which is "ur" in java script function should be send to a servlet named Rank.....
Tell me which function should i use to forward the parameter...
IN Jsp:
<%out.println(a[j+1]);%>
Javascript:(rank)
<script type="text/javascript">
function rank(ur)
{ ??????????("Rank?set="+ur);
}
</script>
In Servlet(Rank):
String s = (String)request.getParameter("set");
You could do
window.location="Rank?set="+ur;
or
document.body.innerHTML+='<form id="myform" action="Rank" method="get"><input name="set" value="'+ur+'" /></form>';
document.getElementById('myform').submit();
Edit:
Ah, I think that what you need is AJAX, a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page.
Then the code is:
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//only if you want the response
document.getElementById("log").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","Rank?set=" + ur,true);
xmlhttp.send();
}

Load html file into a div with javascript?

I have a div which I want to populate with different html files from my server. Is there a simple way to do this? All I ever find are jquery samples and I don't want to use a library.
I have tried this:
document.getElementById('main').innerHTML = 'menu.html';
But that obviously just loaded text!
Some simple Ajax will do the trick for you. This is untested, but should give you the right idea:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("main").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","menu.html",true);
xmlhttp.send();
Simplest way is to use a library, which the entire point of, they wrote the code for u. right?
Use the jQuery example. It is as good as it gets.
Is there a simple way? No, not without a library. That being said, you can do it on your own if you choose - that might be all that's necessary for you to come crawling back into the arms of jQuery ;)
Resource: XHR on Mozilla Developer Network

Path issue in ajax ,in a wordpress site

I have a wordpress site
for ex, www.test.com
There is a js file (forms.js)in the script folder of mytheme folder.
ie (theme/mytheme/script/forms.js)
There is a mail.php page in mytheme folder
ie (theme/mytheme/mail.php)
Following is the content of forms.js
function submitFormToEmail()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("results").innerHTML=xmlhttp.responseText;
alert("Form received, thank you!");
}
}
xmlhttp.open("GET","/mail.php",true);
xmlhttp.send();
}
I will call "submitFormToEmail",if we click a image in the page *www.test.com/hello_test*
Where "hello_test" page lies in theme/mytheme/.
But the mail.php is not working.
Let me know ,how can we set the path of mail.php in the function "submitFormToEmail", so that it will work
Calling /mail.php will look for the mail.php file at http://www.test.com/mail.php. Just fix the path?
Either directly code the correct path into the javascript file or use php to dynamically get it using get_bloginfo. There are several ways to do this, but probably the best way is to create a hidden element on the page that contains the url and then fetch this when building your ajax request. Otherwise you'd have to set php to parse js files and include it in there. Doesn't seem like a good way to me though.
get_bloginfo('template_url');

Ajax call not working in IE7 and FF

I have one js file with a ajax call which is working fine in IE6, but not in IE7 or FF. Can somebody help?
window.onload = function() {
var xmlhttp;
var url = "myurl";
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
debugger;
alert("Hello");
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
alert(xmlhttp.responseText);
}
}
}
In IE7 I am getting access denied error. Please help.
EDIT:
I am now trying it using jQuery,
Code:
$(function() {
$.ajax(
{
type: "GET",
url: "myurl",
datatype: "html",
success: function(xhtml) {
$("#con").html(xhtml);
},
error: function() {
displayMessage(......);
}
});
});
Still its working in IE6 but not in Others.If its a cross domain issue, then how to solve this?
It might be some security issues. See if it works by adding all url's you use here to the trusted sites list.
IE6 has known bugs/issues when it comes to Javascript and cross-domain policy. This is why (amongst other reasons) that IE6 is no longer being supported in terms of cross-browser compatibility by many large organizations (why encourage something that has such a vulnerability?)
My guess, then, is that your var url = "myurl" is pointing to something on another domain or subdomain. But we need more details to be sure.

Categories

Resources