I tried all I could think of to at least get to the progress function in IE9 but nothing works. All other browsers get inside of the progress function and write test text without any problems. Hopefully someone can help me. Thank you!
var info = document.getElementById('info');
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
xhr.attachEvent("onprogress", function(e) {
info.innerHTML += "loading...<br />";
});
/*xhr.addEventListener("progress", function(e) {
info.innerHTML += "loading...<br />";
}, false);*/
xhr.open("GET", "10_MB_File.txt", true);
xhr.send(null);
The onprogress event is part of the XMLHttpRequest Level 2 spec...
http://www.w3.org/TR/XMLHttpRequest2/
http://www.w3.org/TR/XMLHttpRequest2/#event-handlers
... which is not supported by IE 9 and below. However, IE 10 is supposed to support it...
http://msdn.microsoft.com/en-us/library/ie/hh673569(v=vs.85).aspx#Enhanced_Event_Support
For more information on which browsers support XHR Level 2, take a look at caniuse.com...
http://caniuse.com/#feat=xhr2
IE9 and under do not support onprogress, hence why you can not get it to work.
var xhr = new XMLHttpRequest();
console.log('onprogress' in xhr);
You could use the onreadystatechange event and display your message. I'm just suggesting it as a workaround.
xhr.onreadystatechange=function() {
if (xhr.readyState != 4) {
// Display a progress message here.
} else if (xhr.readyState==4 && xhr.status==200) {
// Request is finished, do whatever here.
}
}
Adding to suggestion list, if JQuery is used in your project. It can be achieved by below functions and ofcourse, it needs to be JQuery $.ajax request. Advantage of these client libraries is they have objects instantiated based on browsers. For ex: JQuery takes care of "ActiveXObject("Msxml2.XMLHTTP")" or "ActiveXObject("Microsoft.XMLHTTP")" based on browser.
//displays progress bar
$('#info').ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
});
Related
I have some javascript that sends a XMLHttpRequest to a PHP file. This PHP file sends a response, and javascript is supposed to create a URL and redirect to it, using the response text as a parameter. In all other browsers it works fine, but Firefox won't include the response text in the URL.
This is the javascript example:
var xhr = new XMLHttpRequest();
xhr.open('POST', 'filename.php', true);
xhr.onreadystatechange = function(e){
var id = e.currentTarget.responseText;
var urlWithId = "restofurl?id=" + id;
window.location.href = urlWithId;
}
xhr.send(fd);
and filename.php is just a number at the moment:
<?php
echo "3";
?>
I have tried putting other parts of the url (up to the whole url) in the php part, and firefox always cuts out exactly that part. I have also tried copying the response several times to different variable, copying it character by character, putting it in a function that just returns the input again,...
This is only going to be on my own computer, so I don't need to worry about any security issues, so I'm mostly looking for an easy way to cheat around this rather than the way it would be done professionally. Does anyone have any idea?
This is a basic example, you actually have to test readyState status. If i remember well, it is also safer to set the event function before sending the request (not really sure of that).
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
//do something with this.responseText
}
};
xhr.open("POST", url, true);
xhr.send();
EDIT:
This is one of the reasons why i use frameworks, for the old browser support, but this is not an answer. To be more precise, in the past (present?), browsers used to implement exotic functions. It's been a long time i didnt bother to use XHR objects directly, last time it was for file uploads with loading bar (canvas). It shows you the basic way to handle some stuff. This is longer and a bit old fashioned, but well, it works.
function customXHR(){
if(window.XMLHttpRequest){
return new window.XMLHttpRequest;
}else{
try{ //the weird ones
return new ActiveXObject("MSXML2.XMLHTTP.3.0");
}
catch(ex){
return null;
}
}
}
var xhr = customXHR(), pleaseStop = false, startDraw = false;
if(xhr){
xhr.addEventListener('load', function(e){
var jsonRep;
if(!pleaseStop){
//did use a JSON response
jsonRep = $.parseJSON(e.target.responseText);
//do the rest, we finished
}
}, false);
xhr.addEventListener('error', function(e){
//error
pleaseStop = true;
}, false);
xhr.upload.addEventListener('progress', function(e){
//why not let this as an example!
//file_size must be retreive separately, i fear
if(e.lengthComputable && file_size > 0 && !pleaseStop && startDraw){ draw_progress(e.loaded / file_size); }
}, false);
xhr.addEventListener('loadstart', function(e){
//can be used too
}, false);
xhr.addEventListener('readystatechange', function(e){
if(e.target.status == 404 && !pleaseStop){
//error not found
pleaseStop = true;
}
if(e.target.readyState == 2 && e.target.status == 200){
startDraw = true;
}
/*if(e.target.readyState == 4){
//not used here, actually not exactly the same as 'load'
}*/
}, false);
xhr.open("POST", url, true);
xhr.send();
} //else no XHR support
I'm using an ajax script to show a loading animation in an iframe while a php script runs. Once the php script finishes running the ajax loading script loads the finished php scripts output.
Update: I have resolved this by replacing:
url='action.php?run=go';
http.open("GET",url, true);
with:
http.open( "GET", "go.php?random=" + Math.random(), true);
I read that IE caches each request and doesn't like sending the requests more than once.
<!DOCTYPE html>
<script type="text/javascript">
document.write('<link rel="stylesheet" href="../css/loading.css" type="text/css" /><div id="loading"><br><center>Please Wait...<br><br><img src="loader.gif"/><center></div>');
//Ajax Function
function getHTTPObject() {
var xmlhttp;
if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
} else {
xmlhttp = false;
}
if (window.XMLHttpRequest) {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
//HTTP Objects..
var http = getHTTPObject();
//Function which we are calling...
function AjaxFunction() {
url = 'action.php?run=go';
http.open("GET", url, true);
http.onreadystatechange = function () {
if (http.readyState == 4) {
//Change the text when result comes.....
document.getElementById("loading").innerHTML = http.responseText;
}
}
http.send(null);
}
</script>
</head>
<body onload="AjaxFunction()">
</body>
Try the xmlhttp = new XMLHttpRequest(); stuff before you test for the ActiveXObject. The latter is used for compatibility with older versions of IE (IE 5 & 6 I believe). However, newer versions of IE support the use of the XMLHttpRequest object. You might also try indenting properly to make your code readable.
Additionally, since you mentioned you're new to JS & AJAX, you really should look into using jQuery which makes using AJAX incredibly easy. I personally use jQuery as well as my own AJAX function, so, in practice, what you're doing is perfectly fine. But if you would rather do without the hassle then jQuery is the way to go.
Can you use jQuery? It has all the boiler plating for ajax you need in $.ajax
My whole page is loading again whenever I make a ajax call to load a div.
I have noticed that 'body onload=init()' onload event is getting triggered on ajax response and all the initialization is happening again. I don't want that to happen.
Is there a way by which only div is loaded through ajax call.
<body onload="init()">
.....
.....
<div>...<b>More</b></div>
</body>
main.js
function saveView(arg){
if(arg=="more"){
ajaxGet(baseRef+"all.html", loadList);
}else{
ajaxGet(baseRef+"all-A.html", loadList);
}
function init(){
.....
}
function ajaxGet(url, responseHandler)
{
var page_request = false;
if (window.XMLHttpRequest && !(window.ActiveXObject && window.location.protocol == "file:")) {
// use this only if available, and not using IE on a local filesystem
page_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // older versions of IE, or IE on a local filesystem
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
}
}
}
else {
alert("Your browser does not support XMLHTTP.");
return false;
}
page_request.onreadystatechange=function() {
if(page_request.readyState==4) {
// on local machines the status for success is 0. on web servers it is 200
if(page_request.status==200 || page_request.status==0) {
responseHandler(page_request);
}
}
}
page_request.open('GET', url, true);
page_request.send(null);
}
function loadList(page_request){
document.getElementById("list").innerHTML=page_request.responseText;
Loaded = true;
try{
if(pLoaded)
doFilterStateChange1();
}catch(e)
{
}
setTimeout("restoreScrollTop()", 1000);
}
It is not ajax that is triggering onLoad event of body.
If you see the anchor tag, I haven't assigned any value to href="" which was causing the page to be loaded again. Removing it solved the problem.
We'd need to see your code to help, but when pages do things like reloading etc, it usually means their is a script error. Use firebug to check for errors, it might be hard to catch if it's refreshing quickly.
Hey guys, this is driving me absolutely insane so I wanted to ask the experts on this site to see if you know how to do it =)
I'm trying to create some javascript code that can read out elements of a web page (eg. what does the first paragraph say?). Here's what I have so far, but it doesnt work and I cant figure out why:
<script type="text/javascript">
<!--
var req;
// handle onreadystatechange event of req object
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
//document.write(req.responseText);
alert("done loading");
var responseDoc = new DOMParser().parseFromString(req.responseText, "text/xml");
alert(responseDoc.evaluate("//title",responseDoc,null,
XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue);
}
else {
document.write("<error>could not load page</error>");
}
}
}
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", "http://www.apple.com", true);
req.send(null);
// -->
The alert that keeps appearing is "null" and I can't figure out why. Any ideas?
This may be due to cross domain restriction... unless you're hosting your web page on apple.com. :) You could also use jQuery and avoid writing all that out and/or dealing with any common possible cross-browser XML loading/parsing issues. http://api.jquery.com/category/ajax/
Update:
Looks like it may have something to do with the source web site's Content-Type or something similar... For example, this code seems to work... (Notice the domain loaded...)
var req;
// handle onreadystatechange event of req object
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
//document.write(req.responseText);
//alert("done loading");
//alert(req.responseText);
var responseDoc = new DOMParser();
var xmlText = responseDoc.parseFromString(req.responseText, "text/xml");
try{
alert(xmlText.evaluate("//title",xmlText,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue);
}catch(e){
alert("error");
}
}
else {
document.write("could not load page");
}
}
}
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", "http://www.jquery.com", true);
req.send(null);
I also tried loading espn.com and google.com, and noticed they both have "Content-Encoding:gzip" so maybe that's the issue, just guessing though.
After pressing a button, I'm sending the whole HTML content from a webpage (the part within the <html> tags) to a CGI script which manipulates the content and sends it back.
Now I'm trying to replace the existing content with the new one. Unfortunately after assignment, every single <head> or <body> tag (as well as the closing ones) will be killed.
By using some alerts I looked through the returning value as well as the original HTML stuff. Both are absolutely as expected.
But after the assignment there is some magic going on. Please help me to figure out what's going on.
Here is the used JavaScript code I used:
var originalBodyInnerHTML = document.body.innerHTML;
var htmlNode = document.getElementsByTagName('html')[0];
var post_parameters = encodeURIComponent(htmlNode.innerHTML);
makePOSTRequest("POST", "http://whatever.com/cgi-bin/doit.cgi", post_parameters, htmlNode);
function makePOSTRequest(method, url, parameters, htmlNode) {
var http_request = getRequestObj();
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function()
{
if (http_request.readyState < 4)
{
var waitingPageBody = '< img src="/img/ajaxloader.gif" alt="in progress..."/>';
document.body.innerHTML = waitingPageBody;
}
else //if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
alert('1response: ' + http_request.responseText);
alert('2innerhtml: ' + document.getElementsByTagName('html')[0].innerHTML);
document.getElementsByTagName('html')[0].innerHTML = http_request.responseText;
}//end of if (http_request.status == 200)
else
{//other http statuses
alert("There was a problem (" + http_request.statusText + ", " + http_request.status + ' error)');
bodyNode.innerHTML = originalBodyInnerHTML;
}
}//end of else if http_request.readyState == 4
}
http_request.open(method, url, true); //async
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Accept", "application/atom+xml,application/xml,text/xml");
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function getRequestObj() {
var http_request = false;
if (window.XMLHttpRequest)
{ // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/html');
}
}
else if (window.ActiveXObject)
{ // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
return http_request;
}
This is a simple solution that worked for me. Just as a reference.
document.clear();
document.write(newHtml);
where newHtml is the complete html of new web page.
well, with this
document.getElementsByTagName('html')[0].innerHTML = http_request.responseText
you are replacing everything insidee the html, "killing" body, head and everything...
maybe you wanted
document.body.innerHTML = http_request.responseText
Also, I'd use jquery, it makes your life sooo much easier
You cannot do that. It's not possible to replace the contents of the whole html tag. You can get away with replacing only the contents of the body tag. The head element is kind of magical and browser generally don't support replacing it.
If you want to change the whole document, redirect to it.
If you want to change only parts of the head, try sending them in a different form (like JSON), and make appropriate changes using javascript APIs.
Thanks qbeuek for your answer!
To change only the header, Firefox in fact will allow something like this:document.getElementsByTagName('head')[0] += "e.g. some scripts"
But for Internet Explorer it is necessary to add each element separately to the DOM tree.
var script = document.createElement("script");
script.setAttribute('type','text/javascript');
objHead.appendChild(script);
However, it is really weird that Firefox behaves like this and not popup with some error...