zoukankan      html  css  js  c++  java

  • XMLHttpRequest用法介绍

     

    前言：

    传统的Web应用请求服务器返回的一般是是完整的HTML页面，这样往往就需要页面进行刷新操作，不仅耗时而且用户体验度也不好。最典型的代表就是form表单登录操作了。如果登录失败往往是跳转到原网页重新登陆，如果是这种情况话就会造成资源的浪费，因为返回的HTMl网页中大多数元素都是重复的。

    正因为这些原因后来才出现了ajax，它是一种交互式的网页开发技术，而XMLHttpRequest是它的核心的内容，它能够为页面中的javascript脚本提供特定的通信方式，从而使页面的javascript脚本和服务器之间形成动态交互的效果，XMLHTTPRequest的最大的优点是页面内的javascript脚本可以不用刷新页面，而直接和服务器发生交互，从而实现页面无刷新的效果。[1]

    什么是 XMLHttpRequest 对象？[b]

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

    XMLHttpRequest 对象是开发者的梦想，因为您能够：

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

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

     

    Ajax和XMLHttpRequest [c]

    我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。

    以下是我认为对Ajax较为准确的解释：（摘自what is Ajax）
    AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.

    AJAX is based on the following open standards:

    • Browser-based presentation using HTML and Cascading Style Sheets (CSS).(基于浏览器的演示，使用HTML和层叠样式表(CSS))

    • Data is stored in XML format and fetched from the server.(数据以XML格式存储，并从服务器获取)

    • Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.(后台数据在浏览器中使用XMLHttpRequest对象获取)

    • JavaScript to make everything happen.(所有事情都发生的JavaScript)

    从上面的解释中可以知道：ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

    所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。

    XMLHttpRequest的发展历程

    XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。
    XMLHttpRequest Level 1主要存在以下缺点：

    • 受同源策略的限制，不能发送跨域请求；

    • 不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；

    • 在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

    那么Level 2对Level 1 进行了改进，XMLHttpRequest Level 2中新增了以下功能：

    • 可以发送跨域请求，在服务端允许的情况下；

    • 支持发送和接收二进制数据；

    • 新增formData对象，支持发送表单数据；

    • 发送和获取数据时，可以获取进度信息；

    • 可以设置请求的超时时间；


     

     

     

    1.下面首先来介绍一下XMLHttpRequest的详细属性和方法：


    方法和属性

    描述

    Open（String method,String url,Boolean ansynch,String username,String password）

    指定和服务器端交互的HTTP方法，URL地址及其他请求信息。

    其中method表示HTTP请求方法。支持所有HTTP的方法，一般使用“GET”，“POST”url表示请求的服务器的地址

    Asynch表示是否采取异步方式，true表示异步，false表示同步

    后两个参数可以不指定，usrename和password分别表示用户名和密码，提供http认证机制需要的用户名和密码

    Send(content)

    向服务器发出请求，如果采用异步方式，该方法会立即返回

    Content可以不指定或者指定为null表示不发送数据

    其内容可以使DOM对象，输入流或是字符串

    setRequestHeader(String header,String value)

    设置HTTP请求中的指定头部header的值为value。
    次方法需在open方法以后调用

    getAllReponseHeader()

    返回包含HTTP的所有响应头包括Content-Length，Date，URI等内容

    返回值是一个字符串，包含所有头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔

    GetResponseHeader(String header)

    返回HTTP响应头中指定的键名header对应的值

    Abort()

    停止当前http请求，对应的XMLHttpRequest对象会复位到未初始化的状态

    responseText

    服务器响应的文本内容

    ResponseXML

    服务器响应的XML内容对应的DOM对象

    Status

    服务器返回的http状态码

    200表示“成功”，404表示“未找到”。500表示“服务器内容部错误”

    statusText

    服务器返回状态码的文本信息

    readyState

    表示XMLHttpRequest对象的状态

    0=未初始化。对象已创建，未调用open

    1=open方法成功调用以后。Send方法未调用

    2=send方法已经调用，尚未开始接受数据

    3=正在接受数据。Http响应头信息已经接受，响应数据尚未接受完成。

    4=完成。响应数据接受完成。

    Onreadystatechage

    请求状态改变的时间触发器（readyState变化时会调用这个属性上注册的javascript函数）

     


    2.然后介绍一下XMLHttpRequest的使用步骤：


     

    一、初始化XMLHttpRequest对象

     

     

     在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化，因为各个浏览器对这个实例化过程的实现不同，所以针对不同的浏览器实例化XMLHttpRequest对象的方式也不尽相同。

          针对微软IE浏览器：

    Js代码  收藏代码
    1. var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  

          针对其他的浏览器：

    Js代码  收藏代码
    1. var xmlHttp = new XMLHttpRequest();  

          所以，综合了这两种实例化XMLHttpRequest的形式，就可以提取出一个实例化的公共方法，代码如下：

    Js代码  收藏代码
    1. //实例化XMLHttpRequest对象  
    2. function createXMLHttpRequest(){  
    3.     if(window.XMLHttpRequest){  
    4.         xmlHttp = new XMLHttpRequest();   
    5.     }else if(window.ActiveXObject){  
    6.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    7.     }  
    8. }  

    二、指定响应处理函数

     

          接下来就要指定当服务器返回信息时客户端的处理方式。只需将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可，比如：

    Js代码  收藏代码
    1. xmlHttp.onreadystatechange = callBack;  

          需要说明的是，这个函数名称不加括号，不带参数；也可以使用JavaScript即时定义函数的方式定义响应函数，比如：

    Js代码  收藏代码
    1. xmlHttp.onreadystatechange = function(){  
    2.          // Do something...  
    3. }  

     

    三、发送HTTP请求

     

          指定响应处理函数后，就可以向服务器发出HTTP请求了。这需要调用XMLHttpRequest对象的open()和send()方法。

     

    Js代码  收藏代码
    1. xmlHttp.open("get/Post","URL",true/false);  
    2. xmlHttp.send(null);  

     

          3.1 open()方法详解 

     

    Js代码  收藏代码
    1. //XMLHttpRequest对象的open()方法原型  
    2. void open(string method, string URL , boolean asynch, string username, string password);  

          open()方法表示会建立对服务器的调用，这是初始化一个请求的纯脚本方法。

          它有2个必要的参数，还有3个可选的参数。method表示向服务器发送信息的方式，可以为Get或Post；URL表示所调用的服务器资源的URL；asynch是一个布尔值，指示这个调用时异步还是同步，默认为true；username和password允许我们指定一个特定的用户名和口令。 一般使用时只取前三个参数即可。

     

          3.2 send()方法详解

     

    Js代码  收藏代码
    1. //XMLHttpRequest对象的send()方法原型  
    2. void send(content);  

          send()方法具体向服务器发送请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待，知道接收到响应为止。参数content是可选的，可以是一个DOM对象的实例、一个输入流或一个串。传入的内容会作为请求体的一部分发送。

     

    四、处理服务器返回的信息

     

          在第二部中我们为XMLHttpRequest指定了响应处理函数，响应处理函数检查XMLHttpRequest对象的readyState属性值的变化，如果readyState值为4时，代表服务器已经传回所有信息，可以开始处理信息并更新页面内容了。

    Js代码  收藏代码
    1. function callBack(){  
    2.         if(xmlHttp.readyState==4){  
    3.     if(xmlHttp.status==200){  
    4.             //do something with xmlHttp.responseText;  
    5.             xmlHttp.responseText;  
    6.     }     
    7.         }  
    8. }  

     

          4.1 readyState属性详解

          readyState属性用来表示请求的状态，有5个可取值，分别是：

          “0”：表示未初始化，即对象已经建立，但是尚未初始化(尚未调用open()方法)；

          “1”：表示正在加载，此时对象已建立，尚未调用send()方法；

          “2”：表示请求已发送，即send()方法已调用；

          “3”：表示请求处理中；

          “4”：表示请求已完成，即数据接收完毕。

     

          4.2 status、statusText属性详解

          status：返回当前请求的HTTP状态码(只读)；

          statusText：返回当前请求的响应行状态(只读)。

     

          4.3 responseText、responseXML属性详解

          responseText属性表示服务器的文本响应，其处理结果以字符串形式返回。

          responseXML属性表示服务器响应，其结果将格式化为XML Document对象。

     

          上述四个步骤，就是XMLHttpRequest对象在Ajax程序中的运行周期，即初始化、指定响应函数、发送请求、处理响应。

     下面是本示例的完整代码：

     

    Js代码  收藏代码
    1. var xmlHttp;  
    2.   
    3. function AjaxFunction(){  
    4.         createXMLHttpRequest();  
    5.         if(xmlHttp!=null){  
    6.     xmlHttp.onreadystatechange = callBack;  
    7.     xmlHttp.open("get/Post","URL",true/false);  
    8.     xmlHttp.send(null);  
    9.         }     
    10. }     
    11.   
    12. //实例化XMLHttpRequest对象  
    13. function createXMLHttpRequest(){  
    14.         if(window.XMLHttpRequest){  
    15.     xmlHttp = new XMLHttpRequest();   
    16.         }else if(window.ActiveXObject){  
    17.     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    18.         }  
    19. }  
    20.   
    21. //指定响应函数  
    22. function callBack(){  
    23.         if(xmlHttp.readyState==4){  
    24.                 if(xmlHttp.status==200){  
    25.             //do something with xmlHttp.responseText;  
    26.             xmlHttp.responseText;  
    27.                 }     
    28.         }  
    29. } 

    有些人可能会有疑问，为什么不用JQuery中的ajaxt方法呢？

    这是因为JQuery中的ajax方法需要Jquery文件的依赖，如果是想要依靠原生的js不想导入JQuery文件的情况下是不能使用的，针对于这些场景所以XMLHttpRequest还是相当受欢迎的。

     

    原文出处：

    [a] 帅气的林老师, XMLHttpRequest用法介绍, http://blog.csdn.net/linzhiqiang0316/article/details/52326773

    [b] wc3school在线教程, http://www.w3school.com.cn/xml/xml_http.asp

    [c] ruoyiqing,你真的会使用XMLHttpRequest吗？https://segmentfault.com/a/1190000004322487


    Reference：

    [1] xusweeter, XMLHttpRequest简易使用教程, http://xusweeter.iteye.com/blog/747099

    [2] 兰儿, 拿下AJAX(二)——XMLHttpRequest对象五步使用法, http://blog.csdn.net/laner0515/article/details/7784075

     
  • 相关阅读:
    WebSocket
    牛人
    ECSHOP+wamp
    数据结构之-----------排序
    DRGS指标计算方法
    Oracle 11g安装教程
    JavaScript入门
    多态
    类的继承
    上传工具类
  • 原文地址：https://www.cnblogs.com/ryelqy/p/10104099.html
Copyright © 2011-2022 走看看