Ajax via post traag op IE 6

[Mr_Groovy]

Hoi mensen ik heb nu een paar uur loopen googlen maar kom er echt niet uit voor een oplossing.

Ik heb dit test script overgenomen van een website:

ajax pagina

code:

<script type="text/javascript" language="javascript">
var http_request = false;
function makePOSTRequest(url, parameters) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
     http_request = new XMLHttpRequest();
     if (http_request.overrideMimeType) {
        // set type accordingly to anticipated content type
        //http_request.overrideMimeType('text/xml');
        http_request.overrideMimeType('text/html');
     }
  } else if (window.ActiveXObject) { // IE
     try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
     } catch (e) {
        try {
           http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
     }
  }
  if (!http_request) {
     alert('Cannot create XMLHTTP instance');
     return false;
  }
  http_request.open('POST', url, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
  http_request.onreadystatechange = alertContents;
}

function alertContents() {
  if (http_request.readyState == 4) {
    alert('state=4');
     if (http_request.status == 200) {
        //alert(http_request.responseText);
        result = http_request.responseText;
        document.getElementById('myspan').innerHTML = result;
        alert('done');
     } else {
        alert('There was a problem with the request.');
     }
  }
  if(http_request.readyState == 3)
  {
    alert('state=3');
  }
}

function get(obj) {
  var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
                "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
  makePOSTRequest('post.php', poststr);
}
</script>


<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<textarea id="mytextarea1">my test
1
2
3
</textarea>
<textarea id="mytextarea2">my test2
4
5
6</textarea>
<br>
<input type="button" name="button" value="Submit" 
   onclick="javascript:get(this.parentNode);">
<input type="submit" name="button" value="Normal Submit Button">
</form>

<br><br>
Server-Response:<br>
<hr>
<span name="myspan" id="myspan"></span>
<hr>

en de post.php

code:

<?
print_r($_POST);
?>

Copy Paste gerust om het zelf uit te testen.

Dit script werkt perfect op IE7, FF, etc. Maar op ie6 duurt het enkele seconden voordat de pagina verandered. Na wat alerts er hebben in gestopt kwam ik erachter dat ie6 er lang overdoet van:
http_request.readyState=3 naar http_request.readyState=4 te gaan.

Aantal dingen die ik misschien over het hoofd heb gezien:

*Verkeerde ActiveXObject.
*Verkeerde header via http_request.setRequestHeader.

Get ipv Post gebruiken is geen optie, omdat het gaat over grote lappen text die ik wil versturen over post, en get een string limit heeft. En het moet echt onder IE6 werken, omdat de opdrachtgever daar onder werkt

[Bozozo]

Ik maak het object met dit scriptje:

JavaScript:

function newXMLHTTPObject() {
  var xmlHttp = null;
  try {
    xmlHttp=new XMLHttpRequest();
  }
  catch (e) {
    try {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  return xmlHttp;
}

Dus iets andere objecten. Hiermee heb ik nog nooit problemen met IE ondervonden.

[drm]

Ik zou beginnen met de Content-length headers eruit te halen. Kijken wat dat doet. 't Kan best eens zijn dat IE 6 aanklooit met de lengte van de string als er bijvoorbeeld newlines ofzo in voorkomen. De traagheid zit 'm dan niet in de browser maar in de respons van de server.

edit:
a propos, je kunt ook escape() gebruiken ipv (je ws. eigengebakken encodeURI)

[ Voor 18% gewijzigd door drm op 27-01-2008 22:26 ]

[Mr_Groovy]

code:

if (window.XMLHttpRequest) { // Mozilla, Safari,...
     http_request = new XMLHttpRequest();
     if (http_request.overrideMimeType) {
        // set type accordingly to anticipated content type
        //http_request.overrideMimeType('text/xml');
        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) {}
     }
  }

Ook geprobeerd maar helpt niet nog steeds traag. Volgens mij gebruikte ik eerst die ook, maar tussen tijds verandered om te kijken naar een oplossing.

[H004]

drm schreef op zondag 27 januari 2008 @ 22:24:

edit:
a propos, je kunt ook escape() gebruiken ipv (je ws. eigengebakken encodeURI)

encodeURI

Heb even zitten testen, vervang je eigen XMLHttpRequest-functie voor die van Bozozo en haal vervolgens

code:

http_request.setRequestHeader("Content-length", parameters.length);

weg uit je script. Dan is t probleem opgelost.

[ Voor 27% gewijzigd door H004 op 28-01-2008 00:05 ]

[Mr_Groovy]

Ik heb de boos doener gevonden...

code:

http_request.setRequestHeader("Connection", "close");

Toen ik deze uit het script verwijderde was het instant met IE6. Geen idee waarom

Heb je close wel nodig normaal gesproken

[Bosmonster]

Waarom zou je de verbinding (handmatig) sluiten? Laat de browser dat lekker zelf afhandelen, tenzij het echt application-critical is (wat ik me eigenlijk niet kan voorstellen, de browser is prima capabel zelf z'n connectie-pool te beheren )

[ Voor 29% gewijzigd door Bosmonster op 28-01-2008 09:59 ]

[crisp]

H004 schreef op zondag 27 januari 2008 @ 23:44:
[...]

encodeURI

Inderdaad, encodeURI is gewoon een standaard javascript method, hoewel in dit geval encodeURIComponent beter geschikt is

escape() is nutteloos want niet RFC-compliant.

Wel 1 algemene opmerking:

code:

action="javascript:get(document.getElementById('myform'));"

dat is toch wel heel erg ranzig. Je Ajax-functionaliteit zou een aanvulling moeten zijn op de standaard non-JS-afhankelijke functionaliteit. Het concept 'unobtrusive' wordt hier behoorlijk verkr*cht...

[ Voor 36% gewijzigd door crisp op 28-01-2008 10:21 ]

[Mr_Groovy]

Wel 1 algemene opmerking:

code:

action="javascript:get(document.getElementById('myform'));"

dat is toch wel heel erg ranzig. Je Ajax-functionaliteit zou een aanvulling moeten zijn op de standaard non-JS-afhankelijke functionaliteit. Het concept 'unobtrusive' wordt hier behoorlijk verkr*cht...

Zoals ik al zei het is een web voorbeeld van http://www.captain.at/howto-ajax-form-post-request.php.

Mij ging het meer om ajax te voor zien van post. Dit was een eenvoudig voorbeeld om vast te stellen dat zijn script on ie6 traag is (wat nu verholpen is).
In mijn script zie je door de bomen het bos niet meer. Moet dan ook snel als het af is even goed opruimen

*edit Misschien kan je het concept "unobtrusive" toe lichten? Ik heb mezelf ajax, html, php, javascript endergelijke dingen aan geleerd, maar dat ben ik nog nooit tegen gekomen. Ben geintresseerd

[ Voor 12% gewijzigd door Mr_Groovy op 28-01-2008 11:37 ]

[H004]

Unobtrusive betekent in grote lijnen dat Javascript een toevoeging is op een pagina, en niet meer dan dat. De pagina gewoon perfect werken als Javascript uitstaat. Staat Javascript aan bij de gebruiker, dan kan de gebruiker beschikken over meer functionaliteit.

Gebruik bv. de Developer Toolbar voor Firefox. Daarbij kan je op het tabblad "disable" makkelijk javascript aan en uit zetten. dan kan je makkelijk testen hoe je pagina functioneert als een gebruiker geen Javascript aan heeft staan.