将多个XMLHttpRequests的响应传递给div

时间：2012-01-11 22:07:45

标签： javascript ajax google-maps xmlhttprequest

我根据用户点击谷歌地图的位置查询PostGIS数据库。然后我将JSON响应解析为googleMaps infoWindow。这一直很好，但我现在想查询多个网址并使用这些响应填写infoWindow。下面是我使用过的功能很好的一个例子。注意：请忽略我提供的网址，因为我刚刚为此示例做了补充。 

var clickLoc;

function queryAct(event){
clickLoc=event.latLng;  
var clickLat=clickLoc.lat();
var clickLng=clickLoc.lng();
var loUrl = 'http://www.myspatialdataset.com/sql/?q=select%20ownercateg%20from%20stew_owners%20where%20ST_Intersects%28the_geom,%20ST_GeomFromText%28%27POINT%28'+clickLng+'%20'+clickLat+'%29%27,4326%29%29';  
if (window.XMLHttpRequest) { // Non-IE browsers
  req = new XMLHttpRequest();
  req.onreadystatechange = clickResponse;
  try {
    req.open("GET", loUrl, true);
  } catch (e) {
    alert(e);
  }
  req.send(null);
} else if (window.ActiveXObject) { // IE
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
    req.onreadystatechange = clickResponse;
    req.open("GET", loUrl, true);
    req.send();
  }
}

} 

function clickResponse(){                               
    if (req.readyState == 4) { // Complete
      if (req.status == 200) { // OK response                     
          var clickPingBack = JSON.parse(req.responseText);
          var loResponse = clickPingBack;
          if (loResponse.rows.length>0)
          {
            var loResponseParsed=loResponse.rows[0].ownercateg;
            fillWithClicked(loResponseParsed);
          }
          else
          {
              var loResponseParsed=' other';
              fillWithClicked(loResponseParsed);                                                                      
          }         
      }
}
}

var infowindow = new google.maps.InfoWindow;

function fillWithClicked(loResponseParsed){ 
infowindow.setContent(loResponseParsed);
infowindow.setPosition(clickLoc);
infowindow.open(map);   
}

我现在如何为多个url请求执行此操作并将这些响应传递给填充infoWindow的相同fillWithClicked函数？

下面的代码显然是错误的，但可以更好地解释我想要做的事情，即多个URL并使用来自两个url请求的响应填充infoWindow。这有时可行但完全错误

var clickLoc;

function distQueryAct(event){
clickLoc=event.latLng;  
var clickLat=clickLoc.lat();
var clickLng=clickLoc.lng();
var distUrl = 'http://www.myspatialdataset.com/sql/?q=select%20district%20from%20mt_elk%20where%20ST_Intersects%28the_geom,%20ST_GeomFromText%28%27POINT%28'+clickLng+'%20'+clickLat+'%29%27,4326%29%29';  
if (window.XMLHttpRequest) { // Non-IE browsers
  distReq = new XMLHttpRequest();
  distReq.onreadystatechange = loQueryAct(clickLoc);
  try {
    distReq.open("GET", distUrl, true);
  } catch (e) {
    alert(e);
  }
  distReq.send(null);
} else if (window.ActiveXObject) { // IE
  distReq = new ActiveXObject("Microsoft.XMLHTTP");
  if (distReq) {
    distReq.onreadystatechange = loQueryAct(clickLoc);
    distReq.open("GET", distUrl, true);
    distReq.send();
  }
}
}

function loQueryAct(clickLoc){
var clickLat=clickLoc.lat();
var clickLng=clickLoc.lng();
var loUrl = 'http://www.myspatialdataset.com/sql/?q=select%20ownercateg%20from%20stew_owners%20where%20ST_Intersects%28the_geom,%20ST_GeomFromText%28%27POINT%28'+clickLng+'%20'+clickLat+'%29%27,4326%29%29';  
if (window.XMLHttpRequest) { // Non-IE browsers
  loReq = new XMLHttpRequest();
  loReq.onreadystatechange = distClickResponse;
  try {
    loReq.open("GET", loUrl, true);
  } catch (e) {
    alert(e);
  }
  loReq.send(null);
} else if (window.ActiveXObject) { // IE
  loReq = new ActiveXObject("Microsoft.XMLHTTP");
  if (loReq) {
    loReq.onreadystatechange = distClickResponse;
    loReq.open("GET", loUrl, true);
    loReq.send();
  }
}
}

function distClickResponse(){                               
    if (distReq.readyState == 4 && loReq.readyState == 4) { // Complete
      if (distReq.status == 200 && loReq.status == 200) { // OK response                      
          var distPingBack = JSON.parse(distReq.responseText);
          var distResponse = distPingBack;
          var loPingBack = JSON.parse(loReq.responseText);
          var loResponse = loPingBack;
          if (distResponse.rows.length>0)
          {
            var distResponseParsed=distResponse.rows[0].district;
          }
          else
          {
              var distResponseParsed=' other';
          } 
           if (loResponse.rows.length>0)
          {
            var loResponseParsed=loResponse.rows[0].ownercateg;             
          }
          else
          {
              var loResponseParsed=' other';                                                      
          }           
      }
      distFillWithClicked(loResponseParsed,distResponseParsed);                           
}
}

var infowindow = new google.maps.InfoWindow;

function distFillWithClicked(distResponseParsed,loResponseParsed){  
infowindow.setContent(distResponseParsed+loResponseParsed);
infowindow.setPosition(clickLoc);
infowindow.open(map);   
}

2 个答案:

答案 0 :(得分：1)

我明白了。使用getJSON而不是XMLHttpRequest是关键。我知道这可能更干净但它确实有效。 

var clickLoc;

