Jquery Ajax使用方法

来源：互联网发布：胖子升级数据编辑：程序博客网时间：2024/06/07 17:02

一个简单的AJAX实例

创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据。

<!DOCTYPE html><html><head><meta charset="utf-8"><script>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","/try/ajax/ajax_info.txt",true);  xmlhttp.send();}</script></head><body><div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></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('A1').innerHTML=xmlhttp.status;    document.getElementById('A2').innerHTML=xmlhttp.statusText;    document.getElementById('A3').innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET",url,true);xmlhttp.send();}</script></head><body><h2>Retrieve data from XML file</h2><p><b>Status:</b><span id="A1"></span></p><p><b>Status text:</b><span id="A2"></span></p><p><b>Response:</b><span id="A3"></span></p><button onclick="loadXMLDoc('note.xml')">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('p1').innerHTML=xmlhttp.getAllResponseHeaders();    }  }xmlhttp.open("GET",url,true);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('/try/ajax/ajax_info.txt')">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('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified');    }  }xmlhttp.open("GET",url,true);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('/try/ajax/ajax_info.txt')">Get "Last-Modified" information</button></body></html>

用AJAX从ASP 文件返回数据

当用户在文本框内键入字符时网页如何与Web服务器进行通信

<!DOCTYPE html><html><head><meta charset="utf-8"><script>function showHint(str){  var xmlhttp;  if (str.length==0){     document.getElementById("txtHint").innerHTML="";    return;  }  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("txtHint").innerHTML=xmlhttp.responseText;    }  }  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);  xmlhttp.send();}</script></head><body><h3>在输入框中尝试输入字母 a:</h3><form action=""> 输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" /></form><p>提示信息: <span id="txtHint"></span></p> </body></html>

用AJAX从数据库返回数据

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

<!DOCTYPE html><html><head><meta charset="utf-8"><script>function showCustomer(str){  var xmlhttp;      if (str==""){    document.getElementById("txtHint").innerHTML="";    return;  }  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("txtHint").innerHTML=xmlhttp.responseText;    }  }  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);  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">客户信息将显示在这...</div></body></html>

用AJAX从XML 文件返回数据

创建一个XMLHttpRequest从XML文件中检索数据并显示在一个HTML表格中。

<!DOCTYPE html><html><head><meta charset="utf-8"><style>table,th,td {  border : 1px solid black;  border-collapse: collapse;}th,td {  padding: 5px;}</style></head><body><h1>XMLHttpRequest 对象</h1><button type="button" onclick="loadDoc()">获取我收藏的 CD</button><br><br><table id="demo"></table><script>function loadDoc() {  var xhttp = new XMLHttpRequest();  xhttp.onreadystatechange = function() {    if (this.readyState == 4 && this.status == 200) {      myFunction(this);    }  };  xhttp.open("GET", "cd_catalog.xml", true);  xhttp.send();}function myFunction(xml) {  var i;  var xmlDoc = xml.responseXML;  var table="<tr><th>Artist</th><th>Title</th></tr>";  var x = xmlDoc.getElementsByTagName("CD");  for (i = 0; i <x.length; i++) {    table += "<tr><td>" +    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +    "</td><td>" +    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +    "</td></tr>";  }  document.getElementById("demo").innerHTML = table;}</script></body></html>

用callback函数的AJAX实例

用一个callback函数创建一个XMLHttpRequest，并从一个TXT文件中检索数据。

<!DOCTYPE html><html><head><script>var xmlhttp;function loadXMLDoc(url,cfunc){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",url,true);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"><h2>使用 AJAX 修改文本内容</h2></div><button type="button" onclick="myFunction()">修改内容</button></body></html>

0 0