Question

I'm having difficulty even getting basic AJAX to work with PhoneGap Developer and wanted to see if someone could help me.

I'm trying to test using W3Schools' AJAX PHP sample, so I can kind of "build up" my PhoneGap/AJAX abilities to develop user login capability for a mobile app that I've been tasked with creating. But, as someone who's not a programmer by any means (and who tends to be confused by computer networking issues...don't even get started on proxies!), I'm stumped by even trying to get the W3Schools sample to work.

The sample, which can be found here (http://www.w3schools.com/ajax/ajax_php.asp), is as follows. (For those who are, like me, also not programmatically-minded and who are better at thinking visually, the sample has a text box where if you type the first letter(s) of a person's name, it will try to find names starting with those letters in a database file that it calls upon. It displays the real-time results of what it finds below the text box as the user is typing.)

HTML/JavaScript/AJAX:

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

 

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

PHP:

<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
         }
    }
}
 
// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>

Testing the HTML file in my browser using localhost, everything works perfectly.

However, making the above into a PhoneGap project and testing it on my Android phone, the name-returning capability doesn't work. And this is obviously due to the AJAX command not being executed.

Anyone know how I can solve this issue? I've already put the following in my config.xml file, and nothing has changed:

<access origin="*" subdomains="true"/>

Thanks in advance.

Answer 1

Because the whitelist blocks external calls on default

add this plugin, if is not added yet

https://github.com/apache/cordova-plugin-whitelist

And add this meta tag to your html

  <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"/>

Basic/novice PhoneGap and AJAX

1 个答案: