阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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的教程都有!

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

    目录
    目录