AJAX code sending GET request twice

Question

My TA says that GET request by following AJAX code is being sent twice. But I don't see how nor I am able to fix it. What is general approach how to deal with that?

It is simple page with search box giving advices as you type. Problem has to be somewhere in getByPrefix function.

JS code:

function set(arg)
{
    var searchtext = document.getElementById("searchtext");
    searchtext.value = arg.innerHTML;
    showMatches(searchtext);
}

function getByPrefix(prefix, callback)
{
    var prefixes = [];

    if (window.XMLHttpRequest)
        xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            var response = JSON.parse(xmlhttp.responseText);

            for (var i = 0; i < response.length; i++) // prepsani do jednoducheho indexovaneho pole
            {
                prefixes.push(response[i].drug);
            }

            callback(prefixes);         
        }
    }

    xmlhttp.open("GET","prefixes.php?q="+prefix,true);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
    xmlhttp.setRequestHeader('Cache-Control', 'no-cache');
    xmlhttp.send();
}

function action2(text)
{
    getByPrefix(text.value, showMatches);
}

function showMatches(text)
{
    var matches = text;

    var form = document.getElementById("search");
    var results = document.getElementById("results");

    if (results != null)
        form.removeChild(results);

    var div = document.createElement("div");
    div.id = "results";

    for (var i =0; i < matches.length; i++)
    {
        var p = document.createElement("p");
        p.className = "hidden";
        p.onclick =  (function(a) { return function(){ set(a); }})(p);
        p.innerHTML = matches[i];

        div.appendChild(p);
    }

    if (matches.length>1 && text.value != "")
        form.appendChild(div);

    if (matches.length==1 && text.value != matches[0])
        form.appendChild(div);
}

PHP code:

<?php
function head()
{
    global $db;
?>
<head>
    <title>Search</title>
    <?php head_common(); ?>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<?php
}

function body()
{
?>
<body>
    <?php heading(); ?>
   <div>
    <img src="img/logo.jpg" height="200" width="400"> 
    <form id="search" method="get" action="index.php">
        <p>
            <input name="page" value="results" type="hidden">
            <input name="part" value="1" type="hidden">
            <input name="hledej" id="searchtext" autocomplete="off" onKeyUp="action2(this)" type="text">
            <button>Hledej</button>
        </p>
    </form>
    </div>
    <?php footer(); ?>
</body>
<?php
}
?>

For checking, use Js Console of Firebug or Chrome, set a rupture point in the definition of the function, and you'll see when is sending it — Federico J., Jan 19 '14 at 23:15
_"Problem has to be somewhere in getByPrefix function."_ - No it doesn't. It looks to me like `getByPrefix()` will make one ajax call. But you are calling it in response to every keyup event, so as the user types `getByPrefix()` will be called repeatedly. (As an aside, what's the point of testing `if (window.XMLHttpRequest)` if there's no else case for if that object doesn't exist?) — nnnnnn, Jan 19 '14 at 23:37
Yeah, you can type one letter, but if it's capital, you need to hold shift, and after you release it `keyup` is triggered twice. — Karol, Jan 19 '14 at 23:47
Yes! That is the problem @Carlos Write it as an answer so I can accept it. — alop789312, Jan 20 '14 at 00:01

score 2 · Accepted Answer · edited May 23 '17 at 12:07

2

You're probably typing the capital letter, with SHIFT key, so once you release the keys the keyup event is triggered twice and you have 2 AJAX requests.

You can filter pressed keys using eventData param. For SHIFT key look here.

edited May 23 '17 at 12:07

Community

1
1

answered Jan 20 '14 at 00:07

Karol

7,803
9
49
67

Well, but how to filter if keyup is char only? – alop789312 Jan 20 '14 at 00:08
1

@jb91 look at edits, and suggested follow up question. – Karol Jan 20 '14 at 00:11

AJAX code sending GET request twice

1 Answers1