解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题

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 对象 -> 指定发送地址及发送方法 -> 指定状态变化处理方法 -> 发送请求，请求发送后状态变化了就会自动调用指定的处理方法。

赞 (0)

相关推荐

  • Android M(6.x)使用OkHttp包解析和发送JSON请求的教程

    关于Android 6.0 Android老版本网络请求: 1,HttpUrlConnection 2,Apache Http Client Android6.0版本网络请求: 1,HttpUrlConnection 2,OkHttp Android6.0版本废弃了老的网络请求,那么它的优势是什么呢? 1,支持SPDY,共享同一个Socket来处理同一个服务器的所有请求 2,如果SPDY不可用,则通过连接池来减少请求延时 3,无缝的支持GZIP来减少数据流量 4,缓存响应数据来减少重复的网络请求

  • 深入解析nodejs HTTP服务

    深入解析nodejs HTTP服务

    我最近在研究nodejs的路上,正好这两天了解了nodejs HTTP服务,那么今天也算个学习笔记吧! nodejs最重要的方面之一是具有非常迅速的实现HTTP和HTTPS服务器和服务的能力.http服务是相当低层次的,你可能要用到不同的模块,如express来实现完整的Web服务器,http模块不提供处理路由.cookie.缓存等的调用.我们主要用http模块的地方是实现供应用程序使用的后端Web服务.  1.处理URL 统一资源定位符(URL)为把一个请求发到正确的服务器的特定端口上,并访问

  • 各类Http请求状态(status)及其含义详细解析

    Web服务器响应浏览器或其他客户程序的请求时,其应答一般由以下几个部分组成:一个状态行,几个应答 头,一个空行,内容文档.下面是一个最简单的应答   : 状态行包含HTTP版本.状态代码.与状态代码对应的简短说明信息.在大多数情况下,除了Content-Type之 外的所有应答头都是可选的.但Content-Type是必需的,它描述的是后面文档的MIME类型.虽然大多数应答 都包含一个文档,但也有一些不包含,例如对HEAD请求的应答永远不会附带文档.有许多状态代码实际上用 来标识一次失败的请求,

  • C#如何解析http报文

    C#如何解析http报文

    下面通过一段内容有文字说明有代码分析,并附有展示图供大家学习. 要解析HTTP报文,需要实现以下操作: 读取HTTP报头提供的各种属性 分析属性值,从中获取内容编码和字符集编码 将报头数据和内容进行分离 判断内容是否文本还是二进制,如果是二进制的则不进行处理 如果内容是文本,按报头中提供的内容编码和字符集编码进行解压缩和解码 目前没有找到.Net框架内置的解析方法,理论上HttpClient等类在内部应该已经实现了解析,但不知为何没有公开这些处理方法.(亦或是我没找到) 那么只能自己来解析这些数

  • 详解http访问解析流程原理

    详解http访问解析流程原理

    详解http访问解析流程原理 http访问网址域名解析流程: 1.在浏览器中输入www.qq.com域名,操作系统会先检查自己本地的hosts文件是否有这个网址映射关系,如果有,就先调用这个IP地址映射,完成域名解析. 2.如果hosts里没有这个域名的映射,则查找本地DNS解析器缓存,是否有这个网址映射关系,如果有,直接返回,完成域名解析. 3.如果hosts与本地DNS解析器缓存都没有相应的网址映射关系,首先会找TCP/ip参数中设置的首选DNS服务器,在此我们叫它本地DNS服务器,此服务器

  • Android天气预报之基于HttpGet对象解析天气数据的方法

    本文实例所述为Android天气预报之解析天气数据的代码,可实现获取HttpGet对象读取天气网站天气数据,并从数据中解析出天气数据,比如温度.温度.风力.风向.未来几天天气趋势.当天天气状况.空气污染指数等信息,还包括了调用对应的图片或天气动画文件,对于开发android天气预报程序的可以参考本文实例. 具体功能代码如下: import java.io.IOException; import java.text.SimpleDateFormat; import java.util.ArrayL

  • 激动人心的 Angular HttpClient的源码解析

    Angular 4.3.0-rc.0版本已经发布

  • HTTPS混合内容解析附解决方法

    HTTPS混合内容解析附解决方法

    什么是HTTPS混合内容 我们可能会有这样的经验,当我们通过HTTPS访问一个网站的时候,突然有提示:"本页面包含有不安全的内容".这个时候会询问是否显示"不安全的内容",这个时候,就是遇到了有混合内容的页面了. HTTPS下的页面,几乎很少是采用单一连接,HTML标识.图片.JS脚本以及其他页面资源不仅是多个连接获取到,甚至可能是来自完全不同的服务器和网站.为了确保一个页面进行了正确的加密,所有的页面资源都通过HTTPS进去获取是必要的.但在实际情况中,全部资源都

  • 解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题

    MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法: 先看看IE创建XMLHttpRequest 对象的方法(方法1): var xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//较新的IE版本创建Msxml12.XMLHT

  • Ajax核心XMLHttpRequest总结

    Ajax:即"Asynchronous JavaScript and XML"(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换:JavaScript操作DOM实现动态效果:运用XHTML+CSS表达信息:XML和XSLT操作数据.此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换.     使用方法      XMLHttpRequest五步使用法: 复制代码 代码如下: 1.创

  • AJAX XMLHttpRequest对象详解

    AJAX XMLHttpRequest对象详解

    AJAX是一种创建交互式网页应用的网页开发技术,是异步Javascript和XML的集合.其核心是XMLHttpRequest对象,可以在不向服务器端提交整个页面的情况下,实现局部更新网页,它是AJAX的Web应用程序架构的一项关键技术. 基本属性: 基本方法: XMLHttpRequest五步法:       第一:创建XMLHttpRequest对象 第二:注册回调函数 第三:设置和服务器交互的参数 第四:设置向服务器端发送的数据,启动和服务器端的交互 第五:判断和服务器端的交互是否完成,还

  • javascript XMLHttpRequest对象全面剖析

    一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程.这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器.与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面.换句话说,AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序. Google的G

  • 如何用ajax来创建一个XMLHttpRequest对象

    我每次创建一个对象,都要这样复杂吗?如下代码: JScript code: "testAjax.htm" 文件: 复制代码 代码如下: <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest();

  • AJAX XMLHttpRequest对象创建使用详解

    创建XMLHttpRequest对象 XMLHttpRequest是AJAX的基础. 所有现代浏览器(IE7+.Firefox.Chrome.Safari以及Opera)均内建XMLHttpRequest对象. 注:IE5/IE6需要使用ActiveRequest对象. 向服务器发送请求 xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); post方式:xmlhttp.send("id=1&a

  • AJAX客户端说明，XMLHttpRequest对象

    在CommunityServer中运用了自己的AJAX机制,没有借助其他的辅助控件.其中客户的XMLHttpRequest对象的封装,就足以让人大饱眼福,在一般的浏览器其都能够运行AJAX.下面我们来学习学习这个咚咚,希望能给更多的人带来帮助. 首先当然是要了解一下浏览器中的XMLHttp对象了: XMLHTTP方法:           备注:客户机可以使用XMLHTTP对象发送任意的HTTP请求,接受HTTP应答,还可以对应答的XML文档进行解析. Open方法:初始化一个Msxml2.XM

  • 简单谈谈AJAX核心对象

    Ajax是2005年2月才诞生但是现在已经炙手可热的一项全新技术.这项新技术能够极大地改善网站的用户体验. 什么是Ajax Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写. Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求.Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一起,共同的协作中发挥各自的作用. Ajax的优点 1.减轻服务器的负担.Ajax的原则是"按需取数据"

  • AJAX中同时发送多个请求XMLHttpRequest对象处理方法

    在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费.解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象. 下面是我最近写的一个简单的类:* XMLHttpRequest Object Pool * * @author    legend <legendsky@hotmai

  • AJax 学习笔记一(XMLHTTPRequest对象)

    现在很多公司都在做标准的静态页面,为了增强客户的体验效果,经常会涉及到AJax效果,而设计AJax使用的一种重要技术(工具)就是XMLHttpRequest对象了.今天学习了点关于XMLHttpRequest对象的一些方法和属性,有点体会,在这里也想记录起来. 1.何为XMLHttpRequest 定义:XMLHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分

随机推荐