Read file from HTML - javascript

I am trying to read a text file from my computer to a website. I have it working in IE, but I can't seem to make it work in Chrome. I'm not skilled in html really at all, so any assistance would be great!
<html>
<body>
<div id = "content">
</div>
<script lang = "javascript">
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","./Test.txt",false);
xhttp.send("");
xmlDoc=xhttp.responseText;
document.getElementById('content').innerHTML = xmlDoc;
</script>
</body>
</html>

Do it with the Javascript File API example here

Related

Loading an XML document onclick

I am attempting to write this code so when I click on the XML button it will show my XML document. I am unable to get the button to do anything, I am assuming that the function is missing something. Any help would be appreciated. Thanks in advance.
Function
<script language = "JavaScript">
xmlOpen = function(){
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
xmlhttp.open("GET","gameXML.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
}
</script>
Button HTML
<p>
<label>List of users:</label>
<input type="button" value="XML" id="users" onclick="xmlOpen()">
</p>
Are you serving these files from a web server? OR are you just opening the HTML page from your file system? If you use Chrome and try to open the HTML file from your file system, you will get an error (see the console) when you click the "XML" button.
To get around this, you can either serve the files from a web server (even on your local machine) OR you could try opening the HTML page in Firefox.
In terms of displaying the contents of the XML file, try taking a look at this question: How do I loop through XML Nodes in JavaScript?
Update:
I was successful in testing with the code below. Opening the HTML file from my Desktop in Firefox.
gameXML.xml
<?xml version="1.0" encoding="UTF-8" ?>
<users>
<user>Bob</user>
<user>James</user>
<user>Karen</user>
<user>Tom</user>
<user>Linda</user>
</users>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Test Page</title>
</head>
<body>
<p>
<label>List of users:</label>
<input type="button" value="XML" id="users" onclick="xmlOpen()">
<table id="tbody"></table>
</p>
<script language = "JavaScript">
xmlOpen = function(){
var users, i, len;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
xmlhttp.open("GET", "gameXML.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
users = xmlDoc.getElementsByTagName("user");
len = users.length;
for (i = 0; i < len; i++) {
var user = users[i].firstChild.nodeValue;
var tr = document.createElement("tr");
var td = document.createElement("td");
var textNode = document.createTextNode(user);
td.appendChild(textNode);
tr.appendChild(td);
document.getElementById("tbody").appendChild(tr);
}
}
</script>
</body>
</html>
Screenshot of result:
did you forget to display the data? If so, add this to your function:
document.getElementById('users').innerHTML = xmlDoc;
If that does not work, change responseXML to responseText.
If that does not work, try replacing
xmlhttp.open("GET","gameXML.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
with
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("users").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gameXML.xml",true);
xmlhttp.send();

Ajax POST request does not work

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>

Modifying server side text file

Currently I am working on static HTML website. Now I am using following javascript code to read server side text file:
<!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", "results.txt", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>content</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Here on click event data is just displayed.But now I want to change the content of text file on click event.I want to increment the number by 1 which resides in the file as content.
Please help me to do this...Thank you so much in advance.!!
EDIT:
I am using windows hosting.
You may do it like this
This is the index page. I have done it in JSP.
index.jsp
<!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", "newjsp.jsp", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv">
<h2>content</h2>
</div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Then the server side coding
newjsp.jsp
<%#page contentType="text/html" pageEncoding="UTF-8" import="java.io.*"%>
<%
try {
BufferedReader in = new BufferedReader(new FileReader("C:/Users/sar/Documents/NetBeansProjects/WebApplication1/web/results.txt"));
// change the path to the txt file
String line;
int a = 0;
if((line = in.readLine()) != null)
a = Integer.parseInt(line)+1;
else
a = 1;
PrintWriter pw = new PrintWriter(new FileOutputStream("C:/Users/sar/Documents/NetBeansProjects/WebApplication1/web/results.txt"));
// change the path to the txt file
pw.println(a);
pw.close();
out.println(a);
}
catch(Exception e)
{
e.printStackTrace();
}
%>
You will have to create a results.txt file at the location specified.

Cannot get a 'bad response' from Ajax call

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);

how to store a xmlhttprequest into a variable

I have a quick question that you brainy guys perhaps have the answer to.
Why does this work
<html>
<head>
<script type="text/javascript">
var xmlhttp;
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("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xlmhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>
</body>
</html>
but if I replace
document.getElementById("myDiv").innerHTML=xlmhttp.responseText;
whit this
var txt=xlmhttp.responseText;
document.getElementById("myDiv").innerHTML=txt;
it don't work anymore, txt is
undefined
. How can I store the xlmhttp.responseText into a string, or into a variable that I can perform a search on? Please give an example on how I can do it. Thanks in advance =)
Might be because you have misspelled variable "xmlhttp" - you have "xlmhttp" in your code.

Categories