zoukankan      html  css  js  c++  java
  • Ajax技术

    ajax是一个很重要的技术。

    什么是ajax,用w3c的解释就是,

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

    AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

    AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

    这么说有点让人费解,用通俗的话说就是

    就是没用AJAX的网页,你点一个按钮就要刷新一下页面,尽管新页面上只有一行字和当前页面不一样,但你还是要无聊地等待页面刷新。

    用了AJAX之后,你点击,然后页面上的一行字就变化了,页面本身不用刷。

    举个例子:

    大学毕业拍毕业照,全班30人,一共去了29人。可是拍完之后,没参与照相的同学也想出现在照片中,该怎么办呢?

    传统方式:大家再召集一次,重新拍一张。

    Ajax:把这名同学PS进去

    这就是Ajax的特点:

    可以在不重新召集所有同学拍照的情况下,对照片的部分进行更新。

    可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 (重新拍照理解为重新加载网页)

    AJAX只是一种技术,不是某种具体的东西。不同的浏览器有自己实现AJAX的组件。

    因为ajax的完整用法太多了,我就简单写一下他的使用步骤,

    第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。
    //这里要针对不同的浏览器
    var xhttp;
    if (window.XMLHttpRequest) {
    //现代主流浏览器
    xhttp = new XMLHttpRequest();
    } else {
    // 针对浏览器,比如IE5或IE6
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。
    xmlhttp.open(method,url,async) method包括get 和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)
    xhttp.send();使用get方法发送请求到服务器。
    xhttp.send(string);使用post方法发送请求到服务器。
    post 发送请求什么时候能够使用呢?
    (1)更新一个文件或者数据库的时候。
    (2)发送大量数据到服务器,因为post请求没有字符限制。
    (3)发送用户输入的加密数据。

    第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
    使用responseText属性得到服务器响应的字符串数据,使用responseXML属性得到服务器响应的XML数据。
    eg:document.getElementById("demo").innerHTML = xhttp.responseText;

    第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
    onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。
    readyState属性,XMLHttpRequest对象的状态,改变从0到4,0代表请求未被初始化,1代表服务器连接成功,2请求被服务器接收,3处理请求,4请求完成并且响应准备。
    status属性,200表示成功响应,404表示页面不存在。
    在onreadystatechange事件中,服务器响应准备的时候发生,当readyState==4和status==200的时候服务器响应准备。
    eg:
    function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
    }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send();
    }
    //函数作为参数调用
    <!DOCTYPE html>
    <html>
    <body>
    <p id="demo">Let AJAX change this text.</p>
    <button type="button"
    onclick="loadDoc('index.aspx', myFunction)">Change Content
    </button>
    <script>
    function loadDoc(url, cfunc) {
    var xhttp;
    xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    cfunc(xhttp);
    }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
    }
    function myFunction(xhttp) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
    }
    </script>
    </body>
    </html>

    当然这只是一些简单的用法,在w3c上面还有一些高级用法,例如利用ajax从数据库读取信息,读取XML的信息等。

    最后想说,对于做后台开发的来说,ajax是一门很重要的技术,前端也是!

  • 相关阅读:
    【BZOJ1396】识别子串
    【BZOJ3309】DZY Loves Math
    【XSY3306】alpha
    整体二分
    常系数齐次线性递推
    【XSY2968】线性代数
    【XSY2892】【GDSOI2018】谁是冠军
    【BZOJ5020】[LOJ2289]【THUWC2017】在美妙的数学王国中畅游
    【XSY2989】字符串
    【XSY2988】取石子
  • 原文地址:https://www.cnblogs.com/douflamingo-666/p/8849656.html
Copyright © 2011-2022 走看看