What is wrong with the following code? I am getting a proper response from the servlet, but for some reason cannot get it inside the div. If necessary, the response is:
lukas requests to be your friend   <button value="lukas"onclick="accfr(this.value)">Accept request</button> <button value="lukas" onclick="decfr(this.value)">Decline</button><br>
Code:
<html>
<head>
<title>Friend panel</title>
</head>
<body>
Your requests:<br><br>
<div id="req"></div>
</body>
<script>
function getreqs(){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "/ServletTest/DisplayFrRequests", "false");
xmlhttp.send();
var response = xmlhttp.responseText;
document.getElementById("req").innerHTML=response;
}
//var counter = window.setInterval(function(){getreqs()}, 5000);
getreqs();
function accfr(){ }
function decfr(){ }
</script>
</html>
For an asynchronous call, the parameter true/false should not be in quotes
xmlhttp.open("GET", "/ServletTest/DisplayFrRequests", false);
Related
Hey guys am new to ajax I have a php file and a ajax file. I just want to detect the php file from the ajax so I have send a request in ajax like
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
} else {
console.log('file not fetched');
}
xmlhttp.open("GET","first.php?m=babe",true);
xmlhttp.send();
}
}
loadXMLDoc();
</script>
</head>
<body>
</body>
</html>
My php file
<?php
include("ajax.html");
$p = $_REQUEST['m'];
if($p == 'babe') {
echo true;
}
When I run the ajax.html on localhost it doesn't show me any message in the window nor in the console.
Can you guys tell me why is it like this?
Thanx for the help
Some of your brackets were wrong:
function loadXMLDoc(){
var xmlhttp;
if(window.XMLHttpRequest){ // This bracket was missing
xmlhttp=new XMLHttpRequest();
}
else{ // This bracket was missing
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
else{
console.log('file not fetched');
}
} // This bracket was on the wrong place (it enclosed the .open() and .send())
xmlhttp.open("GET","first.php?m=babe",true);
xmlhttp.send();
}
loadXMLDoc();
Also, a simpler way of defining the callback function is:
xmlhttp.onload=function(){
if(xmlhttp.status==200){
alert(xmlhttp.responseText);
}
else{
console.log('file not fetched');
}
}
I have an html file and a .txt file in the same directory hosted on a webserver. The html file contains the following code:
<html>
<head>
<script>
window.onload = function() {
receiveMessage();
}
function receiveMessage() {
var xmlhttp = new XMLHttpRequest;
xmlhttp.open("GET", "message.txt", true);
xmlhttp.send();
xmlhttp.onreadystatechanged = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
}
</script>
</head>
<body>
</body>
</html>
Since the text file message.txt contains "hello world", a javascript alert box containing that message should pop up when the response is received, but it's not. What am I doing wrong?
The property you are looking for is onreadystatechange not onreadystatechanged. There is no d on the end.
reorder the request and change function onreadystatechanged to onreadystatechange:
function receiveMessage() {
var xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","message.txt",true);
xmlhttp.send();
}
put the open and send calls after the onready statechanged event like in http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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","demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
im trying to load a servlet using java script from a jsp. i am also trying to pass two parameter. the page loads but now im printing a sytem out from the servlet it suppose to give me the id and the vehicle vaules but it gives the vehicle felid as null.
ScanServlet doGet was called id = 1 vehicle= [object HTMLParagraphElement]vehicle=null
this is the code
<body onload="notifyOnLoad(<%=request.getParameter("imgid")%>)">
<img id="imgBarcode" src="ImageServlet?imgid=<%=request.getParameter("imgid")%>&vehicle=<%=request.getParameter("vehicle")%>" width=<%=request.getAttribute("Width")%> height=<%=request.getAttribute("Height")%>><br/>
<h4>Barcode Details</h4>
<p>Name :- <%=request.getAttribute("name")%></p>
<p>Type :- <%=request.getAttribute("type")%></p>
<p>Value :- <%=request.getAttribute("value")%></p>
<p id="wtf">type :- <%=request.getParameter("vehicle")%></p>
<script type="text/javascript">
function notifyOnLoad(imgid) {
var xmlhttp;
var vehicle =document.getElementById("wtf");
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) {
window.location = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ScanServlet?imgid="+imgid+"vehicle="+vehicle, true);
xmlhttp.send();
}
</script
>
</body>
You cant directly access the request parameters in the javascript in the way you are trying.
<input type='hidden' name='field1' id='imgid' value='<%=request.getParameter("imgid")%>' />
access the variable in the javascript with its id,
<script type="text/javascript">
function notifyOnLoad(imgid,vehicle) {
var xmlhttp;
var imgid=document.getElementById("imgid");
xmlhttp.open("GET", "ScanServlet?imgid="+mgid+"&vehicle="+vehId, true);
xmlhttp.send();
}
I don't know what I am doing wrong, but all looks good. I am working on localhost and I am having trouble trying to load a file.
This is my code. I am working in NetBeans and console is clear without any errors.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc() {
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("POST", "demo_post.php", true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
When I execute this code, I get no results.
In between your .open() and .send() invocations, set your request header like so:
xmlhttp.open("POST", "demo_post.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
At least, that's how you'd do it if you didn't want to use jQuery.
As some of the comments suggest - you need to look in the error console of the Browser. NOT NETBEANS. Also, understand how to set breakpoints in JS, etc.
Below is an example of what you are trying to achieve using jQuery which is much simple than using pure Javascript.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
// jQuery allows you to use selectors rather than onClick, etc
// So when anything with a class called "loadData" is clicked this function will run
$(".loadData").click(function (event) {
$.ajax({
url: 'demo_post.php', // The URL that your making the request to
type: 'POST', // Type - GET or POST
dataType: 'html', // DataType - can be html, json or jsonp
cache: false, // true or false - whether you want data to be cached
data: 'foo=bar', // Any data that your submitting with the request.
error: function (error_response) {
// An error has occured so empty your #myDiv and put the error in there.
$("#myDiv").empty().append(error_response.status);
},
success: function (response) {
// Everything has worked - empty #myDiv and put the replace with response
$("#myDiv").empty().append(response);
}
});
});
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" class="loadData">Request data</button>
<div id="myDiv"></div>
</body>
</html>
You can find more information on jQuery here: http://api.jquery.com and more specifically on jQuery's AJAX functions here - http://api.jquery.com/jQuery.ajax/
i found that your code is actually designed for GET method.And in this case is not important to use POST instead of get.(because no parameter is passed and also its not a form..) and also agrees to #Jackson
<!DOCTYPE html>
<html>
<head>
<!--you can use online js file but in here i download the js file from code.jquery.com/jquery-2.0.3.min.js and kept it in localhost same folder -->
<script type="text/javascript" src="/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function loadXMLDoc()
{
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","demo_post.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
I'm trying to use Ajax to tell me whether my server is up or not. I've made a simple page with just one Ajax call. When the server is up, it comes back with the xmlhttp.responseText. IF the server is down it is supposed to say "SERVER DOWN"...but when I load the page, then turn off Apache, it still says that the server is up. Is there some other way I should be doing this?
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
var url = "http://192.168.0.5/ajax_info.txt";
function loadXMLDoc(url,cfunc)
{
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=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc(url,function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
else
{
document.getElementById("myDiv").innerHTML = "Server Down!";
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>
</body>
</html>
Thanks for the help
Your page is probably cached, use a cache buster in the url. e.g.
xmlhttp.open("GET",url+'?_dc='+(new Date()).getTime(),true);