Ajax的XMLHttoRequest对象

Ajax在我们的网页中无处不在,我们平常开发中也都会使用Ajax,可是我们对它的认识又有多少啦,又有多少人知道它的全名,又有多少人会把它当成阿贾克斯

Ajax的由来

2005年,Jesse James Garrett 介绍了一种技术,用他的话说就叫Ajax,是对Asynchronous JavaScript+XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验。这一技术改变了自WEB诞生以来就一直沿用的"单击“,“等待的交互模式”;

XMLHttpRequest对象

Ajax技术的核心是XMLHttpRequest对象(简称XHR),在IE5中,XHR对象时通过MSXML库中的一个ActiveX对象实现的。因此IE中会有三种不同版本的XHR对象,即MSXML2.XMLHttp,MSXML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0;

创建XHR对象

function createXHR(){
		if(typeof arguments.callee.activeXString!="string"){
			var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
			i,len;
			for(i=0,len=versions.length;i<len;i++){
				try{
					new ActiveXObject(versions[i]);
					arguments.callee.activeXString=versions[i];
					break;
				}catch(ex){

			}
		}

	}
	return new ActiveXObject(arguments.callee.activeXString);
}

		var xhr=createXHR();

在IE7和火狐谷歌等主流浏览器里可以直接创建

var xhr2=new XMLHttpRequest();

XHR的用法

在使用XHR对象时,要调用的第一个方法是open(),它接受3个参数,要发送的请求类型("get","post"),请求的URL和表示是否异步发送请求的布尔值。

var xhr2=new XMLHttpRequest();
xhr2.open("get","login.do",false);

这段代码会发送一个路径为login.do的get请求,这里的URL可以是相对于执行代码的页面路径,也可以是绝对路径,调用open()方法并不会发送真正的请求,而只是启动一个请求,以备发送,如果要发送请求的话可以调用send()方法。

var xhr2=new XMLHttpRequest();
xhr2.open("get","login.do",false);
xhr2.send();

这里send可以传入一个参数,作为我们的请求参数发送过去,当我们请求发送完成后,会填充我们的XHR,得到一些响应,这里介绍几个主要的

responseURL:请求的URL绝对路径地址

Status:返回的响应状态,比较出名的有200成功,400找不到路径,405参数或者类型不匹配,500服务器错误

responseURL:请求的URL绝对路径地址

timout:响应时间

response:响应信息

responseText:响应主体返回的文本内容
如果是发送异步请求的话,我们可以检测XHR对象的readyState属性,该属性表示响应过程中的活动阶段

0:未初始化,尚未调用open()方法。

1:启动。已经调用open()方法,但尚未调用send()方法。

2:发送。已经调用send()方法,但是尚未接收到响应。

3:接收。已经接收到部分响应数据。

4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange时间。

HTTP头部信息

每个HTTP请求和响应都会带有对应的头部信息,XHR对象也提供了操作这两种头部(即请求头部和响应头部)信息的方法。

Host 请求的域名
User-Agent 浏览器端浏览器型号和版本
Accept 可接受的内容类型
Accept-Language 语言
Accept-Encoding 可接受的压缩类型 gzip,deflate
Accept-Charset 可接受的内容编码 UTF-8,*
服务器端的响应Header(response header)
Date 服务器端时间
Server 服务器端的服务器软件 Apache/2.2.6
Etag 文件标识符
Content-Encoding传送启用了GZIP压缩 gzip
Content-Length 内容长度
Content-Type 内容类型

GET请求

GET请求和POST的请求的具体区别,我在一篇文章里面已经讲过,这里就不说了,具体说一下对XHR而言,位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。在传入的时候使用decodeURIComponent() 进行编码,在服务器接收的时候再使用这个函数解码。

		function get(){
     //获取xhr对象
     var xhr = getXhr();
     //规定请求类型
	 //url
	 var url=encodeURIComponent("login.do?username=123");
     xhr.open("get",url,true);
     //发送请求
     xhr.send();
    //处理服务器响应事件
     xhr.onreadystatechange = function (){
          //判读是否处理完毕 与判读服务器是否处理成功!
          if(xhr.readyState==4 && xhr.status==200){
                    alert(xhr.responseText);
              }
          }
      }
} 

