MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。

了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法:

先看看IE创建XMLHttpRequest 对象的方法(方法1):

var xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//较新的IE版本创建Msxml12.XMLHTTP对象

var xmlhttp=ActiveXobject("Microsoft.XMLHTTP");//较老的IE版本创建Microsoft.XMLHTTP对象

而 Mozilla、Opera、Safari 和大部分非IE的浏览器都使用下面这种方法(方法2)创建XMLHttpRequest 对象:

var xmlhttp=new XMLHttpRequest();

注意:实际上Internet Explorer 使用了一个名为 XMLHttp 的对象,而不是 XMLHttpRequest 对象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器都使用的是后者(下文统称 XMLHttpRequest 对象)。IE7开始也开始使用XMLHttpRequest 对象了。

因此我们需要创建一个能兼容多浏览器的XMLHTTPRequest对象:

第一种方法:

var xmlhttp=false;//创建一个新变量并赋值false,使用false作为判断条件说明还没有创建XMLHTTPRequest对象

function CreateXMLHttp(){

try{

xmlhttp=new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。

}catch(e){

try{

xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)。

}catch(e){

try{

xmlhttp=ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。

}catch(failed){

xmlhttp=false;//如果失败了还保持false

}

}

}

return xmlhttp;

}

判断是否成功的例子:

if(!xmlhttp){

创建xmlhttp失败

}else{

创建xmlhttp成功

}

第二种方法:  if(typeof(XMLHttpRequest)=="undefined" && window.ActiveXObject){

function XMLHttpRequest(){

var xmlhttp_arr=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

var xmlhttp;

for(i=0;i<xmlhttp_arr.length;i++){

if(xmlhttp=new ActiveXObject(xmlhttp_arr[i]))

break;

}

return xmlhttp;

}

}

//这个是除了IE之外的浏览器创建XMLHttpRequest对象

var xmlhttp=new XMLHttpRequest();

创建xmlhttp成功后,然后再来看看它的一些属性和方法吧,还有最重要的onreadystatechange事件句柄

 方法:

open() 初始化http请求参数,包括URL和http方法,但是不发送请求;

abort() 取消当前响应,关闭连接并断开所有网络未结束的活动;

getAllResponseHeaders() 把http响应头部作为未解析字符串返回;

getResponseHeaders) 返回指定的http响应头的值;

send() 发送http请求使用传递给open()方法的参数,以及传个该方法的可选请求体;

setResponseHeader() 向一个打开但没有发送的请求设置或添加一个Http请求。

 属性:

readyState 说明http请求的状态;(有5个状态分别是

0 表示没有初始化;

1 表示读取中

2 表示已读取

3 交互中(接受中)

4 完成

)

responseText 说明为服务器接收到得响应体,如果没有接收到数据就返回空字符串;

responseXML 说明对请求的回应 解析为XML并用document对象返回;

status 说明http请求的状态;

statusText 说明http请求状态不是以数字形式而是用名称;

onreadystatechange 是readySate状态改变时调用事件的函数。

下面是一个发送请求数据并返回结果的xmlhttpRequest对象;

生成一个XMLHTTPRequest对象

var xmlhttp=CreatXMLHttp();
 xmlhttp.open("get","http://www.jb51.net/jaryle",true);
 xmlhttp.onReadyStateChange=getresult;
//怎么告诉XMLHttpRequest 对象状态变化时让谁来处理这个变化呢用到二种方法:一种是匿名方法xmlhttp.onReadyStateChange=function(){处理变化的代码} 另一种方法:指定方法:xmlhttp.onReadyStateChange=getresult;
    function getresult(){处理变化的代码}
 xmlhttp.send();
 function getresult(){
 if(xmlhttp.readyState==4){ //当readyState的状态等于4时表示接收到数据
 if(xmlhttp.status==200){ //这个时候就需要用到status属性,即由服务器返回的 HTTP 状态代码。 xmlhttp.status 等于200时表示传输过程完整没有错误
 alert(xmlhttp.responseText);
}
}
 }

