Javascript / Ajax请求非常不稳定和随机

时间:2015-11-12 10:08:33

标签: javascript jquery html ajax

我一直在研究以下代码,并且在@squint的帮助下,我已经达到了可行的程度,但非常不稳定和随机。

使用@TomasZato建议编辑的代码

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
    <!--#include file="../Connections/DVerto.asp" -->
    <%
Dim Recordset1
Dim Recordset1_cmd
Dim Recordset1_numRows

Set Recordset1_cmd = Server.CreateObject ("ADODB.Command")
Recordset1_cmd.ActiveConnection = MM_DVerto_STRING
Recordset1_cmd.CommandText = "SELECT Part_Number FROM dbo.Stock_Header WHERE Part_Number like '84%'" 
Recordset1_cmd.Prepared = true

Set Recordset1 = Recordset1_cmd.Execute
Recordset1_numRows = 0
%>
    <%
    Dim Repeat1__numRows
    Dim Repeat1__index

    Repeat1__numRows = 10
    Repeat1__index = 0
    Recordset1_numRows = Recordset1_numRows + Repeat1__numRows
    %>
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>

    <body onLoad="loadDoc()">
    <table width="50%" border="0" cellspacing="2" cellpadding="2">
      <% 
    While ((Repeat1__numRows <> 0) AND (NOT Recordset1.EOF)) 
    %>
      <tr>
        <td class="prodref"><%=(Recordset1.Fields.Item("Part_Number").Value)%></td>
        <td class="demo">&nbsp;</td>
      </tr>
      <% 
      Repeat1__index=Repeat1__index+1
      Repeat1__numRows=Repeat1__numRows-1
      Recordset1.MoveNext()
    Wend
    %>
    </table>
    <script>
    // This creates array of elements with requested class name - eg. [HTMLElement, HTMLElement ...]
var elements = document.getElementsByClassName("prodref");
var outputElements = document.getElementsByClassName("demo");
// Allways check if there is correct number of demo elements to print loaded data in
if(elements.length != outputElements.length) {
    console.error("The number of prodref and demo elements is not the same!");
}
// Loop through both arrays of elements and make AJAX request for every one of them
for (var i=0, length=elements.length; i < length; i++) {
    loadDoc(elements[i], outputElements[i]);
}

function loadDoc(element, demoElement) {
    console.log("creating loadDoc() call for element", element);

    var xhttp = new XMLHttpRequest();
    var url = "data.asp?prodref="+element.innerHTML;
    // Onload calls if request was successful
    xhttp.onload = function() {
       console.log("loadDoc() call for element", element, "succeeded");
       demoElement.innerHTML = xhttp.responseText;
    };
    // Error calls if there is an error
    xhttp.onerror = function() {
        console.error("There was some problem with the request for element",element," with url '", url, "', check the Net debug panel.");
    }
    // Do not make sync requests, that makes page lag. Just DON'T!!!
    xhttp.open("GET", url, false);
    xhttp.send();
}
    </script>

    </body>
    </html>
    <%
    Recordset1.Close()
    Set Recordset1 = Nothing
    %>

代码(Data.asp)

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="../Connections/PSCRM.asp" -->
<%
Dim rs_proditem__MMColParam
rs_proditem__MMColParam = "1"
If (Request.QueryString("prodref") <> "") Then 
  rs_proditem__MMColParam = Request.QueryString("prodref")
End If
%>
<%
Dim rs_proditem
Dim rs_proditem_cmd
Dim rs_proditem_numRows

Set rs_proditem_cmd = Server.CreateObject ("ADODB.Command")
rs_proditem_cmd.ActiveConnection = MM_PSCRM_STRING
rs_proditem_cmd.CommandText = "SELECT * FROM dba.proditem as t1 LEFT JOIN dba.proditem_xtra as t2 ON t1.prodref=t2.prodref WHERE t1.prodref = ? and rber_mi_source = 'M'" 
rs_proditem_cmd.Prepared = true
rs_proditem_cmd.Parameters.Append rs_proditem_cmd.CreateParameter("param1", 200, 1, 25, rs_proditem__MMColParam) ' adVarChar

Set rs_proditem = rs_proditem_cmd.Execute
rs_proditem_numRows = 0
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<div class="demo"><%=(rs_proditem.Fields.Item("proddesc").Value)%></div>
<body>
</body>
</html>
<%
rs_proditem.Close()
Set rs_proditem = Nothing
%>

当页面加载时,会看到一些结果,有时返回2个结果,然后更多。有时它错过了一排。

我还注意到,在加载时,从<td class='demo'></td>拉出的第三列data.asp中的数据似乎在页面仍在加载时发生变化?

任何帮助都会被大大接受。

1 个答案:

答案 0 :(得分:0)

问题在于你制作了完全模糊的代码而你却忘记了它在做什么。首先是事业 - 我实际上不明白它是如何运作的。首先你这样做:

 a[i] = document.getElementsByClassName("prodref").innerHTML;

这是错误的,因为

  1. aHTMLElementCollection,不应更改
  2. document.getElementsByClassName("prodref")也是HTMLElementCollection,没有属性innerHTML
  3. a[i]现在应该包含undefined,但由于HTMLElementCollection数组不可变,因此此代码无法执行任何操作。

    在此之后,您尝试这样做 - 从技术上讲它应该可以工作,因为上面的错误代码没有做任何事情:

     xhttp.open("GET", "data.asp?prodref="+a[i].innerHTML, true);
    

    但它失败了,这表明你正在向我隐瞒一个错误(例如VBS脚本中的问题)。

    带备注的固定代码

    我决定清理并评论你的代码:

    // This creates array of elements with requested class name - eg. [HTMLElement, HTMLElement ...]
    var elements = document.getElementsByClassName("prodref");
    var outputElements = document.getElementsByClassName("demo");
    // Allways check if there is correct number of demo elements to print loaded data in
    if(elements.length != outputElements.length) {
        console.error("The number of prodref and demo elements is not the same!");
    }
    // Loop through both arrays of elements and make AJAX request for every one of them
    for (var i=0, length=elements.length; i < length; i++) {
        loadDoc(elements[i], outputElements[i]);
    }
    
    function loadDoc(element, demoElement) {
        console.log("creating loadDoc() call for element", element);
    
        var xhttp = new XMLHttpRequest();
        var url = "data.asp?prodref="+element.innerHTML;
        // Onload calls if request was successful
        xhttp.onload = function() {
           console.log("loadDoc() call for element", element, "succeeded");
           demoElement.innerHTML = xhttp.responseText;
        };
        // Error calls if there is an error
        xhttp.onerror = function() {
            console.error("There was some problem with the request for element",element," with url '", url, "', check the Net debug panel.");
        }
        // Do not make sync requests, that makes page lag. Just DON'T!!!
        xhttp.open("GET", url, false);
        xhttp.send();
    }
    

    当然,既然你决定不提供一个好的测试页面,我就无法测试这段代码。