How to load a .txt file using Ajax? I only found how to load XML files.
This is what I have so far:
function loadTxt(url)
{
var xmlhttp;
var txt;
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("phones").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("GET","folder",true);
xmlhttp.send();
}
}
And then:
<form name="phoneBook">
<p id="phones"></p>
<input type="button" onClick="loadTxt()" value="Click">
</form>
But nothing happens.
This is my first time working with Ajax, so a detailed answer will be appreciated.
You haven't opened a connection to the server using
XHR.open("GET", urlToYourTextFile, true);
After a connection is open, you must call send() to actually send the request.
Related
I'm trying to run multiple AJAX calls on the same page and seem to be having trouble. I'm new to this so I don't really understand what's going on. I have a drop down menu and I want it to update the content in two different places when the selection changes. Each of these works on their own but when I try running them together it only updates whichever script I run last. Any help would be greatly appreciated
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").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","../php/get_org.php?q="+str,true);
xmlhttp.send();
}
</script>
<script>
function list(str)
{
if (str=="")
{
document.getElementById("list").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("list").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../php/list_org.php?q="+str,true);
xmlhttp.send();
}
</script>
The reason is simple, you are using same global variable for both requests xmlhttp.
Use var when declaring variables like this var xmlhttp = new XMLHttpRequest();.
Your code initializes xmlhttp and requests for some page. Before the request is done you run some another function, which uses xmlhttp again. It is reinitialized and new onreadystatechange handler is set and another request is made. So only the last response handler set is actually executed.
$('.sizeSelect').change(function(size) {
sizeId = $(this).attr('id');
size = $('#' + sizeId).val();
lastChar = sizeId.substr(5);
addBtn = "#btn_" + lastChar;
shipId = "shipping_" + lastChar;
if (size=="")
{
document.getElementById(shipId).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(shipId).innerHTML=xmlhttp.responseText;
var response = xmlhttp.responseText;
if (response == 0.00) {
$(addBtn).addClass('invisible');
}
else if (response > 0.00) {
$(addBtn).removeClass('invisible');
}
}
}
xmlhttp.open("POST","cart.php?size="+size+"&shipId="+lastChar, true);
xmlhttp.send();
});
Can anyone tell me why this works in Chrome, Firefox and safari and not in IE. I read somewhere that it had to do with forcing ie not to cache and that changing the the request from a get to a post would help... it didnt :(
Any ideas?
Have you tried using jQuery? Have you checked how IE is handling the response - perhaps it sees "0.00" as text you have to parseFloat?
the trick is use separate code XML for IE browsers or that are version of less than 10 .
so every time Ajax is call a method parseXml is called with input parameter XML Dom or text, depending on browser .... and if current browser is IE, it upload XML doc, process it according to Microsoft standards and return XML and rest of processes in Ajax carries on as expected!!
note : browser.msie is not supported in jQuery 1.9 but you can add jquery-migrate-1.2.1.min.js in order to make it compatible or use userAgent and find which is current browser
$.ajax({
type: 'GET',
url: 'XML_file.xml',
dataType: ($.browser.msie) ? "text" : "xml",
success: function (xml) {
var processedXML = parseXml(xml);
$(processedXML).find('my record').each(function () { //code }
});
function parseXml(xml) {
if ($.browser.msie) {
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", "XML_file.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
xml = xmlDoc;
}
return xml;
}
I'm trying to get the content of a page with AJAX and I get no result..
this is the code:
<script type="text/javascript">
function onSumResponse() {
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","http://www.arihav.com/",true);
xmlhttp.send();
}
</script>
And this is the div in the body:
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="onSumResponse()">Change Content</button>
What I get after the click is blank div.
EDIT: This code was taken from w3schools
EDIT 2 : This is the code in vbscript that works:
GotothisURL = "http://www.arihav.com"
Set GetConnection = CreateObject("Microsoft.XMLHTTP")
GetConnection.Open "get", GotothisURL, False
GetConnection.Send
ResponsePage = GetConnection.responseText
AJAX does not allowed to access a different server due to origin policy if you want to request another host better use curl or JSON
i am having side menu, where users clicks on links pages should load inside a div in the center of the page using AJAx requests and it's working properly, however when i click on a link inside the div itself, it loads the whole page, any one knows where is the problem
Ajax function:
function loadmypage(divID, pageURL)
{
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(divID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", pageURL ,true);
xmlhttp.send();
}
links used:
I have created a mozilla extension which is a button located on the browser. This button has a javascript which when clicked should send a XMLHTTLP request. I want to use a local HTML file which I have created in the URL field of it. When I use it I still can't view that HTML page. Why is that so? The code goes like this:
CustomButton = {
1: function ()
{
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","http://localhost/sample.html",true);
xmlhttp.send();
}
}
The sample.html file is located in the htdocs folder of xampp.
Accessing local files with XMLHttpRequest is not allowed for security reasons.