가능한 PHP/Javascript 경쟁 조건

Question

저는 웹 프로그래밍에 비교적 익숙합니다. Javascript, PHP, Ajax 등을 처음 접했습니다. Google에서 잠시 동안이 문제에 대한 겉으로보기에는 간단한 해결책을 찾고 있었지만 포기했습니다. 경쟁 조건이 있다고 생각하지만 경쟁 조건과 PHP 및 Javascript와 관련된 모든 사항은 사안별로 솔루션이있는 것 같습니다.

다음은 설정입니다. 테이블을 출력하는 PHP 페이지가 있습니다. 테이블 중 하나에있는 행 중 하나에서 셀을 추가 테이블로 채 웁니다. 그것은 5 셀을 가지고 있으며, 기계의 wifi 카드의 신호 강도를 반영하도록 셀의 색상을 변경하고 싶습니다 (현재 두 장의 카드 만 있습니다). 따라서 테이블이 채워지고 셀의 ID가 설정되면 cat/proc/net/wireless에 다른 PHP 코드를 게시하고 호출 한 카드의 신호 강도를 반환하는 javascript 함수를 호출합니다. .

문제 : 무선 카드를 구문 분석하고 셀 ID를 가져 와서 한 카드에 적합한 색상을 설정하는 PHP 코드와 JavaScript. 그러나 PHP에서 태그 내에서 Javascript 함수를 호출하면 마지막 호출 만 수행합니다. 첫 번째는 아무 것도하지 않는 것 같습니다.

내가 완전히 난처한 상황에 빠진거야, 내 모든 Google 검색 조건을 소진 ...

PHP 코드 :

<?php include('assets/header.inc.php'); ?> 
<script type="text/javascript" src="<?php echo _JS_?>/ajax_home_display.js"></script> 
<div id="cm_body" onload="return false"> 
    <?php 
     $ap_intf = rtrim(shell_exec("cat /tmp/config | grep AP_DEV | cut -d'=' -f2")); 
     $mesh_intf = rtrim(shell_exec("cat /tmp/config | grep MESH_DEV | cut -d'=' -f2")); 
     $uptime = rtrim(shell_exec("uptime | awk '{print $3}' | cut -d',' -f1")); 

    function display_status_intf($intf, $name) 
    { 
     global $uptime; 
     $packet_success = "100%"; 

     echo " 
     <tr> 
     <td style=\"font-size:14px; font-weight:bold;\"><pre>$intf [$name]</pre></td> 
     <td id=\"sig_status_$intf\"> 
     <table id=\"intf_status\" class = \"list\" cellpadding=10> 
     <td id=\"sig_st_1_$intf\"></td> 
     <td id=\"sig_st_2_$intf\"></td> 
     <td id=\"sig_st_3_$intf\"></td> 
     <td id=\"sig_st_4_$intf\"></td> 
     <td id=\"sig_st_5_$intf\"></td> 
     </table> 
     <td><pre>$uptime</pre></td></td> 
     <td style=\"text-align:center;\"><pre id=\"packet_success_$intf\">$packet_success</pre></td> 
     </tr> 
     <script>update_interface('$intf')</script> 
     "; 

    } 

     // Make a table 
     echo "<table class=\"list\" cellpadding=1>"; 
     echo "<tr><th>Interface</th><th>Signal Status</th><th>Uptime</th><th>Packet success</th></tr>"; 
      // Make a row on the table for the first wifi card (wifi0) 
      if ($ap_intf) 
       display_status_intf($ap_intf, "AP"); 

     // Add a blank row 
     echo "<tr><td colspan=\"7\" height=\"30px\"></td></tr>"; 
      // Make a row on the table for the second wifi card (wifi1) 
      if ($mesh_intf) 
       display_status_intf($mesh_intf, "Mesh"); 

     echo "</table>"; 
    ?> 
</div> 
<?php include('assets/footer.inc.php'); ?> 

자바 스크립트 코드 :

