ajax XMLHttpRequest详解

最早应用XMLHTTP的是微软,IE(IE5以上)通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla(Mozilla1.0以上及NetScape7以上)做出的回应是创建它自己的继承XML代理类:XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况,XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。

XMLHttpRequest的应用:
XMLHttpRequest对象在JS中的应用
var xmlhttp = new XMLHttpRequest();
微软的XMLHTTP组件在JS中的应用
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
XMLHttpRequest 对象方法
/**
* Cross-browser XMLHttpRequest instantiation.
*/

if (typeof XMLHttpRequest == 'undefined') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
for (var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
throw new Error("No XML component installed!")
}
}
function createXMLHttpRequest() {
try {
// Attempt to create it "the Mozilla way"
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
// Guess not - now the IE way
if (window.ActiveXObject) {
return new ActiveXObject(getXMLPrefix() + ".XmlHttp");
}
}
catch (ex) {}
return false;
};

XMLHttpRequest 对象方法 方法 描述
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返问完整的headers
getResponseHeader("headerLabel") 作为字符串返问单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数
send(content) 发送请求
setRequestHeader("label", "value") 设置header并和请求一起发送

XMLHttpRequest 对象属性 属性 描述
onreadystatechange 状态改变的事件触发器
readyState 对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态码, 如:404 = "文件末找到" 、200 ="成功"
statusText 服务器返回的状态文本信息

XMLHttpRequest 使用经验

*
*author Jouy.lu
*/
var xmlHttp; //首先定义一个全局域变量来保存对象的引用;
function createXMLHttpRequest(){ //该方法用来创建XMLHttpRequest对象的实例.
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
}

考虑到兼容浏览器的问题:建议的写法如下:

var xmlhttp;
function createXmlhttp(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}

}
else if(window.ActiveXObject){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if(!xmlhttp){
window.alert("Your broswer not support XMLHttpRequest!");
}
return xmlhttp;
}
/************************************XMLHttpRequest的标准操作*********************
abort():终止当前请求;
getAllResponseHeaders():把HTTP所以响应首部作为键/值对返回;
getResponseHeader("header");返回指定首部的串值;
open("POST/GET/PUT","url");建立对服务器的调用,url参数可以是相对URL或绝对URL,该方法还包含了另三个可选参数;
send(content);向服务器发送请求;
setRequestHeader("header","value");把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。
注:
void open(string method, string url, boolean asynch, string username, string password):这个方法会建立对服务器的调用。
要提供调用的特定方法(GET、POST或PUT),还要提供所调用资源的URL。另外还可以传递一个Boolean值,指示这个调用是异步还是同步的,
默认值为true,这表示请求本质上是异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。由于异步调用是使用Ajax
的主要优点之一,所以倘若将这个参数设置为false,从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。在某些情况下这,个参数
设置为false也是有用的,比如在持久存储页面之前你可能想先验证用户的输入。最后两个参数不说自明,允许你指定一个特定的用户名和口令。
void send(content):这个方法具体向服务器发出请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待,直到接收到响应
为止。参数是可选的,可以是一个DOM对象的实例、一个输入流,或者是一个串。传入这个对象的内容会作为请求体的一部分发送。
void setRequestHeader(string header, string value):这个方法为HTTP请求中一个给定的首部设置值。它有两个参数,第一个串表
示要设置的首部,第二个串表示要在首部中放置的值。需要说明,这个方法必须在open()之后才能调用。在所有这些方法中,最有可能用到
的就是open()和send()。XMLHttpRequest对象还有许多属性,在设计Ajax交互时这些属性非常有用。
void abort(): 顾名思义,这个方法就是要停止请求。
string getAllResponseHeaders(): 这个方法的核心功能对Web应用开发人员应该很熟悉了,它会返回一个串,其中包含HTTP请求的所有响
应首部。首部包括Content-Length、Date和URI。
string getResponseHeader(string header):这个方法与getAllResponseHeaders()是对应的,不过它有一个参数来表示你希望得到哪一个
首部值,并且会把这个值作为一个串返回。

******************************/
/*******************************标准XMLHttpRequest属性**********************
onreadystatechange:每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数。
readyState:请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载, 2 = 已加载, 3 = 交互中, 4 = 完成。
responseText:服务器的响应,表示为一个串。
responseXML:服务器的响应,表示为XML。这个对象可以解析为一个DOM对象。
status:服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等).
statusText:HTTP状态码的相应文本(OK或Not Found(未找到)等等)。
***************************************************************************
*/

