Передача ответа от нескольких XMLHttpRequests в div - PullRequest
1 голос
/ 12 января 2012

Я запрашиваю базу данных PostGIS в зависимости от того, где пользователь нажимает на карту Google. Затем я анализирую ответ JSON в информационном окне googleMaps. Это работало отлично, но теперь я хотел бы запросить несколько URL-адресов и использовать эти ответы для заполнения информационного окна. Ниже приведен пример функций, которые я использовал, которые прекрасно работают. Примечание: пожалуйста, не обращайте внимания на предоставленную ссылку, так как я только что составил ее для этого примера.

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-запросов и передать эти ответы одной и той же функции fillWithClicked, которая заполняет информационное окно?

Код ниже, очевидно, неверен, но может лучше объяснить, что я пытаюсь сделать, то есть несколько URL-адресов и заполнение информационного окна ответом на два URL-запроса. Иногда это работает, но совершенно неправильно

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 ]

1 голос
/ 16 января 2012

Я понял это.Ключом было использование 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);   
}
0 голосов
/ 13 января 2012

Если вы хотите, чтобы данные увеличивали ваш элемент, давайте попробуем что-то вроде этого:

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

Если вызовы вашей функции не находятся на одной странице, вам нужно использовать файл кэша и идентификатор пользователя (идентификатор сеанса, идентификатор cookie или 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
?>

Я надеюсь, что это может помочь вам или привести вас к решению.

РЕДАКТИРОВАТЬ относительно ваших новых данных

Попробуйте что-то вроде этого (я облегчаю ваш код ...). При этом вы можете добавить столько URL, сколько хотите.

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);   
}

РЕДАКТИРОВАТЬ -> Внешние доменные файлы

httpRequest не работает с файлами в другом домене. Вы можете использовать одно из этих решений, я могу использовать второе для меня.

PHP Solution

// 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;         
      });
  }
  • скачать библиотеку jquery http://code.jquery.com/jquery-1.7.1.min.js
  • включите плагин jquery в заголовок вашей страницы с <script src="jquery-1.7.1.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...