zoukankan      html  css  js  c++  java
  • Ajax入门

    实例如下:

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    var xmlhttp;
    //第一步
    if (window.XMLHttpRequest)
      {// code for 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","test.txt",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">请求数据</button>
    <div id="myDiv"></div>
     
    </body>
    </html>

    就是获取服务器的test.txt文档的数据,显示在myDiv这个div中

    第一步,创建xmlhttprequest对象

    var xhttp =new XMLHttpRequest();

    XMLHttpRequest对象用来和服务器交换数据。

    第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。

    xmlhttp.open(method,url,async) method包括get 和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)

    post 发送请求什么时候能够使用呢?

    (1)更新一个文件或者数据库的时候。

    (2)发送大量数据到服务器,因为post请求没有字符限制。

    (3)发送用户输入的加密数据。

    post表单数据需要使用xmlhttprequest对象的setRequestHeader方法增加一个HTTP头。

    xmlhttp.open("POST","test.txt",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Bill&lname=Gates");

    第三步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

    onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。

    readyState属性,XMLHttpRequest对象的状态,改变从0到4,0代表请求未被初始化,1代表服务器连接成功,2请求被服务器接收,3处理请求,4请求完成并且响应准备。
    status属性,200表示成功响应,404表示页面不存在。

    在onreadystatechange事件中,服务器响应准备的时候发生,当readyState==4和status==200的时候服务器响应准备。

    第四步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

    使用responseText属性得到服务器响应的字符串数据,使用responseXML属性得到服务器响应的XML数据

    参考:

    http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

    http://www.jb51.net/article/88084.htm

  • 相关阅读:
    【郑轻邀请赛 G】密室逃脱
    【郑轻邀请赛 C】DOBRI
    【郑轻邀请赛 F】 Tmk吃汤饭
    【郑轻邀请赛 I】这里是天堂!
    【郑轻邀请赛 B】base64解密
    【郑轻邀请赛 A】tmk射气球
    【郑轻邀请赛 H】 维克兹的进制转换
    解决adb command not found以及sdk环境配置
    adb shell 命令详解,android, adb logcat
    Unexpected exception 'Cannot run program ... error=2, No such file or directory' ... adb'
  • 原文地址:https://www.cnblogs.com/Donnnnnn/p/6148427.html
Copyright © 2011-2022 走看看