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==){ 
    if(xmlHttp.status==){ 
        //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多线程编程简介

    虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题.造成这些困难的主要原因是什么呢?是与服务器的异步通信问题?还是GUI程序设计问题呢?通常这两项工作都是由桌 ...

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

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

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

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

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

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

  7. javaScript遍历对象、数组总结(转载)

    javaScript遍历对象.数组总结  转载来源 https://www.cnblogs.com/chenyablog/p/6477866.html 在日常工作过程中,我们对于javaScript遍 ...

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

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

  9. JavaScript的XMLHttpRequest对象

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

随机推荐

  1. python常见概念

    1. 什么是鸭子类型? 不要检查它是不是鸭子:检查它的叫声像不像鸭子,走起路来像不像鸭子.如果走起路来像鸭子,叫起来也像鸭子,那么它就是鸭子.鸭子类型是编程语言中动态类型语言中的一种设计风格,一个对象 ...

  2. Gym - 101981D Country Meow(模拟退火)

    题意 三维空间有\(n\)个点,找到另外一个点,离所有点的最大距离最小.求这个距离. 题解 \(1\).最小球覆盖,要找的点为球心. \(2\).模拟退火. 还是补一下模拟退火的介绍吧. 模拟退火有一 ...

  3. 关于spark入门报错 java.io.FileNotFoundException: File file:/home/dummy/spark_log/file1.txt does not exist

    不想看废话的可以直接拉到最底看总结 废话开始: master: master主机存在文件,却报 执行spark-shell语句:  ./spark-shell  --master spark://ma ...

  4. mysql插入、修改、删除

    联合查询: union:合并.联合,将多次查询结果合并成一个结果 语法: 查询语句1: union[all] 查询语句2: union [all] ... 意义 1.将一条比较复杂的查询语句可拆分成多 ...

  5. django 自定义过滤器中的坑.

    今天在创建自定义过滤器的时候,设置已正常.但是在运行后报: 'filter' is not a valid tag library: Template library filter not found ...

  6. day14 前端基础 HTML

    从今天开始,学习前端基础. 前端,就是HTML CSS JS 等 对于我们这种初学者,并不知道这些专业术语都是什么,给大家举一个形象的例子: HTML  就是一个人,赤裸裸的人 CSS    就是衣服 ...

  7. IOS开发---菜鸟学习之路--(十四)-将BASE64图片转换成Image

    本文基本全部都是代码 首先是.H文件 #import <Foundation/Foundation.h> @interface Base64AndImageHelp : NSObject ...

  8. cegui 编译过程详解(cegui-0.8.2)

    cegui配置整了好长时间了,在一位大牛帮助下终于搞定了,网上的教程大多是老版本的,cegui-0.8.2版的配置寥寥无几,现在总结一下,献给正在纠结的小白们. 准备工作 第一步,先下载cegui-0 ...

  9. Leetcode 521.最长特殊序列I

    最长特殊序列 I 给定两个字符串,你需要从这两个字符串中找出最长的特殊序列.最长特殊序列定义如下:该序列为某字符串独有的最长子序列(即不能是其他字符串的子序列). 子序列可以通过删去字符串中的某些字符 ...

  10. 如何利用c++编写不能被继承、但可以在类外定义对象的类

    #include <iostream> #include<string> #include<map> #include<vector> #include ...