Question

我试图编写一个php和javascript代码，其行为与我下面的代码类似（我没有编写代码），但我有点困惑关于PHP中发生了什么以及两者如何进行通信。我曾尝试观看视频并阅读有关PHP的内容，但我仍然对此感到困惑。然后当点击按钮并且php发回信息时，javascript向php发出请求。

php文件的一般功能是显示http://webster.cs.washington.edu/cse154/services/flashcards/pokemon目录中随机文件的内容。它可以采用称为模式的参数。当用户传入类别的模式值时，它会输出http://webster.cs.washington.edu/cse154/services/flashcards中所有文件夹名称的列表。否则，它只会像以前一样显示随机文件的内容。

我对它进行了广泛的概述，但我仍然对PHP代码的运行方式感到困惑。就像我说的那样，我试图编写一个与此非常相似的代码，所以我只是想更好地理解php是如何工作的，但我读过的所有信息都没有＆这很有帮助。

<?php
# Solution to CSE 154 Flashcard lab.
# generates a JSON list of categories if passed a parameter mode
# with the value of categories. Otherwise outputs a random question
# from the passed in category in XML.

$mode = $_GET["mode"];
$category = $_GET["category"];
$url = "../../cse154/services/flashcards/";

if($mode == "categories") {
    outputJson($url);

} else {
    outputXml($url, $category);
}

# outputs the list of available categories in JSON
function outputJson($url) {
    $files = glob($url . "*");
    $json = array("categories" => array());
    foreach($files as $file) {
        $count = count(glob($file."/*"));
        $json["categories"][basename($file)] = $count;
    }

    header("Content-type: application/json");
    print(json_encode($json));
}

# outputs a random question about the provided category in XML
function outputXml($url, $category) {
    $files = glob($url . "$category/*");
    $index = array_rand($files);
    // this is a great place to use list!!
    list($ques, $ans) = file($files[$index]);

    $dom = new DOMDocument();
    $card = $dom->createElement("card");
    $dom->appendChild($card);
    $question = $dom->createElement("question");
    $question->appendChild($dom->createTextNode($ques));
    $card->appendChild($question);
    $answer = $dom->createElement("answer");
    $answer->appendChild($dom->createTextNode($ans));
    $card->appendChild($answer);

    header("Content-type: text/xml");
    print($dom->saveXML());
}

?>


/* javascript */
(function() {
var category = "computerscience";
var xml = null;

// sets up onclick handlers
window.onload = function() {
    document.getElementById("viewAll").onclick = viewAll;
    document.getElementById("next").onclick = next;
};

// sends an ajax request to the passed in address.
// calls the passed in function when the request returns.
function ajax($adress, $function) {
    var request = new XMLHttpRequest();
    request.onload = $function;
    request.open("GET", $adress, true);
    request.send(); 
}

// makes a request for all of the categories.
function viewAll() {
    ajax("flashcards.php?mode=categories", displayAll); 
}

// displays all categories in a list on the page. 
function displayAll() {
    $json = JSON.parse(this.responseText); 
    for($cat in $json.categories) {
        var li = document.createElement("li");
        li.innerHTML = $cat; 
        li.onclick = choose;
        document.getElementById("categories").appendChild(li);
    } 
}

// sets a new category as the category all questions should come from. 
function choose() {
    category = this.innerHTML;
}

// displays the next question if it was last displaying an answer or nothing. 
// displays the answer to the previous question otherwise. 
function next() {
    if(!xml) {
        ajax("flashcards.php?category=" + category, displayNext);
    } else {
        document.getElementById("card").innerHTML = xml.querySelector("answer").textContent;
        xml = null;
    }
}

// displays the question that it recieved from the server.
function displayNext() {
    xml = this.responseXML;
    document.getElementById("card").innerHTML = xml.querySelector("question").textContent;
}
})();

php和javascript如何与此代码进行特定通信

0 个答案: