Ajax function runs only once

Question

I'm trying to make a web page that gets an email header from user. when a user clicks a button to analyse the page sees the code and finds out source ip addresses from the header of the email. then this web page queries to freegeoip.com with the number of ip addresses that are extracted.

here is the problem. no matter how many ip addresses i got from an email header, my code only runs the ajax function one time, then no requests anymore.

could you help me with this please?

 var myLatlngArray; function iAnalyse() { //document.getElementById("result").innerHTML //document.getElementById("headerValue").value; var lines = document.getElementById("headerValue").value.split('\\n'); var ipAddrs = []; var cnt=0; for(i=0; i<lines.length; i++) { if(lines[i].startsWith("Received: from")) { ipAddrs[cnt++]=ipAddr=lines[i].substring(lines[i].lastIndexOf("[")+1,lines[i].lastIndexOf("]")); } } myLatlngArray=new Array(cnt); for(j=0;j<cnt;j++) getIPaddress(ipAddrs[j]); //alert(ipAddrs.length); } //http://stackoverflow.com/questions/646628/how-to-check-if-a-string-startswith-another-string if (typeof String.prototype.startsWith != 'function') { // see below for better implementation! String.prototype.startsWith = function (str){ return this.indexOf(str) == 0; }; } var xHRObject = false; if (window.XMLHttpRequest) { xHRObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { xHRObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getIPaddress(ipAddrs) { xHRObject.open("GET", "http://freegeoip.net/json/"+ipAddrs+"?t=" + Math.random(),true); xHRObject.onreadystatechange = getData; xHRObject.send(null); } var aList=0; function getData() { if ((xHRObject.readyState == 4) && (xHRObject.status == 200)) { if (window.XMLHttpRequest) { alert("abc"); //codes here should be run as many as the number of cnt in iAnalyse function, but it is called only once.. var jsonObj = JSON.parse(xHRObject.responseText); myLatlngArray[aList]=new Array(2); myLatlngArray[aList][0]=jsonObj.latitude; myLatlngArray[aList][1]=jsonObj.longitude; aList++; xHRObject = new XMLHttpRequest(); //google.maps.event.addDomListener(window, 'load', initialize()); } } }

 <!DOCTYPE html> <html> <head> <title>TEST</title> <script src="analyse.js"></script> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #googleMap { width:1000px; height:500px; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> </head> <body> <p>IT Security &nbsp;&nbsp;&nbsp;<button onclick="iAnalyse()">Analyse it!</button> </p> <textarea id="headerValue" rows="10" cols="140">Past your email header here.</textarea> <p><div id="googleMap"></div></p> </body> </html>

You can use the following code for test email header to put in the textarea.

`Delivered-To: xxxxxxx@gmail.com
Received: by 10.216.7.2 with SMTP id 2csp890396weo;
        Sat, 13 Sep 2014 10:51:53 -0700 (PDT)
X-Received: by 10.236.230.70 with SMTP id i66mr19664921yhq.26.1410630711344;
        Sat, 13 Sep 2014 10:51:51 -0700 (PDT)
Return-Path: <eBay@ebay.com.au>
Received: from iflip4 ([108.166.68.249])
        by mx.google.com with ESMTPS id 24si1044060yhd.26.2014.09.13.10.51.49
        for <multiple recipients>
        (version=TLSv1.2 cipher=ECDHE-RSA-AES128-GCM-SHA256 bits=128/128);
        Sat, 13 Sep 2014 10:51:51 -0700 (PDT)
Received-SPF: permerror (google.com: permanent error in processing during lookup of eBay@ebay.com.au) client-ip=108.166.68.249;
Authentication-Results: mx.google.com;
       spf=permerror (google.com: permanent error in processing during lookup of eBay@ebay.com.au) smtp.mail=eBay@ebay.com.au;
       dmarc=fail (p=NONE dis=NONE) header.from=ebay.com.au
Message-Id: <54148437.a401ec0a.35e9.ffffe2e6SMTPIN_ADDED_MISSING@mx.google.com>
Received: from [194.1.180.85] (port=12990 helo=User)
  by iflip4 with esmtpa (Exim 4.82)
  (envelope-from <eBay@eBay.com.au>)
  id 1XRT9o-0006MC-PP; Tue, 09 Sep 2014 21:41:02 +0000
From: "PayPal"<eBay@eBay.com.au>
`

Answer 1

Your code had a few problems, the closure actually wasn't one. But you actually had a single xhr request you used for all your requests, that doesn't work out. You need to create a new instance of the XMLHttpRequest for every request. That should solve it :)

By moving the response handler function in the scope of your request function you can access the original xhr request through the closure generated.

(btw I'm not sure if I normalized the XMLHttpRequest Interface correctly for microsofts "thing", it's basically just a guess.)

var myLatlngArray;

function iAnalyse(){
  var lines = document.getElementById("headerValue").value.split('\n');
  var ipAddrs = [];
  var cnt=0;

  for(i=0; i<lines.length; i++){
    if(lines[i].startsWith("Received: from")){
        ipAddrs[cnt++]=ipAddr=lines[i].substring(lines[i].lastIndexOf("[")+1,lines[i].lastIndexOf("]"));
    }
  }
  myLatlngArray=new Array(cnt);
  for(j=0;j<cnt;j++){
    getIPaddress(ipAddrs[j]);
  }
}
if (typeof String.prototype.startsWith != 'function') {
  String.prototype.startsWith = function (str){
    return this.indexOf(str) == 0;
  };
}
window.XMLHttpRequest=XMLHttpRequest||function(){
  return ActiveXObject&&ActiveXObject("Microsoft.XMLHTTP")
};


function getIPaddress(ipAddrs){
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://freegeoip.net/json/"+ipAddrs+"?t=" + Math.random(),true);
  xhr.onreadystatechange = getData;
  xhr.send(null);

  function getData(){
    if(xhr.readyState == xhr.DONE && xhr.status == 200){
      var jsonObj = JSON.parse(xhr.responseText);
      myLatlngArray[aList]=new Array(2);
      myLatlngArray[aList][0]=jsonObj.latitude;
      myLatlngArray[aList][1]=jsonObj.longitude;
      aList++;
    }
  }
}

var aList=0;

Answer 2

If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task.

http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

Try something like this:

function createXhr(){
  var xHRObject = false;
  if (window.XMLHttpRequest) {
    xHRObject = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xHRObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xHrObject;
}

and then you can:

function getIPaddress(ipAddrs) {
  var xHRObject = createXhr();
  ...
}

and:

function getData(event){
  var xHrObject = event.target;
  ...
}

If you are concerned about CORS, you might want to try something like this:

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE 9 and earlier.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

source: http://docs.webplatform.org/wiki/apis/xhr/XMLHttpRequest

Ajax function runs only once

Question

2 answers

solution1
1 2014-09-26 15:34:41

solution2
1 ACCPTED 2014-09-26 15:52:18

Ajax function runs only once

Question

2 answers

solution1 1 2014-09-26 15:34:41

solution2 1 ACCPTED 2014-09-26 15:52:18

solution1
1 2014-09-26 15:34:41

solution2
1 ACCPTED 2014-09-26 15:52:18