POST请求:

默认情况下,服务器对POST请求和提交Web表单的请求并不会一视同仁。因此,服务器端必须有程序来读取发送过来的原始数据,并从中解析成有用的部分,不过我们可以使用XHR来模仿表单提交。

function post(){
     //获取xhr对象
     var xhr = getXhr();
     //规定请求类型
     xhr.open("post","login.do",true);
    //设置头信息
     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
 //发送参数
 xhr.send("username=345&pass=123");
//相应事件处理
   xhr.onreadystatechange = function (){
  //判读是否处理完毕 与判读服务器是否处理成功!
      if(xhr.readyState==4 && xhr.status==200){
                    alert(xhr.responseText);
              }
    }
}  

注意:
设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例:xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

与get请求相比,POST请求消耗的资源会多一些,如果发送相同的数据,get的请求速度最多可以达到post的两倍。

时间: 2024-10-09 09:34:15

Ajax的XMLHttoRequest对象的相关文章

AJAX入门--- XMLHttpRequest对象的属性和方法

由于刚刚接触到Ajax对其比较陌生,而其中的XMLHttpRequest对象更是未曾听闻.开始学之前,了解一下它的属性和方法为它的使用做下铺垫.本文重点介绍XMLHttpRequest的属性和方法. XMLHttpRequest对象的属性和事件 属性 描述 readyState 表示XMLHttpRequest对象的状态[1] responseText 包含客户端接收到的HTTP相应的文本内容[2] responseXML 服务器响应的XML内容对应的DOM对象[3] status 服务器返回h

详解AJAX核心 —— XMLHttpRequest 对象 (下)

继续上一篇的内容上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式,没有说Post方式的.那是因为要说Post方式就需要先说另外一个东西,那就是DOM(Document Object Model)文档对象模型.JavaScript通过DOM读取.改变或者删除 HTML.XHTML 以及 XML中的元素,可以重构整个 HTML 文档.可以添加.移除.改变或重排页面上的项目,而且这样的操作会马上显示在页面上.另外,所有浏览器执行W3C 发布的 DOM 标准规范,DOM

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

我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊.新手或者对低层还不是很了解的人可以看看,帮助理解与记忆. XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法: 先看看IE创建XMLHttpRequest 对象的方法(方法1): var xmlht

AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest

AJAX——核心XMLHttpRequest对象

AJAX——核心XMLHttpRequest对象

.Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存,并返回保存的图片路径展示出图片,实现一个无刷新的异步图片上传的过程,当然这里我讲解的是单张图片的保存过程,对于多图片上传的话其实我们只需要在type='file'文本框中加上一个multiple可多选,然后获取input中的文件数组遍历向后台提交感兴趣的话可以尝试,不过下一篇博客将会讲解如何使用L

jq ajax传递json对象到服务端及contentType的用法

目录 0.一般情况下,通过键值对的方式将参数传递到服务端 1.ajax 传递复杂json对象到服务端 2.content-Type 对asp.net mvc项目的重要性 0.一般情况下,通过键值对的方式将参数传递到服务端 0.1 客户端代码: $.ajax({ url: 'TestHandler.ashx', type: 'post', data: { name: "admin", age: 10 }, dataType: 'text', success: function (data

通过jQuery Ajax使用FormData对象上传文件

转自:http://www.cnblogs.com/labnizejuly/p/5588444.html FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file"

AJAX 使用XMLHttpRequest对象发送和接受数据

XMLHttpRequest是XMLHttp组件的对象,通过这个对象,Ajax可以像桌面应用程序一样只与服务器进行数据层的交换,而不必每次都刷 新界面,也不必每次将数据处理的工作都交给服务器来做:这样既减轻了服务器负担又回忆了响应速度,缩短了用户的等待时间. XMLHttpRequest对象与Ajax       在Ajax应用程序中,XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据.       需要注意的是JavaScript本身并不具有向