THRESH1 = -60; 
    THRESH2 = -55; 
    THRESH3 = -50; 
    THRESH4 = -45; 

    function update_interface(intf) 
    { 
     xmlhttpPost("run_interface_status.php","intf="+intf,interface_stat_response); 
    } 

    function interface_stat_response(strQuery,strResponse) 
    { 
     var sig_st = []; 

     // Trim response 
     var test_return = strResponse; 
     var intface = strQuery.split("="); 
     var intf = intface[1]; 

     // Get cell ID's, put in an array sig_st 
     for (i=1;i<=5;i++) 
      sig_st[i] = document.getElementById("sig_st_"+i+"_"+intf); 
     // Reset all colors to default 
     for (i=1;i<=2;i++) 
      sig_st[i].setAttribute("style", "background-color:transparent"); 

     if (test_return != "err") { 
      // Set all colors based on the wifi strength 
      sig_st[1].setAttribute("style", "background-color:red"); 

      if (test_return > THRESH1) 
       sig_st[2].setAttribute("style", "background-color:orange"); 
      if (test_return > THRESH2) 
       sig_st[3].setAttribute("style", "background-color:yellow"); 
      if (test_return > THRESH3) 
       sig_st[4].setAttribute("style", "background-color:green"); 
      if (test_return > THRESH4) 
       sig_st[5].setAttribute("style", "background-color:green"); 
     } 
    } 

아약스 무거운 (중요한 경우)

function xmlhttpPost(strURL,strQuery,responseFunc) 
    { 
     var xmlHttpReq = false; 
     var self = this; 
     // Mozilla/Safari 
     if (window.XMLHttpRequest) { 
      self.xmlHttpReq = new XMLHttpRequest(); 
     } 
     // IE 
     else if (window.ActiveXObject) { 
      self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     self.xmlHttpReq.open('POST', strURL, true); 
     self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
     self.xmlHttpReq.onreadystatechange = function() { 
      if (self.xmlHttpReq.readyState == 4) { 
       responseFunc(strQuery,self.xmlHttpReq.responseText); 
      } 
     } 
     self.xmlHttpReq.send(strQuery); 
    } 

    function trim(s) 
    { 
     s = s.replace(/(^\s*)|(\s*$)/gi,""); 
     s = s.replace(/[ ]{2,}/gi," "); 
     s = s.replace(/\n /,"\n"); 
     return s; 
    } 

몇 가지 추가 정보 : Firebug는 두 개의 게시물이 각각 정확한 값을 반환한다는 것을 보여주기 때문에 경쟁 조건이라고 생각하지만 응답 함수 (interface_stat_response())의 시작 부분에 중단 점을 배치하면 Firebug 만 후자의 $ intf 및 $ strength 변수 (wifi1의 항목)로 한 번 떨어집니다.

또한 일반적인 포인터가 좋습니다.

JQuery와 포스트 방법, 당신의 AJAX 무거운 교체 시도 ... 3

Answer 1

모두를 검토 한 결과, 제공 할 수있는 최선입니다 : 나는 코드가 꽤 아니라는 것을 알고,하지만 난 더 나은 싶어 http://api.jquery.com/jQuery.post/

jQuery가 필요하지만 시도하기 쉽고 수정해야 할 수도 있습니다.

jQuery는 AJAX/JS를 다루는 데 매우 유용한 도구입니다.

AJAX에서 문제가 발생하면 문제가 해결됩니다.

Answer 2

jquery이 표시되지 않습니다. Jquery는 일을보다 쉽게 ​​업데이트 할 수있는 아름다운 .live() 메서드를 사용합니다. 내가 언급 한 이유는 다음과 같습니다.

document.getElementById("sig_st_"+i+"_"+intf) 

이는 모두 나쁜 습관입니다. css classes을 사용하여 다른 설정을 식별하고 다른 값에 따라 연결하십시오.

나는 경쟁 조건에 대해 당신이 맞다고 생각합니다.나는 지금 당신의 코드를 테스트 할 능력이 없다. jquery없이 일을하고 싶다면 js가 PHP 로딩을 기다리는 지 확인해야 할 것이다. 당신이 정말로 이런 식으로하고 싶다면, 내가하는 한 가장 나쁜 방법은 while 루프가 필요할 것입니다. while 루프에서 요소가 존재할 때까지 요소가 존재하는지 확인한 다음 돌아 서서 설정하십시오.

클래스로 바꾸면 ID로 채색하는 대신 결과가 훨씬 간단하고 훨씬 매끄러 워집니다.

**이 게시물을 게시하지 않지만 사람들이 설명을 요청했습니다.