zoukankan      html  css  js  c++  java
  • XMLHttpRequest 对象

    XMLHttpRequest 对象用于在后台与服务器交换数据。

    什么是 XMLHttpRequest 对象?

    XMLHttpRequest 对象用于在后台与服务器交换数据。

    XMLHttpRequest 对象是开发者的梦想,因为您能够:

    • 在不重新加载页面的情况下更新网页
    • 在页面已加载后从服务器请求数据
    • 在页面已加载后从服务器接收数据
    • 在后台向服务器发送数据

    所有现代的浏览器都支持 XMLHttpRequest 对象。

    创建 XMLHttpRequest 对象

    所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

    通过一行简单的 JavaScript 代码,我们就可以创建 XMLHttpRequest 对象。

    创建 XMLHttpRequest 对象的语法:

    1 xmlhttp=new XMLHttpRequest();

    老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:  

    1 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    
    

    XMLHttpRequest对象的属性:

     1 关于异步与同步
     2 异步传输是面向字符的传输,它的单位是字符;
     3 同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的。
    4 XMLHttpRequest对象的属性。 5    onreadystatechange 每次状态改变所触发事件的事件处理程序。 6    responseText 从服务器进程返回数据的字符串形式。 7    responseXML 从服务器进程返回的DOM兼容的文档数据对象。 8    status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪) 9    statusText 伴随状态码的字符串信息 10    readyState 对象状态值 11        0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法) 12        1 (初始化) 对象已建立,尚未调用send方法 13       2 (发送数据) send方法已调用,但是当前的状态及http头未知 14        3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误, 15        4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据 16         Method :Post 发送数据方式 url send(特属于post方式) 17         Get   发送数据方式 url

    配置实例:

     1 !DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <div id="myTime"></div>
     9 <input id="Button1" type="button" value="Get Time" onclick="creatReq();" >
    10 
    11 <script type="text/javascript" language="javascript">
    12     var req; //定义变量,用来创建xmlhttprequest对象
    13     function creatReq()  //创建xmlhttprequest,ajax开始
    14     {
    15         var url = "ajaxServer.aspx"; //要请求的服务端地址
    16         if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本),用xmlhttprequest对象创建
    17         {
    18             req = new XMLHttpRequest();
    19         }
    20         else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败。
    21         {
    22             req = new ActiveXObject("Microsoft.XMLHttp");
    23         }
    24         if(req) //成功创建xmlhttprequest
    25         {
    26             req.open("GET",url, true); //与服务端建立连接(请求方式post或get,地址,true表示异步)
    27             req.onreadystatechange = callback;  //指定回调函数
    28             req.send(null); //发送请求
    29         }
    30     }
    31     function callback()  //回调函数,对服务端响应处理,监视response状态
    32     {
    33         if(req.readyState == 4) //请求状态为4表示成功
    34         {
    35             if(req.status == 200)  //http状态200表示OK
    36             {
    37                 Display();  //所有状态成功,执行此函数,显示数据
    38             }
    39             else // http返回状态失败
    40             {
    41                 alert("服务端返回状态" + req.statusText);
    42             }
    43         }
    44         else //请求状态还没有成功,页面等待
    45         {
    46             document.getElementById("myTime").innerHTML = "数据加载中...";
    47         }
    48     }
    49 
    50     function Display()  //接受服务器端返回的数据,对其进行显示
    51     {
    52         document.getElementById("MyTime").innerHTML = req.responseText;
    53     }
    54 </script>
    55 </body>
    56 </html>
    View Code
  • 相关阅读:
    康复计划
    Leetcode 08.02 迷路的机器人 缓存加回溯
    Leetcode 38 外观数列
    Leetcode 801 使序列递增的最小交换次数
    Leetcode 1143 最长公共子序列
    Leetcode 11 盛水最多的容器 贪心算法
    Leetcode 1186 删除一次得到子数组最大和
    Leetcode 300 最长上升子序列
    Leetcode95 不同的二叉搜索树II 精致的分治
    Leetcode 1367 二叉树中的列表 DFS
  • 原文地址:https://www.cnblogs.com/eric_yi/p/7831664.html
Copyright © 2011-2022 走看看