完全的html文件,如何将js代码完全从html文件中独立出来？-优快云博客

本文介绍了一种将HTML文件内的JavaScript代码分离到独立JS文件的方法，并探讨了如何解决分离过程中遇到的问题，确保AJAX请求正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tree /var/www/html/ajax/

/var/www/html/ajax/

├── getuser.php

└── index.html

很简单的逻辑，index.html通过ajax,将数据发送到getuser.php,将数据库的查询结果传递到index.html里面。

已经调试成功。

index.html

<html>

<head>

</head>

<body>

<form>

Select a User:

</select>

</form>

<p>

<div id="txtHint"><b>User info will be listed here.</b></div>

</p>

var xmlHttp

function showUser(){

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null){

alert ("Browser does not support HTTP Request")

return

}

var mySelect = document.getElementById("user");

var index = mySelect.selectedIndex;

var str = mySelect.options[index].value;

var url="getuser.php"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged(){

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

function GetXmlHttpObject(){

var xmlHttp=null;

try{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}catch (e){

//Internet Explorer

try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}catch (e){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

return xmlHttp;

}

ob = document.getElementById("search");

ob.addEventListener("click",showUser);

</script>

</body>

</html>

getuser.php

<?php

$q=$_GET["q"];

$dsn = "mysql:host=localhost;dbname=ajax";

$con = new PDO($dsn,"root","xxxx");

$query_check = "select * from person where `FirstName`='$q' ";

$result = $con->query($query_check);

$rows = $result->fetchAll();

print_r($rows);

现在，我想将index.html里面的全部js代码，独立成一个js文件

形成下面的结构

tree /var/www/html/ajax/

/var/www/html/ajax/

├── getuser.php

├── index.html

└── selectuser.js

selectuser.js部分

var xmlHttp

function showUser(){

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null){

alert ("Browser does not support HTTP Request")

return

}

var mySelect = document.getElementById("user");

var index = mySelect.selectedIndex;

var str = mySelect.options[index].value;

var url="getuser.php"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged(){

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

function GetXmlHttpObject(){

var xmlHttp=null;

try{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}catch (e){

//Internet Explorer

try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}catch (e){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

return xmlHttp;

}

ob = document.getElementById("search");

ob.addEventListener("click",showUser);

就是将index.html里面的之间的内容全部移到 selectuser.js

发现，这样做，无法正常运转。

请问，应当做哪些修改？