XMLHttpRequest是Ajax的核心,通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输,从而实现页面的无刷新效果。
 
XMLHttpRequest对象的常用属性:
  1. onreadystatechange:指定当readyState属性值改变时的事件处理句柄(只写);
  2. readyState:返回当前请求的状态(只读);
  3. responseText:将相应信息作为字符串返回(只读);
XMLHttpRequest对象的常用方法:
  1. open():创建一个新的HTTP请求,并制定此请求的方法,URL以及验证信息(用户名/密码);
  2. send():发送请求到HTTP服务器并接受回应。
XMLHttpRequest对象的使用需要四个步骤:
  1. 初始化XMLHttpRequest对象
  2. 指定响应处理函数
  3. 发送HTTP请求
  4. 处理服务器返回的信息
 

一、初始化XMLHttpRequest对象

    在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化,因为各个浏览器对这个实例化过程的实现不同,所以针对不同的浏览器实例化XMLHttpRequest对象的方式也不尽相同。
    针对微软IE浏览器:
        var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    针对其他的浏览器:
        var xmlHttp = new XMLHttpRequest();
    所以,综合了这两种实例化XMLHttpRequest的形式,就可以提取出一个实例化的公共方法,代码如下:
    //实例化XMLHttpRequest对象 
    function createXMLHttpRequest(){ 
        if(window.XMLHttpRequest){ 
            xmlHttp = new XMLHttpRequest();  
        }else if(window.ActiveXObject){ 
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
    }

 

二、指定响应处理函数

    接下来就要指定当服务器返回信息时客户端的处理方式。只需将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可,比如:
        xmlHttp.onreadystatechange = callBack; 
    需要说明的是,这个函数名称不加括号,不带参数;也可以使用JavaScript即时定义函数的方式定义响应函数,比如:
        xmlHttp.onreadystatechange = function(){ 
            // Do something... 
        } 
 

三、发送HTTP请求

指定响应处理函数后,就可以向服务器发出HTTP请求了。这需要调用XMLHttpRequest对象的open()和send()方法。
        xmlHttp.open("get/Post","URL",true/false); 
        xmlHttp.send(null); 
 

3.1 open()方法详解

//XMLHttpRequest对象的open()方法原型

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()方法详解

//XMLHttpRequest对象的send()方法原型 
void send(content);

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

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

在第二部中我们为XMLHttpRequest指定了响应处理函数,响应处理函数检查XMLHttpRequest对象的readyState属性值的变化,如果readyState值为4时,代表服务器已经传回所有信息,可以开始处理信息并更新页面内容了。
function callBack(){ 
    if(xmlHttp.readyState==4){ 
    if(xmlHttp.status==200){ 
        //do something with xmlHttp.responseText; 
        xmlHttp.responseText; 
            }
    } 
}

 

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程序中的运行周期,即初始化、指定响应函数、发送请求、处理响应。
 
下面是本示例的完整代码:
var xmlHttp; 
 
function AjaxFunction(){ 
        createXMLHttpRequest(); 
        if(xmlHttp!=null){ 
    xmlHttp.onreadystatechange = callBack; 
    xmlHttp.open("get/Post","URL",true/false); 
    xmlHttp.send(null); 
        }    
}    
 
//实例化XMLHttpRequest对象 
function createXMLHttpRequest(){ 
        if(window.XMLHttpRequest){ 
    xmlHttp = new XMLHttpRequest();  
        }else if(window.ActiveXObject){ 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 

 
//指定响应函数 
function callBack(){ 
        if(xmlHttp.readyState==4){ 
                if(xmlHttp.status==200){ 
            //do something with xmlHttp.responseText; 
            xmlHttp.responseText; 
                }    
        } 
}

Javascript-XMLHttpRequest对象简介的更多相关文章

  1. Javascript Proxy对象 简介

    Javascript Proxy对象 简介 Javascript Proxy对象 改变你操作对象的方式 Proxies 是Javasript对象的中间件 ...或者说至少是那种很早的版本. ES6 中 ...

  2. javascript XMLHttpRequest对象全面剖析

    转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程 ...

  3. [Javascript]XMLHttpRequest对象实现下载进度条

    摘要 可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer&q ...

  4. javascript XMLHttpRequest 对象的open() 方法参数说明

    下文是从w3c上摘录下来的,其中参数 method 说明的很简短,不是很理解,所以又找了些资料作为补充.文中带括号部分. XMLHttpRequest.open() 初始化 HTTP 请求参数 语法o ...

  5. JavaScript使用浏览器内置XMLHttpRequest对象执行Ajax请求

    所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject).XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个 ...

  6. JavaScript:学习笔记(10)——XMLHttpRequest对象

    JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...

  7. JavaScript的XMLHttpRequest对象

    ajax的核心技术是XMLHttpRequest对象,简称XHR. //支持IE7及更高的版本 function createXML() { if(typeof XMLHttpReqquest!=&q ...

  8. javascript快速入门23--XHR—XMLHttpRequest对象

    创建XMLHttpRequest对象 与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest ...

  9. JavaScript课程——Day07(对象简介、Math对象、时间对象、字符串对象)

    1.对象简介 在javaScipt中,一切皆为对象或者皆可以被用作对象 宿主对象:window,document 内置对象:Number  String  Boolean  Array数组  Obje ...

  10. AJAX的核心XMLHttpRequest对象

    为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,jQuery,Css...)重新融合程一个新的知识框架.而XMLHttpRequest对象则是其中的重 ...

随机推荐

  1. UIImage 缩放等效果处理

    //等比率缩放 - (UIImage *)scaleToSize:(UIImage *)img size:(CGSize)size{ // 创建一个bitmap的context // 并把它设置成为当 ...

  2. Oracle中错误代码ORA-02292 违反了完整性约束条件解决

    百度处理: A表被B表引用,删除A表的时候提示ORA-02292,A表的主键被引用了,虽然已经把B表的数据全部删除掉,但仍然删除不了A表的数据.解决办法: 用禁用约束语句把A表的主键约束给禁用掉.1. ...

  3. js刷新页面方法

    1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取 ...

  4. adb常用命令介绍

    adb connect 命令格式:adb connect <host>[:<port>] 作用:connect to a device via TCP/IP,Port 5555 ...

  5. ES6学习(1)——如何通过babel将ES6转化成ES5

    使用babel编译ES6 babel是一个工具,可以通过多个平台,让js文件从ES6转化成ES5,从而支持一些浏览器并未支持的语法. Insall babel $ sudo npm install b ...

  6. My97DatePicker源码的K方法

    <head></head> <script> var X = window,M = "document", C = "getEleme ...

  7. (DP6.1.4.2)POJ 1088 滑雪

    其实下面用到的是搜索.(呜呜,DP写的过了测试用例但是却总是AC不了,所以改用搜索来做了) /* * POJ_1088.cpp * * Created on: 2013年10月13日 * Author ...

  8. Educational Codeforces Round 5 - C. The Labyrinth (dfs联通块操作)

    题目链接:http://codeforces.com/contest/616/problem/C 题意就是 给你一个n行m列的图,让你求’*‘这个元素上下左右相连的连续的’.‘有多少(本身也算一个), ...

  9. 山东理工大学ACM平台题答案关于C语言 1137 C/C++经典程序训练7---求某个范围内的所有素数

    C/C++经典程序训练7---求某个范围内的所有素数 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 求小于n的所有素数,按照每行 ...

  10. ListCtrl控件的使用

    list contrl控件的使用 .建立基于对话框的应用程序,布置界面,设置属性. 注意添加的是listctrl控件,不是listbox控件,在控件工具箱的倒数第五行list control控件. 属 ...