【后知后觉】AJAX核心对象——XMLHttpRequest

最新推荐文章于 2022-10-06 19:19:48 发布

Danna_Danna

最新推荐文章于 2022-10-06 19:19:48 发布

阅读量2k

点赞数 2

分类专栏： BS 文章标签： xmlhttprequest ajax asynchronous 异步 activex

本文链接：https://blog.csdn.net/dandanzmc/article/details/38582507

版权

BS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

自从把AJAX学了之后，就是在云里雾里飘着，想总结，却无从下手，就一直拖到现在。最近看DRP，王勇老师简单的讲了AJAX，对这个又是技术又是技巧的东西做了再一次的解，感觉自己稍微理解了一些。现将我现在理解的分享下。

首先什么是AJAX呢？

AJAX简介：

AJAX这个名词最早是由Jesse James Garrett提出的，当时给出的解释是：Asynchronous JavaScript And XML，虽然当时Jesse James Garrett也曾发表文章介绍这个技术，但是真正被人们所熟知的时候还是在Google在Google Labs发布了Google Maps和Google搜索引擎之后。

其实关于AJAX，它是一种创建快速动态网页的一种技术，是几种技术的合成体，这几种技术包括：

基于HTML+CSS的标准的表示；

用（DOM）Document Object Model进行动态显示和交互；

用XMLHttpRequest与服务器进行异步通信；

用JavaScript绑定和处理；

用XML做数据交换。

正式这这几种技术合成一体，才构成了强大的AJAX，那么AJAX的核心是什么呢？

AJAX的核心对象：XMLHttpRequest对象

XMLHttpRequest对象是JavaScript的一个对象，其实这个对象早在IE5（1995年发布）出现的时候就有了，是将它实现成一个对象——ActiveX，而其他浏览器是将它实现为一个本地的JavaScript对象，正是因为有这些差异，所以在JavaScript中才包含一些逻辑，从而使用Activex技术或者使用本地JavaScript对象技术创建XMLHttpRequest的实例。到底如何创建呢？

创建XMLHttpRequest对象：

var xmlhttp=null;
if (window.XMLHttpRequest){
	//IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
 }
else{
	//IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

分析：

首先创建全局作用变量xmlhttp来保存XMLHttpRequest，根据不同的浏览器返回的对象的不同，决定实例化对象，Firefox等浏览器调用本地的JavaScript来实例化对象，而IE5，IE6根据ActiveX对象来创建XMLHttpRequest实例。那这个对象的主要方法和属性有哪些呢？

XMLHttpRequest方法与属性：

方法：

分析：

open(method,url,async) ，建立对服务器的应用，有三个参数，参数1：需要提供提交方式（GET、POST、PUT）；参数2：提供所调资源的URL；参数3：指示是同步还是异步的布尔值，默认为true，表示异步。

send(string)：string，可选参数，具体向服务器发出请求，如果请求声明为异步，则方法立即返回，否则会等待直到服务器接到响应为止。string，仅用于POST请求。

setRequestHeader(header，value)：有两个参数，第一表示设置的首部，第二表示要在首部放置的值。

属性：

了解了XMLHttpRequest的创建、方法、属性后，我们应该怎么使用AJAX去实现一个简单的请求呢？

XMLHttpRequest对象的五步使用法：

1、建立XMLHttpRequest对象；
2、注册回调函数；
3、使用open方法和服务器端交互；
4、设置发送的数据，开始和服务器端交互；
5、在回调函数中判断交互是否结束，响应是否正确，并根据服务器端返回的数据，更新页面内容。

实例：

前台：

<body class="body1" οnlοad="init()">
	<form name="userForm" target="_self" id="userForm">
		<div align="center">
			<hr width="97%" align="center" size=0>
			<table width="95%" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="22%" height="29">
						<div align="right">
							<font color="#FF0000">*</font>用户代码: 
						</div>
					</td>
					<td width="78%">
						<input name="userId" type="text" class="text1" id="userId" οnblur="validate()"size="10" maxlength="10">
						<span id="spanUserId"></span>
					</td>
				</tr>
				<tr>
					<td height="26">
						<div align="right">
							<font color="#FF0000">*</font>用户名称: 
						</div>
					</td>
					<td>
						<input name="userName" type="text" class="text1" id="userName" 
							size="20" maxlength="20">
					</td>
				</tr>
				<tr>
					<td height="26">
						<div align="right">
							<font color="#FF0000">*</font>密码: 
						</div>
					</td>
					<td>
						<label>
							<input name="password" type="password" class="text1" 
								id="password" size="20" maxlength="20">
						</label>
					</td>
				</tr>
			</table>
		</div>
	</form>
</body>

JS：

        var xmlHttp;
	function createXMLHttpRequest(){
		//1：创建XMLHttpRequest对象
		//IE7+、Firefox等
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else {
		    //IE5、IE6
			if(window.ActiveXObject){
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
	}

function validate()
	{
		var field = document.getElementById("userId");
		if(trim(field.value).length!=0){
			//1：创建ajax核心对象XMLHttpRequest
			createXMLHttpRequest();
			var url="user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
			//2：注册回调函数，将方法给onredystatechange属性
			xmlHttp.onreadystatechange=callback;
			//3：使用open方法，设置请求方式、url、是否异步
			xmlHttp.open("GET",url,true);
			//4：将设置信息发送给ajax引擎
			xmlHttp.send(null);
		}else{
			document.getElementById("spanUserId").innerHTML="";
		}
	}

function callback(){
		//5：在回调函数中判断交互是否结束，响应是否正确，并根据服务器端返回的数据，更新页面内容。
		//与服务器交互完成，即Ajax引擎状态成功
		if(xmlHttp.readyState==4){
			//200表示“HTTP协议状态成功”，404表示“未找到”，500表示“服务器内部错误”
			if(xmlHttp.status==200){
				if(trim(xmlHttp.responseText)!=""){
					document.getElementById("spanUserId").innerHTML="<font color='red'>"+xmlHttp.responseText+"</font>";
				}
				else{
					document.getElementById("spanUserId").innerHTML="";
				}	
			}else{
				alert("请求失败，错误码="+ xmlHttp.status);
			}
		}
	}

效果如下：

总结：

Ajax，简单来说就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面，这其中最关键的一步就是从服务器获得请求数据，实现页面无刷新，在页面内与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

Danna_Danna

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
12
评论
【后知后觉】AJAX核心对象——XMLHttpRequest

自从把AJAX学了之后，就是在云里雾里飘着，想总结，却无从下手，就一直拖到现在。最近看DRP，王勇老师简单的讲了AJAX，对这个又是技术又是技巧的东西做了再一次的解，感觉自己稍微理解了一些。现将我现在理解的分享下。首先什么是AJAX呢？ AJAX简介： AJAX这个名词最早是由Jesse James Garrett提出的，当时给出的解释是：Asynchronous JavaScript And XML，虽然当时Jesse James Garrett也曾发表文章介
复制链接

扫一扫

专栏目录