Develop Reference

Read text file on server into array javascript

Here's the situation. On the apache box there's a text file that contains numbers with new lines:
eg:
25
34
76
etc....
What I'm wanting to do it grab the values from that file and use them to "set" some sliders I have which are partially yoinked from http://webfx.eae.net/dhtml/slider/slider.html
Once done I'll have a "commit" button which writes out the altered values to that text file.
But I'm getting stuck at the bit where you read from the text file on the apache box which this runs in.
Everything I've read seems to refer to file uploading via an API but this isn't what i want as the file is server side.
I guess I could use php but as I'm not up on that either (and especially not on how to move variables between the two)
Any ideas? If you need clarification i can give it to you.

Just a simple ajax code!!!
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("mytextfiledic").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","mytextfile.txt",true);
xmlhttp.send();

You can use the XMLHttpRequest :
var xhr = new XMLHttpRequest();
xhr.open( 'GET', 'foobar.txt', true );
xhr.onreadystatechange = function() {
if( xhr.readyState == 4 ) {
if( xhr.status >= 200 && xhr.status<300 || xhr.status == 304 ) {
//your text file is downloaded into xhr.responseText
console.log( xhr.responseText.split('\n') );// there you have your array.
}
}
}
xhr.send();

ajax php call not returning anything

I want php to return a value to ajax. I'm following W3 schools example but no joy.
Here is the javascript/ajax code:
function createReport() {
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("report").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
I have the following call inside an event handler that I know is triggering (other stuff it does is working fine)
createReport();
and later in the body section of the html I have:
<div id="report">Report will be placed here...</div>
If I run test.php by itself, it correctly shows "return this to ajax" so I know that's working. Here is the php code:
<?php
echo 'return this to ajax';
?>
My understanding is that "Report will be placed here..." will be replaced with "return this to ajax". But nothing happens. I don't see any errors listed in the firefox or IE consoles either. Any ideas?

I personally do not think the w3cschools a good place to learn ( see http://www.w3fools.com/ ).
It may be that the problem occurs because of the order that you set the ajax, you did:
XMLHttpRequest/onreadystatechange/open/send
is preferable (if you do not follow this order may occur several flaws in older browsers):
XMLHttpRequest/open/onreadystatechange/send
Note: do not worry, the "open(...)" does not start listeners.
Listeners only work after the "send(...)"
Another reason may be that you did not create "error handling" of XMLHttpRequest.status, it serves to verify faults in the server response.
Try this:
<script>
function XHR(){
if(window.XMLHttpRequest){//outers browsers
return new XMLHttpRequest();
} else if(window.ActiveXObject){//IE
try{
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(ee) {//IE
try{
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(ee) {}
}
}
return false;
}
function createReport(){
var xhr = XHR();// call ajax object
if(xhr){
xhr.open("GET", "test.php", true);//setting request (should always come first)
xhr.onreadystatechange = function(){//setting callback
if(xhr.readyState==4){
if(xhr.status==200){
document.getElementById("report").innerHTML=xhr.responseText;
} else {//if the state is different from 200, is why there was a server error (eg. 404)
alert("Server return this error: " + String(xhr.status));
}
}
};
xhr.send(null);//send request, should be the last to be executed.
} else {
alert("Your browser no has support to Ajax");
}
}
</script>
<div id="report">Report will be placed here...</div>
<script>
createReport();//prefer to call the function after its div#report
</script>
To prevent cache, replace:
xhr.open("GET", "test.php", true);
by
xhr.open("GET", "test.php?nocache="+(new Date().getTime()), true);

At first glance I don't see anything wrong on your js code, so I bet it will probably be a problem locating test.php in your folder structure.
With firebug check the call your javascript AJAX it's doing, and check if the file test.php is being correctly assesed.

I did not find anything wrong with W3Schools' Ajax example, after testing the code that follows (which was pulled from their Website).
Possible factors:
Missing <script></script> tags
Make sure you have JS enabled.
Make sure your browser supports it.
You may have forgotten to change the button's call to the proper function.
Working and tested code using FF 26.0 and IE version 7
Pulled from W3 Schools Website (example) and slightly modified to prove this works.
Result when clicking on the Change Content button:
return this to ajax - as per your PHP code.
<!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("report").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="report"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
PHP used: (test.php)
<?php
echo 'return this to ajax';
?>
Other possible factors:
If on a local machine, your server doesn't support PHP or is not parsing PHP properly, or is either not installed or configured properly.
If on a hosted service, make sure PHP is available for you to use.
Files are not in the same folder as executed from.

try{
request = new XMLHttpRequest();
}catch(trymicrosoft){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request = false;
}
}
}
if(!request)
{
alert("Error initializing XMLHttpRequest!");
}
function Create_Ajax_Query(LinkToFile,Parametrs)
{
window.document.body.style.cursor='progress';
request = new XMLHttpRequest();
var url = LinkToFile;
var params = Parametrs;
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = newinfo;
request.send(params);
}
function newinfo()
{
if(request.readyState==4 && request.status == 200){
window.document.body.style.cursor='default';
alert(request.responseText);
}
}
Hope its useful!

The code looks correct. it runs just fine on a local environment.
I would advise to look at the "Network" tab in the developer tools to detect any errors may occurs on the server side. You can also use console.log() to follow the javascript actual flow:
function createReport() {
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() {
console.log(xmlhttp); //to show the entire object after statechage.
console.log(xmlhttp.readyState); //to show specific parameter.
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("report").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}

sending image as a parameter in xmlhttprequest Post method failed

I am new to JavaScript. In this first i sent successfully some data as a parameters in xmlhttprequest post method. But after that i am trying to send Image as a parameter but this time the post method fails.Here i am using content-type as a multipart/form-data
I am successfully sent image as a parameter in post method.But this time i used <form> tag.
Please any one tell me about this? why my first procedure fails?
function store(){
var pname=document.getElementById("pname").value;
var price=document.getElementById("price").value;
var discount=document.getElementById("discount").value;
var desc=document.getElementById("desc").value;
var heading=document.getElementById("heading").value;
var image=document.getElementById("image").value;
var params="pname="+pname+"&price="+price+"&discount="+discount+"&desc="+desc+"&heading="+heading+"&image="+image;
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)
{
var txt=xmlhttp.responseText;
var obj = eval ("(" + txt + ")");
if(obj.success)
{
userlogin(obj.username,obj.password);
}
else
document.location.href="Userregistration.jsp";
//document.getElementById("countryname").innerHTML=obj.CurrencyById[0].country;
alert("Registered");
}
}
xmlhttp.open("POST","Newproduct",true);
xmlhttp.setRequestHeader("Content-type", "multipart/form-data");
xmlhttp.send(params);
}

Cross domain json parsing

I have the following json in one of the links:
{"edi":[{"NEdid":"19", "Publications":"B0001", "NCid":"141"
, "SEditionCode":"C0001", "SLang":"English", "STimeZone":"GMT+4:00"
, "SEdname":"Default", "NEdmon":"1", "NEdtue":"1", "NEdwed":"1"
, "NEdthu":"1", "NEdfri":"1", "NEdsat":"1", "NEdsun;":"1"
, "SFrequency":"Daily", "NSequence":"1", "dtCreatedOn":"2013-03-25 12:18:46.0"
, "NCreatedBy":"3", "dtModifiedOn":"2013-03-25 12:18:46.0"
, "NModifiedBy":"3", "BIsActive":"1", "BIsDeleted":"0", "NNoe":"7"}]}
I want to parse cross domain json. I am calling the following function on page load of a php page and using localhost. I am using the following code:
function loadEditionList(edurl) {
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) {
var jsonEdition = xmlhttp.responseText;
var objEdition = JSON.parse(jsonEdition);
for (var i = 0; i < objEdition.edi.length; i++) {
var editionname=objEdition.edi[i].SEdname;
alert(editionname);
}
}
}
xmlhttp.open("GET", edurl, true);
xmlhttp.send();
}
Above code is working in IE with a alert message regarding security, but it is not working in chrome and mozilla. xmlhttp.status is 0 in chrome and mozilla.
Another code I used:
function loadEdition()
{
var getUrl = 'someurl/desktopReader.do?numPublisher=3&type=Editions&numPublication=19';
$.ajax({
url : getUrl,
type : 'GET',
dataType : 'jsonp',
jsonp: 'jsonp',
crossDomain : true,
success: function() { alert('Success!'); },
error: function() { alert('Uh Oh!'); },
});
}
In this case I always get alert 'Uh Oh!'.
Please, suggest me the proper way!