XMLHTTPRequest对象的创建与浏览器的兼容问题的更多相关文章

  1. AJAX - 创建 XMLHttpRequest 对象

    XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject ...

  2. Ajax学习系列——创建XMLHttpRequest对象

    Ajax - 创建XMLHttpRequest对象 首先介绍什么是XMLHttpRequest: XMLHttpRequest是Ajax的基础.中文可以解释为可扩展超文本传输请求.术语缩写为XHR. ...

  3. Ajax中的XMLHttpRequest对象详解

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  4. 详解AJAX核心 —— XMLHttpRequest 对象 (上)

    我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊.新手或者对低层还不是很了解的人可以看看,帮助理解与记忆. XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程 ...

  5. 详解AJAX核心中的XMLHttpRequest对象

    转自:http://developer.51cto.com/art/200904/119577.htm XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHtt ...

  6. Ajax中的XMLHttpRequest对象详解(转)

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  7. 【02】AJAX XMLHttpRequest对象

    AJAX XMLHttpRequest对象   XMLHttpRequest 对象用于与服务器交换数据,能够在不重新加载整个网页(刷新)的情况下,对网页进行部分更新. XMLHttpRequest 对 ...

  8. AJAX-创建XMLHttpRequest对象

    AJAX-创建XMLHttpRequest对象 1.XMLHttpRequest是AJAX的基础,所有现在浏览器都支持,用于在后台与服务器交换数据,也就意味着可以在不加载整个页面的情况下对整个页面进  ...

  9. XMLHttpRequest 对象

    XMLHttpRequest 对象 XML XSLTXML 解析器XMLHttpRequest 对象用于在后台与服务器交换数据. 什么是 XMLHttpRequest 对象? XMLHttpReque ...

随机推荐

  1. C++ 字符处理函数

    C/C++里有一个头文件#include <ctype.h>,里面定义了很多字符函数,在实际开发中,用起来很方面. int isalpha(int ch)  若ch是字母('A'-'Z', ...

  2. 预处理指令 #import

    vs class # import会包含这个类的所有信息,包括实体变量和方法, # @class只是告诉编译器,其后面声明的名称是类的名称,至于这些类是如何定义的,先不考虑.

  3. Scrapy 爬虫 使用指南 完全教程

    scrapy note command 全局命令: startproject :在 project_name 文件夹下创建一个名为 project_name 的Scrapy项目. scrapy sta ...

  4. https://github.com/chenghuige/tensorflow-exp/blob/master/examples/sparse-tensor-classification/

        https://github.com/chenghuige/tensorflow-exp/blob/master/examples/sparse-tensor-classification/ ...

  5. Oracle并发与多版本控制

    1.什么是并发 2.事务隔离级别    2.1 READ UNCOMMITTED    2.2 READ COMMITTED    2.3 REPETABLE READ    2.4 SERIALIZ ...

  6. java相关的小问题

    对线程异常的处理 调用Thread的静态方法Thread.setDefaultUncaughtExceptionHandler()

  7. 详解Eclipse断点

    原文链接:http://www.blogjava.net/jiangshachina/archive/2011/11/20/364367.html 大家肯定都用过Eclipse的调试的功能,在调试的过 ...

  8. python学习5 常用三方模块

    watchdog: 监控指定目录/文件的变化并自定义处理事件 例子

  9. 封装jdbc 单例模式的应用

    实现增删该查的jdbc封装 import java.io.IOException; import java.io.InputStream; import java.sql.Connection; im ...

  10. React,React Native中的es5和es6写法对照

    es6用在React中的写法总结: 在es6还没有完全支持到浏览器的阶段里,已经有很多技术人员开始用es6的写法来超前编程了,因为有转义es6语法的工具帮助下,大家才可大量使用.解析看看es6写法用在 ...