zoukankan      html  css  js  c++  java
  • AJAX(一、基本知识)

    AJAX:Asynchronous ([ə'sɪŋkrənəs; eɪ-])Javascript (['dʒɑ:və,skrɪpt])and XML 异步的Javascript和XML
    AJAX不是新的编程语言,而是一种使用现有标准的新方法

    百度百科解释:

    AJAX是指一种创建交互式网页应用的网页开发技术,中文名:阿贾克斯
    AJAX = 异步 Javascript和XML(标准通用标记语言的子集)。
    AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
     
    AJAX的基础:XMLHttpRequest
    1.创建XMLHttpRequest对象:
    variable=new XMLHttpRequest();

    但是老版本的IE5、IE6使用ActiveX对象:

    variable=new ActiveXObject("Microsoft.XMLHTTP"); 

    因此为了适应所有的浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

    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");
      }

    2.XMLHttpRequest对象用于和服务器交换数据

    如果需要将请求发送到服务器,我们使用XMLHttpRequest对象的open()和send()方法:

    open(method,url,async

    规定请求的类型,URL 以及是否异步处理请求。

    • method:请求的类型;GET 或 POST
    • url:文件在服务器上的位置
    • async:true(异步)或 false(同步)

    send(string)

    将请求发送到服务器。

    • string:仅用于 POST 请求

    GET 还是 POST?

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

    然而,在以下情况中,请使用 POST 请求:

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    下面是ajax请求本地.txt文件的全部代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax请求本地.txt文件</title>
        <script>
            window.onload = function () {
                var btn = document.getElementById('btn');
    
                btn.onclick = function () {
                    //创建XHR对象
                    var xhr = new XMLHttpRequest();
    
                    //请求的方式,地址,是否异步 test.txt和该html文件在同一级目录
                    xhr.open('get', 'test.txt', true);
    
                    //请求的确定操作,初始化,相当于搜索时,敲击的回车
                    xhr.send(null);
    
                    //请求的readyState每变化一次就执行一次onreadystatechange函数
                    //其中readyState表示的是:请求/响应过程的当前活动阶段
                    //readyState有如下取值
                    /*
                     *   0:未初始化,尚未调用send()方法
                     *   1: 启动
                     *   2:发送
                     *   3:接收
                     *   4:完成
                     */
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status==200) {
                            alert(xhr.responseText);
                        }
                    }
                };
            };
        </script>
    </head>
    <body>
    <input type="button" id="btn" value="click">
    </body>
    </html>

    效果:

    3.AJAX——服务器响应

    如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

    responseText:获得字符串形式的响应数据。

    responseXML:获得 XML 形式的响应数据。

    如果来自服务器的响应并非 XML,请使用 responseText 属性。responseText 属性返回字符串形式的响应,因此可以这样使用:

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    4.AJAX - onreadystatechange 事件

    当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息:

    onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

    readyState:

           存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

    •  0: 请求未初始化
    •  1: 服务器连接已建立
    •  2: 请求已接收
    •  3: 请求处理中
    •  4: 请求已完成,且响应已就绪

    status:  200: "OK"     404: 未找到页面

    在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

    当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }

    上面就是最基础的AJAX使用方法。


  • 相关阅读:
    UDP and netstat
    UDP learn by Python3
    UDP headers and checksum
    routetrace
    IPv4 headers
    Commands for IP
    IP checksum
    POJ 3667 Hotel 线段树处理区间信息
    【枚举】Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) Div2C题
    二分图最大匹配模板 HDU1083
  • 原文地址:https://www.cnblogs.com/zhengyeye/p/6230239.html
Copyright © 2011-2022 走看看