div 都做成单独的html,如何将js代码完全从html文件中独立出来？

tree /var/www/html/ajax/

/var/www/html/ajax/

├── getuser.php

└── index.html

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

已经调试成功。

index.html

Select a User:

x1

x2

x3

User info will be listed here.

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);

getuser.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

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

请问，应当做哪些修改？