ajax html例子,AJAX实例[通俗易懂]
ajax html例子,AJAX实例[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。
AJAX实例
实例一：一个简单的AJAX实例
创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据
实例
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();
}
运行实例 ?
点击 “运行实例” 按钮查看在线实例
效果图：
实例二：通过 XML HTTP 进行一次指定的 HEAD 请求
实例
function loadXMLDoc(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(‘p1’).innerHTML=”Last modified: ” + xmlhttp.getResponseHeader(‘Last-Modified’);
}
}
xmlhttp.open(“GET”,url,true);
xmlhttp.send();
}
运行实例 ?
点击 “运行实例” 按钮查看在线实例
效果图：
实例三：把 XML 文件显示为 HTML 表格
实例
function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert(“Problem retrieving XML data”);
return;
}
txt=”
x=xmlhttp.responseXML.documentElement.getElementsByTagName(“CD”);
for (i=0;i
{
txt=txt + “
“;
xx=x[i].getElementsByTagName(“TITLE”);
{
try
{
txt=txt + “
” + xx[0].firstChild.nodeValue + “”;
}
catch (er)
{
txt=txt + “
“;
}
}
xx=x[i].getElementsByTagName(“ARTIST”);
{
try
{
txt=txt + “
” + xx[0].firstChild.nodeValue + “”;
}
catch (er)
{
txt=txt + “
“;
}
}
txt=txt + “
“;
}
txt=txt + “
“;
document.getElementById(‘copy’).innerHTML=txt;
}
运行实例 ?
点击 “运行实例” 按钮查看在线实例
效果图：
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/170672.html原文链接：https://javaforall.cn