function queryAct(event){
clickLoc=event.latLng;  
var clickLat=clickLoc.lat();
var clickLng=clickLoc.lng();    
var toFillArray=Array();
var loUrl='http://www.mypostgis.com/sql/?q=select%20ownercateg%20from%20stew_owners%20where%20ST_Intersects%28the_geom,%20ST_GeomFromText%28%27POINT%28'+clickLng+'%20'+clickLat+'%29%27,4326%29%29'; 
var distUrl='http://www.mypostgis.com/sql/?q=select%20district%20from%20mt_elk%20where%20ST_Intersects%28the_geom,%20ST_GeomFromText%28%27POINT%28'+clickLng+'%20'+clickLat+'%29%27,4326%29%29';   
$.getJSON(loUrl,function(tmpLoDat){     
    if (tmpLoDat.rows.length>0)
    {
        var tempCat=tmpLoDat.rows[0].ownercateg;        
        toFillArray.push(tempCat);
    }
    else
    {
        var tempCat='other';
        toFillArray.push(tempCat);  
    }       
    otherFunction(toFillArray,distUrl);
    })                  
}

function otherFunction(toFillArray,distUrl){
$.getJSON(distUrl,function(tmpDistDat){
    if (tmpDistDat.rows.length>0)
    {
        var tempDist=tmpDistDat.rows[0].district;
        toFillArray.push(tempDist);
    }
    else
    {
        var tempDist='Other';
        toFillArray.push(tempDist);
    }
    fillWithClicked(toFillArray);
    })      
}



var infowindow = new google.maps.InfoWindow;

function fillWithClicked(toFillArray){ 
infowindow.setContent(toFillArray[0]+toFillArray[1]);
infowindow.setPosition(clickLoc);
infowindow.open(map);   
}

答案 1 :(得分：0)

如果您希望数据增长您的元素，让我们尝试类似的东西：

function fillWithClicked(loResponseParsed){ 
document.getElementById("regulations").innerHTML += loResponseParsed;
}

如果您的函数调用不在同一页面中，则需要使用缓存文件和user_id（会话ID，cookie ID或IP地址......）：

// js & jquery for example
function fillWithClicked(loResponseParsed,user_id)
{ 
    $.post('cachecreate.php',{content:loResponseParsed,user_id:user_id},
      function() 
      {
        $.get('cachefile_'+user_id+'.html', 
          function(data)
          {
            document.getElementById("regulations").innerHTML=data;
          });
      });
}

// cachecreate.php for example
<?php
$cache = "cachefile_".$_POST['user_id'].".html";
ob_start();
if(file_exists($cache))
{
  include($cache);//or readfile(); i forgot...
  echo "<hr/>".$_POST['content'];// Strip <hr/> for JSON
}
else
{
  echo $_POST['content'];
}
$page_content=ob_get_contents();// if JSON needed : json_encode($page_content);
ob_end_clean();
file_put_contents($cache, $page_content);// PHP 5+ function
?>

我希望它可以帮助您，或者让您找到解决方案。

关于您的新细节的编辑

尝试这样的事情（我减轻你的代码...）。 有了它，您可以根据需要添加多个网址。

var clickLoc;

function queryAct(event)
{
    clickLoc=event.latLng;  
    var clickLat=clickLoc.lat();
    var clickLng=clickLoc.lng();
    var url=Array(); 
    var data=null;
    url['loUrl'] ="url1"; 
    url['distUrl'] ="url2"; 
    url['otherUrl'] ="urlx"; 
    for(page in url)
    {
        data+=getJSON(page);
    }
    fillWithClicked(data);
}

function getJSON(url)
{
    if (window.XMLHttpRequest)
    {req = new XMLHttpRequest();}// Non-IE
    else if (window.ActiveXObject) 
    {req = new ActiveXObject("Microsoft.XMLHTTP");}// IE
    if(req) 
    {     
      req.open("GET", url, true);
      req.send(null);
      req.onreadystatechange = function() {
        if(req.readyState == 4) 
        {
          if (req.status == 200) 
          { // OK response                     
              var clickPingBack = JSON.parse(req.responseText);
              var loResponse = clickPingBack;
              if (loResponse.rows.length>0)
              {
                var loResponseParsed=loResponse.rows[0].ownercateg;
              }
              else
              {
                  var loResponseParsed=' other';                                            
              }
              return loResponseParsed;         
          }
        }
      }
    }
}

var infowindow = new google.maps.InfoWindow;

function fillWithClicked(loResponseParsed)
{ 
    infowindow.setContent(loResponseParsed);
    infowindow.setPosition(clickLoc);
    infowindow.open(map);   
}

编辑 - ＆gt;外部域文件

httpRequest不适用于其他域中的文件。 您可以使用其中一种解决方案，我可以使用第二种解决方案。

PHP解决方案

// In your js file, change the urls like this
url['url_x'] ='myphppage.php?url=url_x_to_parse';

// myphpage.php script that displays the content of the external file
<?php
if(isset($_GET['url'])) {
    header("Content-type: text/json");
    echo file_get_contents(urldecode($_GET['url']));
}
?>

JQUERY解决方案（更好的解决方案）

//更改getJSON函数的名称，因为jquery使用相同的名称... 

  function getURLcontent(url)
  {
     $.get(url,function(data){
          var clickPingBack = JSON.parse(data.responseText); 
          var loResponse = clickPingBack;
          loResponse=data;
          if (loResponse.rows.length>0)
          {
            var loResponseParsed=loResponse.rows[0].ownercateg;
          }
          else
          {
              var loResponseParsed=' other';                                            
          }
          return loResponseParsed;         
      });
  }
相关问题
最新问题