`

XMLHttpRequest简易使用教程

 
阅读更多
本文转自网址:http://xusweeter.iteye.com/blog/747099
非常清晰明了的总结,非常感谢分享。


XMLHttpRequest是Ajax的核心,通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输,从而实现页面的无刷新效果。



XMLHttpRequest对象的常用属性:



      onreadystatechange:指定当readyState属性值改变时的事件处理句柄(只写);

      readyState:返回当前请求的状态(只读);

      responseText:将相应信息作为字符串返回(只读);



XMLHttpRequest对象的常用方法:



      open():创建一个新的HTTP请求,并制定此请求的方法,URL以及验证信息(用户名/密码);

      send():发送请求到HTTP服务器并接受回应。



XMLHttpRequest对象的使用需要四个步骤:



(1) 初始化XMLHttpRequest对象

(2) 指定响应处理函数

(3) 发送HTTP请求

(4) 处理服务器返回的信息



一、初始化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.} 
分享到:
评论

相关推荐

    AJAX 简易学习教程

    它的核心在于XMLHttpRequest对象,这个对象被所有现代浏览器支持,包括IE5和IE6(在旧版本中通过ActiveXObject实现)。XMLHttpRequest允许前端与服务器进行异步数据交换,使得用户体验更加流畅。 创建...

    AJAX简易教程及实例

    **AJAX简易教程及实例详解** AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。...

    JavaScrip简易教程.rar_javascrip_javascript

    本教程"JavaScrip简易教程"专为初学者设计,旨在帮助他们快速掌握JavaScript的核心概念和实际应用。 在"JavaScrip教程.doc"文档中,可能包含了以下关键知识点: 1. **基础语法**:JavaScript的基本结构,包括变量...

    ajax中文简易教程

    - **创建对象**:在JavaScript中,使用`new XMLHttpRequest()`来创建一个XMLHttpRequest实例。 - **初始化请求**:`open()`方法用于设置请求类型(GET、POST等)、URL和是否异步。 - **发送请求**:调用`send()`方法...

    AjaxBook简易教程

    **AjaxBook简易教程** 在Web开发领域,Ajax(Asynchronous JavaScript and XML)是一种技术,它允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这大大提升了用户体验,因为用户不再需要等待...

    AJAX简易教程(基本应用演示)

    对于现代浏览器(如Mozilla、Safari),可以使用`XMLHttpRequest`对象,而在Internet Explorer中,需要创建`ActiveXObject`。以下是一段创建跨浏览器兼容的HTTP请求对象的代码: ```javascript if (window....

    适合ajax初学者的简易聊天程序

    本教程将引导初学者深入理解AJAX(异步JavaScript和XML)技术,通过一个实际的在线聊天程序项目来阐述其核心概念和应用。这个简易聊天程序的实现不依赖任何第三方的AJAX库,如jQuery或Prototype,而是完全依靠原生的...

    一步一步实现一个简易的jQuery框架

    本教程将引导你逐步构建一个简易的jQuery框架,以理解其核心原理。以下是你需要知道的关键知识点: 1. **选择器引擎**: jQuery的核心功能之一就是高效的选择DOM元素。在你的简易框架中,你需要实现类似`$("#id")`...

    ajax初学者教程 PPT格式

    在PPT教程中,我们将探讨Ajax的基本概念、优点以及XMLHttpRequest对象的使用。 **为什么要使用Ajax** 1. **提升用户体验**:Ajax允许用户在不离开当前页面的情况下进行交互,比如搜索时的自动补全功能,这提供了更...

    javascript 网页开发实例教程

    3. AJAX:通过XMLHttpRequest或fetch API实现页面无刷新的数据交换,提升网页交互性能。 4. jQuery库:介绍jQuery库的使用,简化DOM操作,快速实现常见交互功能。 5. Vue.js框架:学习Vue.js的基础和进阶,包括...

    XML 中文帮助文档 - 教程

    通过XMLHttpRequest对象,JavaScript可以实现异步数据通信,即在不刷新页面的情况下,从服务器获取XML数据并更新页面内容。这为创建复杂的动态Web应用程序提供了可能。 XML高级特性: XML命名空间用于解决元素名称...

    ajax初级教程之获取博文列表

    例如,老版本的Internet Explorer使用ActiveXObject来创建,而其他的浏览器则使用new XMLHttpRequest()。 2. 异步请求与回调函数: 使用XMLHttpRequest对象发起GET请求,服务器响应后,会触发onreadystatechange...

    ajax 基础(入门学习者)

    在本教程中,我们将深入探讨Ajax的基础知识,包括如何创建一个简易留言板、验证表单、弹出提示以及模拟Excel表格的功能。 ### 1. Ajax基础概念 Ajax的核心是通过JavaScript与服务器进行异步通信。它利用...

    HTML5 api 调用示例

    9. **Fetch API**:替代了传统的XMLHttpRequest,提供了更简洁、更强大的异步数据请求方法。`fetch(url).then(response => response.json())`用于发起GET请求并处理返回的JSON数据。 10. **WebRTC (Real-Time ...

    ajax+asp[1].net简单留言本实例

    在ASP.NET中,可以使用jQuery库或者原生的XMLHttpRequest对象实现Ajax通信。 2. **ASP.NET控件**:ASP.NET提供了多种内置控件,如TextBox、Button和GridView,可以方便地构建Web界面。在这个实例中,可能会用到...

    jQuery版AJAX简易封装代码

    - jQuery 提供了简单的 AJAX 方法:$.ajax(),其语法与原生 JavaScript 的 XMLHttpRequest 对象的使用方式类似,但更为简洁。 - 使用 $.ajax() 方法可以指定不同的配置项,例如请求类型(GET、POST)、请求的 URL...

    Php mysql ajax 实现留言本

    本教程将详细介绍如何使用这三种技术实现一个基本的在线留言本,这对于初学者理解它们的集成工作原理非常有帮助。 **一、PHP(PHP:Hypertext Preprocessor)** PHP是一种广泛使用的开源服务器端脚本语言,尤其...

    HTML编辑器-学习版

    6. AJAX使用:了解XMLHttpRequest对象,以及如何使用JavaScript发送异步请求,处理响应,并更新页面。 通过"HTML编辑器-学习版",你可以逐步熟悉这些概念,动手实践,从而提升你的HTML和Web开发技能。无论是对网页...

    Ajax与mysql数据交互实现留言板功能

    同时,建议开发者自行上网查询相关安装教程,并且在实际开发中多实践、多探索。 本文通过一个简单的留言板功能实现案例,系统地介绍了Ajax、jQuery、PHP和MySQL在Web开发中的协同工作方式,从而为读者提供了一个...

Global site tag (gtag.js) - Google Analytics