zoukankan      html  css  js  c++  java
  • 4.22 AJAX技术

    一个简单的AJAX实例

    <!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进行一次指定的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从数据库返回数据

    <!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>
  • 相关阅读:
    Loved
    什么是REST
    统一资源定位符URL(Uniform Resource Locator)
    HTTP工作原理
    系统程序员成长计划内存管理(一)
    系统程序员成长计划工程管理(四)
    系统程序员成长计划-内存管理(四)
    HTTP请求报文格式
    系统程序员成长计划内存管理(二)
    系统程序员成长计划-内存管理(三)
  • 原文地址:https://www.cnblogs.com/cdl-sunshine/p/14908045.html
Copyright © 2011-2022 走看看