/*********************来看看到底要怎么才能发送请求*******
使用XMLHttpRequest对象发送请求的基本步骤如下:
1.得到XMLHttpRequest对象实例的一个引用,为此,可以创建一个新的实例,也可以访问包含有
XMLHttpRequest实例的一个变量。
2.告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变。为此要把对象的
onreadystatechange属性设置为指向一个JavaScript函数的指针。
3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个
参数:一个是指示所用方法(通常是GET或POST)的串,另一个是表示目标资源URL的串,还有一
个Boolean值,指示请求是否是异步的。
4. 将请求发送给服务器。XMLHttpRequest对象的send()方法会把请求传送到指定的目标资源。
send()方法接受一个参数,这通常是一个串或一个DOM对象。这个参数会作为请求体的一部分传送到
目标URL.向send()方法提供参数时,要确保open()中指定的方法是POST。如果没有数据要作为请求体
的一部分发送,则使用null。

异步方式给用户带来的体验:(我想程序员看到这段解释,心里真的很爽!)
对服务器的请求是异步发送的,因此浏览器可以继续响应用户输入,并在后台等待服务器的响应。
如果选择同步操作,而且倘若服务器的响应要花好几秒才能到达,浏览器就会表现得很迟钝,在
等待期间不能响应用户的输入。这样一来,浏览器好像被冻住一样,无法响应用户输入,而异步
做法可以避免这种情况,从而让最终用户有更好的体验,尽管这种改善很细微,但确实很有意义。
这样用户就能继续工作,而且服务器会在后台处理先前的请求。能与服务器通信而不打断用户的
工作流,这样就可以采用很多技术来改善用户体验。例如,假设有一个验证用户输入的应用。用
户在输入表单上填写各个域时,浏览器可以定期地向服务器发送表单值来进行验证,此时并不打
断用户,他还可以继续填写余下的表单域。如果某个验证规则失败,用户会立即得到通知,而不
必等表单真正发送到服务器进行处理时才知道有错误,这就能大大节省用户的时间,也能减轻服
务器上的负载压力,因为不必在表单提交不成功时完全重建表单的内容。

下面是说明安全问题的:
XMLHttpRequest对象要受制于浏览器的安全“沙箱”。XMLHttpRequest对象请求的所有资源
都必须与调用脚本在同一个域(domain)内。这个安全限制使得XMLHttpRequest对象不能请
求脚本所在域之外的资源。这个安全限制的强度如何因浏览器而异(见图2-5)。Internet Explorer
会显示一个警告,指出可能存在一个安全风险,但是用户可以选择是否继续发出请求。Firefox则
会断然停止请求,并在JavaScript控制台显示一个错误消息。Firefox确实提供了一些JavaScript技巧,
使得XMLHttpRequest也可以请求外部URL的资源。不过,由于这些技术针对特定的浏览器,最好不要用,
而且要避免使用XMLHttpRequest访问外部URL

时间: 2024-09-25 00:16:08

ajax XMLHttpRequest详解的相关文章

JavaScript中浅讲ajax图文详解_javascript技巧

1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

谈谈jQuery Ajax用法详解_jquery

定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax() 可以不带任何参数直接使用. 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置. jQuery Ajax在web应用开发中很常用

Ajax基础详解教程(一)_AJAX相关

什么是Ajax? 在研究ajax之前首先让我们先来讨论一个问题 --什么是Web 2.0 .听到 Web 2.0 这个词的时候,应该首先问一问 "Web 1.0 是什么?" 虽然很少听人提到 Web 1.0,实际上它指的就是具有完全不同的请求和响应模型的传统 Web.比如,到 hdu.edu.cn 网站上点击一个按钮.就会对服务器发送一个请求,然后响应再返回到浏览器.该请求不仅仅是新内容和项目列表,而是另一个完整的 HTML 页面.因此当 Web 浏览器用新的 HTML 页面重绘时,可

$.ajax()常用方法详解(推荐)_AJAX相关

AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分.接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆

jQuery Ajax 实例详解 ($.ajax、$.post、$.get)_AJAX相关

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:http://www.jb51.net/article/26903.htm $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data ,

Ajax基础详解教程(二)_AJAX相关

在上篇文章给大家介绍了Ajax基础详解教程(一),讲到Ajax中open方法的第三个参数异步和同步的问题,今天呢,就来继续往下唠,先接着上回的代码 var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Mic

$.ajax()常用方法详解(推荐)

AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分.接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆

json传值以及ajax接收详解_javascript技巧

一开始进入公司,做起项目来比较不知所措,现在一个月过去了,越来越得心应手,下面是json向前端传值以及前端ajax接收,给自己记下也分享给大家. 这是两个类型不同的json与ajax的数据交互(集合.类对象) JsonConfig jsonConfig = new JsonConfig(); //lenient jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT); JSONArray json = JSONAr

AJAX机制详解以及跨域通信_AJAX相关

1.Ajax 1.1.Ajax简介   Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过.   Ajax的起源? Ajax一词源于2005年 Jesse James Garrett发表的一篇题为"Ajax:A new Approach to Web Applications".他在这篇文       章中介绍了一种新技术,用他的话说,就是Ajax :Asynchronous JavaScript +XML的缩写.