我正在尝试将包含 XMHTTPRequest 脚本的 js 文件添加到我的 HTML 中答案

【问题标题】：I'm trying to src a js file containing XMHTTPRequest script into my HTML我正在尝试将包含 XMHTTPRequest 脚本的 js 文件添加到我的 HTML 中
【发布时间】：2013-07-03 20:40:20
【问题描述】：

如果我将 XHR 文件直接嵌入到我的 HTML 文档中，一切正常。只要我通过 <script type="text/javascript" src="js/ajax_gallery.js">ajax_json_gallery('gallery');</script>

没有任何效果，我没有收到任何错误。我假设这与在 HTML 的单独文件中创建的 XHR 有关。我只是不喜欢 XHR 脚本弄乱我的 HTML，我只想加载为外部 JS 文件。

我已将我的主要 3 个脚本、galleryHandle.php、XHR.js、ajax_gallery.html 全部移动到相同的目录级别以保持简单。画廊图片位于名为“gallery”的文件夹中，也在同一级别。

这是我的代码： HTML

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="css/gallery.css" />
</head>
<body>
    <div id="pagetop"></div>
    <div id="thumbnailbox"></div>
    <div id="pictureframe"></div>   
    <script type="text/javascript" src="XHR.js">ajax_json_gallery('gallery');</script>
</body>
</html>

JavaScript

function ajax_json_gallery(folder) {
        "use strict";
        var httpRequest = new XMLHttpRequest();
        document.getElementById("pagetop").innerHTML = "dynamic ajax json gallery";
        var thumbnailbox = document.getElementById("thumbnailbox");
        httpRequest.open("POST", "galleryHandle.php", true);
        httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === 4 && httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                var pictureframe;
                pictureframe.innerHTML = "<img src='"+data.img1.src+"'>";
                thumbnailbox.innerHTML = "";
                for (var obj in data) {
                    if (data[obj].src){
                        thumbnailbox.innerHTML += '<div onclick="putinframe(\''+data[obj].src+'\')"><img src="'+data[obj].src+'"></div>';
                    }
                }
            }
        };
        httpRequest.send("folder="+folder); 
        thumbnailbox.innerHTML = "Loading...";
}
    function putinframe(src) {
        "use strict";
        var pictureframe = document.getElementById("pictureframe");
        pictureframe.innerHTML = '<img src = " '+src+' " >';
        }

PHP

<?php
header("Content-Type: application/json");
//bring in folder name
$folder = $_POST["folder"];
//start componding json 
$jsonData = '{';
//compound directory path
$dir = $folder."/";
//open directory
$dirHandle = opendir($dir);
//init while looop 
$i = 0;
while ($file = readdir($dirHandle)) {
    if(!is_dir($file) && strpos($file, '.jpg')){
        $i++;
        $src = "$dir$file";
$jsonData .= '"img'.$i.'":{ "num":"'.$i.'","src":"'.$src.'", "name":"'.$file.'" },';
    }
}
closedir($dirHandle);
$jsonData = chop($jsonData, ",");
$jsonData .= '}';
echo $jsonData;
?>

我知道我的代码中有一些冗余，但这只是我学习使用 POST、XHR 构建 JSON 的基础知识的教程。

无论如何，一如既往地感谢您的帮助。谢谢

【问题讨论】：

标签： php javascript html ajax xmlhttprequest

【解决方案1】：

说明

来自W3C:

<script type="text/javascript" src="myscript.js">
  alert('I am pointless as I won\'t be executed');
</script>

在页面中遇到此元素时，浏览器将加载文件 myscript.js 并执行它。 当您提供 src 属性时，将跳过 script 元素本身的任何内容。 [last] 示例将加载文件 myscript.js 并执行其中的代码，但不会在脚本元素。

解决方案

在您的 head 标签中尝试以下操作：

HTML

<script type="text/javascript" src="XHR.js"></script>
<script type="text/javascript">
    ajax_json_gallery('gallery');
</script>

【讨论】：

非常感谢您的帮助。

【解决方案2】：

<script type="text/javascript" src="XHR.js">

你不能在一个标签中同时拥有 src 属性和 javascript。把它们分开。像这样……

<script type="text/javascript" src="XHR.js"></script>

<script type="text/javascript">ajax_json_gallery('gallery');</script>

【讨论】：

是的，成功了。问题，javascript 是不是直到点击关闭才真正加载它不会加载函数的原因？
@KyleJoseph 一旦浏览器检测到src 属性，它实际上只是跳过了script 标记之间的内容。你可以read more here