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
  • 相关阅读:
    Python面向对象高级编程(__slots__、多继承、定制类)-6
    CS231n Lecture6-Training Neural Networks, part I学习笔记
    CS231n Lecture5-Convolutional Neural Networks学习笔记
    CS231n Lecture4-Introduction to Neural Networks学习笔记
    Python面向对象编程(类与实例、数据封装、继承多态、type()、isinstance())-5
    Python模块-4
    alloc和初始化的定义
    块的定义和使用
    属性的定义以及@synthesize的使用
    实例方法和类方法的定义
  • 原文地址:https://www.cnblogs.com/eric_yi/p/7831664.html
Copyright © 2011-2022 走看看