JS Ajax学习
程序员文章站
2024-03-26 10:05:35
...
JS最后一次学习，明天转学Wordpress。
第四点有坑（php不熟，没安装Access）
1.xml文件外联css
test2.xml
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="style.css"?>
<study>
<name>Ajax学习</name>
<time>2小时</time>
</study>
style.css
name{
color: red;
}
2.Ajax之Get方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajaxtest1</title>
</head>
<script>
function loadXMLDoc(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test2.xml",true);
xmlhttp.send();
}
</script>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
3.responseXML使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajaxtets2</title>
</head>
<script>
function loadXMLDoc(){
var xmlhttp;
var txt,x,i;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function () {
if(xmlhttp.readyState==4 && xmlhttp.status==200){
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("name");
txt=x[0].childNodes[0].nodeValue;//childNodes 属性返回包含被选节点的子节点的 NodeList。
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","test2.xml",true);
xmlhttp.send();
}
</script>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
4.Ajax请求服务器返回xml文件信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AjaxXMLtable</title>
</head>
<script>
function loadXMLDoc(url) {
var xmlhttp;
var txt,x,xx,i;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function () {
if(xmlhttp.readyState==4 && xmlhttp.status==200){
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>"
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++){
txt=txt+"<tr>";
xx=x[i].getElementsByTagName("title");
{
try {
txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
} catch (er) {
txt = txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("artist");
{
try{
txt=txt+"<td>"+xx[0].firstChild.nodeValue+"</td>";
}catch (er) {
txt=txt+"<td> </td> ";
}
}
txt=txt+"</tr>";
}
txt=txt+"</table>";
document.getElementById("txtCDInfo").innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('status.xml')">GET</button>
</div>
</body>
</html>
status.xml
<?xml version="1.0" encoding="UTF-8" ?>
<status>
<CD>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
</CD>
<CD>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
</CD>
<CD>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
</CD>
<CD>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
</CD>
<CD>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
</CD>
</status>
4.Ajax请求返回数据库信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AjaxDataBase</title>
</head>
<script>
function showCustomer(str) {
var xmlhttp;
if(str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function () {
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)" style="font-family: Verdana,Arial,Helvetica,sans-serif;">
<option value="APPLE">Apple Computer,Inc.</option>
<option value="BAIDU">BAIDU,Inc.</option>
<option value="Canon">Canon USA,Inc.</option>
<option value="Google">Google,Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">SONY Corporation of America</option>
</select>
</form>
<div id="txtHint"></div>
</body>
</html>
getcustomer.php
<%response.expires=-1
sql="SELECT * FROM CUSTOMER WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("AD0DB.Connection")
conn.Provider="Microsoft.Jet.OLEB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Sever.CreateObject("AD0DB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
reponse.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td><tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>
上一篇： 类模板的定义与继承实现