阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      AJAX 实例

      一个简单的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","/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('/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('/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","/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 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","/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从XML 文件返回数据

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

      <!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","/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>
      

      用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("/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>
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录