保存到桌面加入收藏设为首页
java开发
当前位置:首页 > java开发

ajax实例-安度博客

时间:2019-02-08 15:40:05   作者:   来源:   阅读:98   评论:0
内容摘要:一个简朴的AJAX实例建设一个简朴的xmlHttpRequest,从一个TXT文件中返回数据。<html><!DOCTYPE html><html><head><script>function loadxmlDoc(){......
  • 一个简朴的AJAX实例

    建设一个简朴的xmlHttpRequest,从一个TXT文件中返回数据。

     

    <html><!DOCTYPE html><html><head><script>function loadxmlDoc(){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("myDiv").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET""/try/ajax/ajax_info.txt"true);xmlhttp.send();}</script></head><body>?<div id="myDiv"><h4>使用 AJAX 修改该文本内容</h4></div><button type="button" onclick="loadxmlDoc()">修改内容</button>?</body></html>

     

     

    用AJAX加载 xml 文件

    建设一个简朴的xmlHttpRequest,从一个xml文件中返回数据。

    <html><!DOCTYPE html><html><head><script>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(&#39;A1&#39;).innerHTML=xmlhttp.status; document.getElementById(&#39;A2&#39;).innerHTML=xmlhttp.statusText; document.getElementById(&#39;A3&#39;).innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET"urltrue);xmlhttp.send();}</script></head><body><h4>Retrieve data from xml file</h4><p><b>Status:</b></p><p><b>Status text:</b></p><p><b>Response:</b></p><button onclick="loadxmlDoc(&#39;note.xml&#39;)">Get xml data</button></body></html>

     

    用AJAX举行一次 HEAD 请求

    检索资源(文件)的头信息。

    <html><!DOCTYPE html><html><head><script>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(&#39;p1&#39;).innerHTML=xmlhttp.getAllResponseHeaders(); } }xmlhttp.open("GET"urltrue);xmlhttp.send();}</script></head><body><p id="p1">The getAllResponseHeaders() function returns the header information of a resource like length server-type content-type last-modified etc.</p><button onclick="loadxmlDoc(&#39;/try/ajax/ajax_info.txt&#39;)">Get header information</button></body></html>

     

    用AJAX举行一次指定的 HEAD 请求

    检索资源(文件)的指定头信息。

    <html><!DOCTYPE html><html><head><script>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(&#39;p1&#39;).innerHTML="Last modified: " + xmlhttp.getResponseHeader(&#39;Last-Modified&#39;); } }xmlhttp.open("GET"urltrue);xmlhttp.send();}</script></head><body><p id="p1">The getResponseHeader() function is used to return specific header information from a resource like length server-type content-type last-modified etc.</p><button onclick="loadxmlDoc(&#39;/try/ajax/ajax_info.txt&#39;)">Get "Last-Modified" information</button></body></html>


    用AJAX从数据库返回数据

    用AJAX网页如何获取数据库中的信息

    <html><!DOCTYPE html><html><head><script>function showCustomer(str){var xmlhttp; if (str=="") { document.getElementById("txtHint").innerHTML=""; return; }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("txtHint").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET""/try/ajax/getcustomer.php?q="+strtrue);xmlhttp.send();}</script></head><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><br><div id="txtHint">Customer info will be listed here...</div></body></html>

     

    用AJAX从xml 文件返回数据

    建设一个xmlHttpRequest从xml文件中检索数据并显示在一个HTML表格中。

    <html><!DOCTYPE html><html><head><script>function loadxmlDoc(url){var xmlhttp;var txtxxxi;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) { txt="<table border=&#39;1&#39;><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(&#39;txtCDInfo&#39;).innerHTML=txt; } }xmlhttp.open("GET"urltrue);xmlhttp.send();}</script></head><body><div id="txtCDInfo"><button onclick="loadxmlDoc(&#39;cd_catalog.xml&#39;)">Get CD info</button></div></body></html>

     

    用callback函数的AJAX实例

    用一个callback函数建设一个xmlHttpRequest,并从一个TXT文件中检索数据。

    <!DOCTYPE html><html><head><script>var xmlhttp;function loadxmlDoc(urlcfunc){if (window.xmlHttpRequest) {// IE7+ Firefox Chrome Opera Safari 代码 xmlhttp=new xmlHttpRequest(); }else {// IE6 IE5 代码 xmlhttp=new ActiveXobject("Microsoft.xmlHTTP"); }xmlhttp.onreadystatechange=cfunc;xmlhttp.open("GET"urltrue);xmlhttp.send();}function myFunction(){loadxmlDoc("/try/ajax/ajax_info.txt"function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } });}</script></head><body><div id="myDiv"><h4>使用 AJAX 修改文本内容</h4></div><button type="button" onclick="myFunction()">修改内容</button></body></html>



最近更新

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)