Simple ajax error driving me crazy - html

I am simply trying to read a html file inside a div, now it is not working therefore I tried to read just a a simple text file named a.txt, the text file contains 3 lines "asdasdas" something like that.
It just won't work, the function is being called after pressing a paragraph tag, here is the code:
functionNew()
{
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("divfull").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","a.txt",true);
xmlhttp.send(null);
}
any ideas why its not working?

code seem to be proper but try calling
xmlhttp.open("GET","a.txt",true);
before
xmlhttp.onreadystatechange=function()
try and let us know if it work for you

Related

AJAX how to create a new element?

i've been using an online tutorial on how to use ajax to create a new element dependent on the users input. At the moment, all it will do is replace an already made div's innerhtml however I would like to create a new div and fill it with the input designated by the user. Here is my current code:
AJAX:
<script>
function showType(str)
{
if (str=="")
{
document.getElementById("Answer").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ASPScripts/QuestionDesign.asp?q="+str,true);
xmlhttp.send();
}
</script>
ASP
<%
response.expires=-1
dim q
q=request.querystring("q")
response.write("<input type='" & q & "'/>")
%>
Any ideas on how to do this? I'm aware its probably a very simple answer, i'm just very new to this stuff
basically, what you are asking is how to append a new element to the DOM:
var newDiv = document.createElement("div");
newDiv.innherHtml = xmlhttp.responseText;
document.getElementById("newDivParent").appendChild(newDiv);
EDIT: you can paste this code in console (f12 in chrome) right here on this page to see how it works:
var newDiv = document.createElement("div");
newDiv.setAttribute('style', 'position:fixed; top:0; left:0; right:0; bottom:0; z- index:10000000; background-color:red;' )
document.body.appendChild(newDiv);

unable to load xml data into IE browser

i am using the below code from w3schools to load xml data into my html page.BUt its working in mozilla browser only, no other browser is giving any output...Please check the code for the necessary changes to be made
<html>
<head>
<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
xml=loadXMLDoc("cdcatalog.xml");
xsl=loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject)
{
ex=xml.transformNode(xsl);
document.getElementById("example").innerHTML=ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>
use this line
xml=new ActiveXObject("Microsoft.XMLDOM");
instead of
xml=new ActiveXObject("Microsoft.XMLHTTP");
it works

xmlhttp.open GET invalid characters

I thought that changing accents chars with
$GLOBALS['normalizeChars'] = array(
'Á'=>'Á', 'É'=>'É', 'Í'=>'Í', 'Ó'=>'Ó', 'Ú'=>'Ú', 'Ñ'=>'Ñ',
'á'=>'á', 'é'=>'é', 'í'=>'í', 'ó'=>'ó', 'ú'=>'ú', 'ñ'=>'ñ'
);
and this function ...
function MakeIt($toClean){
return strtr($toClean, $GLOBALS['normalizeChars']);
}
... will help me to replace áéíóúñ to a á etc...
But i'm still in trouble.
mainfile.php calls to a get_data.php that read mySQL content which uses MakeIt(); to replace invalid chars. If I load get_data.php into a browser, chars are replaced correctly but when it's loaded from mainfile.php it returns invalid chars.
mainfile.php
<script>
function ShowData(str)
{
if (str=="")
{
document.getElementById("deal_rcpt").innerHTML="";
return;
}
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("deal_rcpt").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_data.php?event="+str,true);
xmlhttp.send();
}
ShowData(1)
</script>
<div id="deal_rcpt"></div>
I think xmlhttp is not compatible with áéíóúñ chars.

How to send GET request with login (user:pass) from a button?

I want a button on a webpage that, when pressed, does the equivalent of entering this url in the browser and hitting enter.
http://user:pass#www.example.com/example/button_24
The code below gives me the button but it seems that it doesn't want to pass the credentials, firebug says this:
Access to restricted URI denied" code: "1012
if i remove the credentials it says 401 Unauthorized
Thanks in advance!
<html>
<head>
<script type="text/javascript">
function simpleAjax()
{
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("Divku").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://user:pass#www.example.com/example/button_24",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="simpleAjax()">Request data</button>
<div id="Divku"></div>
</body>
</html>
new code
<head> <meta http-equiv="refresh" content="30" > </head>
<img alt="screenshot" src="http://a:a#www.example.com/example/screenshot.jpg">
<head>
<script type="text/javascript">
function simpleAjax()
{
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("Divku").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.setRequestHeader('Authorization','Basic YTph');
xmlhttp.open("GET","http://www.example.com/example/button_24",true);
xmlhttp.send();
}
</script>
</head>
<body>
<br>
<button type="button" onclick="simpleAjax()">Volume Up</button>
<div id="Divku"></div>
</body>
I think you need to setRequestHeader on the AJAX object and supply the Authentication header instead of passing it in the URL. Remember the server is looking for the header
Authorization: Basic abc123==
(or some facsimile).
Maybe check out this link on supplying credentials with AJAX requests?
ALSO, MDN on setRequestHeader method.

How do I refresh a table using ajax

I would like to update a table cell for a status obtained from a jsp method. The method takes some time, hence it isn't instant. Therefore I need ajax to refresh the page to get an updated status once the method completes
<script type="text/javascript">
function updateTable()
{
var xmlhttp;
var table = document.getElementById('theTable');
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('theTable').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(???);
xmlhttp.send();
}
//Refresh every 2 seconds
setInterval( doStuff, 2000 );
</script>
<!-- The actual Table needed to updated -->
</TABLE>
<TABLE id="theTable">
<TH>status</TH>
<tr>
<td><%=status%></td>
</tr>
</table>
On the server you need a jsp page that generates the table data when it is invoked. Say this is called generatetable.jsp. You can then use that URL in the open() method to invoke the jsp page.
Your callback function will handle replacing the current table data with the new table data when it is received.