Maybe problem is on server side. Here is example i give other guy: http://jsfiddle.net/YGm89/
The code:
$.ajax({
url: "http://ws.geonames.org/postalCodeSearchJSON",
dataType: "json",
data: {
postalcode_startsWith: request.term
},
success: function(data) {alert("ok");}
});
Example with your code.
I removed JSONP function callback name, becouse i can not see any in you request. I asume, thet you do standard JSON request (not JSON P).

Javascript code using xhr is not working?

Below is the response from server (as per google chrome rest-client):
Below is the code snippet I'm using to post some data to our server. I want to get back data as xml ouput.
Keeping in mind the concept of same origin policy i uploaded this piece of code onto our sever as a html page, but not getting any response.
Is there anything wrong with my code or is my approach wrong?
<html>
<head>
<script type="text/javascript">
function getToken()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
alert("stage 1");
xmlhttp.onreadystatechange=function()
{
alert("stage 2");
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert("stage 3");
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("token");
alert("stage 4");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
alert("stage 5");
xmlhttp.open("POST","http://abc.mysite.com:9090/myapi/xxx",true);
xmlhttp.send("op=login&pass=xxx");
}
</script>
</head>
<body>
<center><h2>UserPreview:</h2></center>
<br />
<div id="myDiv"></div>
<br />
<button type="button" onclick="getToken()">GetToken</button>
<div data-role="footer" data-position="fixed" data-theme="a"><h4>Ver: 1.1(17112)</h4> </div>
</body>
</html>
<response><token>8768768768768768</token></response>

You have to take into account that: for AJAX calls, you can only access the same hostname (and port / scheme) as your page was loaded from. The same domain always and the same PORT:
How exactly is the same-domain policy enforced?
In the past I use this for the IE version, I suppose for possible compatibility issues:
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
I always put the code like this:
var THEURL="http://mysite.abc.com:8080/myapi/xxx"
var data="op=login&pass=xxx";
http.open("POST",THEURL, true);
http.onreadystatechange = function(){
};
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", data.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(data);
Can't you use jquery? It is much more efficient.
To make an ajax call:
http://api.jquery.com/jQuery.ajax/
For example:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
The sooner you use Jquery the sooner your work will get faster.

If the element called token in your xml file is an xml element, and not an attribute then you replace the following lines by -
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
by -
txt += (window.ActiveXObject)?x[i].childNodes[0].text : x[i].childNodes[0].textContent;
I didn't ask you wheter your XHR is returning you the XML properly or not.