Ajax探究

最新推荐文章于 2021-08-05 12:05:43 发布

森林中的小屋

最新推荐文章于 2021-08-05 12:05:43 发布

阅读量388

点赞数 1

分类专栏： Web基础 js基础

本文链接：https://blog.csdn.net/xiaowu_hhb/article/details/52839600

版权

Web基础同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

js基础

11 篇文章 0 订阅

订阅专栏

1、什么是Ajax？

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）

国内翻译常为“阿贾克斯”和阿贾克斯足球队同音。Web应用的交互如Flickr,Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
Ajax对服务器没什么要求，可以为Java EE应用程序，.NET应用程序和其他类型的应用程序服务。可以通过Ajax，可以编写javascript代码来改进HTML，创建出丰富的交互性用户体验。

2、开发模式

许多重要的技术和AJAX开发模式可以从现有的知识中获取。例如，在一个发送请求到服务端的应用中，必须包含请求顺序、优先级、超时响应、错误处理及回调，其中许多元素已经在Web服务中包含了，就像现在的SOA。AJAX开发人员拥有一个完整的系统架构知识。同时，随着技术的成熟还会有许多地方需要改进，特别是UI部分的易用性。
AJAX开发与传统的CS开发有很大的不同。这些不同引入了新的编程问题，最大的问题在于易用性。由于AJAX依赖浏览器的JavaScript和XML，浏览器的兼容性和支持的标准也变得和JavaScript的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合，因此必须理解如何才能最好的使用这些技术。
综合各种变化的技术和强耦合的客户服务端环境，AJAX提出了一种新的开发方式。AJAX开发人员必须理解传统的MVC架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑CS环境的外部和使用AJAX技术来重定型MVC边界。最重要的是，AJAX开发人员必须禁止以页面集合的方式来考虑Web应用而需要将其认为是单个页面。一旦UI设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。

3、编写代码

我根据自己对Ajax的理解，我编写了简单的代码，实现Ajax的简单功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/ajax2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				var oBtn = document.getElementById('btn');

				oBtn.onclick = function() {
					ajax('aa.txt?t='+new Date().getTime(),function  (str) {
						alert(str);
					},function  () {
						alert('失败');
					});
				};
			};
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="快点我" />
	</body>
</html>

函数封装后的js代码：

function ajax(url, fnSucceed, fnFaild) {
	//1、创建对象
	if(window.XMLHttpRequest) {
		var oAjax = new XMLHttpRequest(); //非IE
	} else {
		var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //IE6
	}

	//2、链接服务器
	oAjax.open('GET', url, true);

	//3、发出请求
	oAjax.send();

	//4、接收返回
	oAjax.onreadystatechange = function() {
		if(oAjax.readyState == 4) {
			//alert(oAjax.responseText);
			if(oAjax.status == 200) {
				//alert('成功' + oAjax.responseText);
				fnSucceed(oAjax.responseText);
			} else {
				if(fnFaild) {
					//alert('失败' + oAjax.status);
					fnFaild();
				}
			}
		}
	}
}

4、兼容问题

Ajax在本质上是一个浏览器端的技术，首先面临无可避免的第一个问题即是浏览器的兼容性问题。各家浏览器对于JavaScript/DOM/CSS的支持总有部分不太相同或是有Bug，甚至同一浏览器的各个版本间对于JavaScript/DOM/CSS的支持也有可能部分不一样。这导致程序员在写Ajax应用时花大部分的时间在调试浏览器的兼容性而非在应用程序本身。因此，目前大部分的Ajax链接库或开发框架大多以js链接库的形式存在，以定义更高阶的JavaScript API 、JavaScript对象（模板）、或者JavaScript Widgets来解决此问题。如prototype.js。

5、基础应用

创建XMLHttpRequest方法

XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。

对于Internet Explorer浏览器：
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");

xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的Internet Explorer浏览器，因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。

对于Mozilla﹑Netscape﹑Safari等浏览器

创建XMLHttpRequest 方法如下：xmlhttp_request = new XMLHttpRequest();

如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。

xmlhttp_request = new XMLHttpRequest();

xmlhttp_request.overrideMimeType('text/xml');

发送请求

可以调用HTTP请求类的open（）和send（）方法，如下所示：

xmlhttp_request.open('GET',URL,true);

xmlhttp_request.send(null);

open（）的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。按照HTTP规范，该参数要大写；否则，某些浏览器（如Firefox）可能无法处理请求。

第二个参数是请求页面的URL。

第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。

服务器的响应

这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName（），当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：

xmlhttp_request.onreadystatechange = function(){
// JavaScript代码段
};

首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。

readyState的取值如下：
0 （未初始化）
1 （正在装载）
2 （装载完毕）
3 （交互中）
4 （完成）

所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：

if (http_request.readyState == 4) { // 收到完整的服务器响应 }
else { // 没有收到完整的服务器响应 }

当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。

处理从服务器得到的数据

有两种方式可以得到这些数据：

(1) 以文本字符串的方式返回服务器的响应

(2) 以XMLDocument对象方式返回响应

森林中的小屋

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax探究

1、什么是Ajax？ AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）国内翻译常为“阿贾克斯”和阿贾克斯足球队同音。Web应用的交互如Flickr,Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表
复制链接

扫一扫