AJAX初步学习

软考暂时告一段落了，又开始了我的B/S学习之路，开始看AJAX的系列课程，刚刚看了4集，感觉有点晕乎哈！学习一本课程需要先宏观了解一下，这篇博客，并没有说太多视频的中的知识，而是先宏观学习一下AJAX！

AJAX（Asynchronous JavaScript and XML）即异步的JavaScript与XML技术，指的是一套综合了多项技术的浏览器端网页开发技术。其实就是为了解决传统页面同步刷新，消耗过多带宽，用户界面效果不友好等问题提出的。而综合多项技术指的是：

运用XHTML+CSS来表达信息；

运用JavaScript操作DOM（DocumentObject Model）来运行动态效果；

运用XML和XSLT操作数据

运用XMLHttpRequest为Agent与网页服务器进行异步数据交换；

运用JavaScript技术来实现。

这篇博客从AJAX的基础XMLHttpRequest对象，微软提供的AJAX技术框架，和开源AJAXControlToolKit开发工具来初步了解！

一，XMLHttpRequest对象:

而XMLHttpRequest是AJAX的基础，可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest对象提供了对 HTTP协议的完全的访问，包括做出 POST和 HEAD请求以及普通的 GET请求的能力。XMLHttpRequest可以同步或异步返回 Web服务器的响应，并且能以文本或者一个 DOM文档形式返回内容。

1,创建：所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6使用 ActiveXObject），这也是我们实现异步更新的根本，下边看一下创建XMLHttpRequest对象：

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

2,请求服务器：创建了，客户端如何向服务器发送请求呢？利用 XMLHttpRequest 对象的 open() 和 send() 方法：

例如：

	xmlhttp.open("GET","test1.txt",true);
        xmlhttp.send();

3,响应：而请求了，客户端该如何响应服务器呢？利用XMLhttpRequest对象的ResponseText（获得字符串形式的响应数据）或ResponseXML（获得XML形式的响应数据）属性。例如：

ResponseText:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

ResponseXML:(这个例子稍微大一些，上下都涉及到了 )

	<html>
	<head>
	<script type="text/javascript">
	function loadXMLDoc()
	{
	var xmlhttp;
	var txt,x,i;
	
	<%--创建XMLHttpRequest对象--%>
	if (window.XMLHttpRequest)
	  {// code for IE7+,Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6,IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
	    xmlDoc=xmlhttp.responseXML;
	    txt="";
	    x=xmlDoc.getElementsByTagName("title");
	    for (i=0;i<x.length;i++)
	      {
	      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
	      }
	    document.getElementById("myDiv").innerHTML=txt;<%--//将获取的数据显示到指定的位置--%>
	    }
	  }
	xmlhttp.open("GET","/example/xmle/books.xml",true);<%--//请求打开XML文件books.--%>

	xmlhttp.send();<%--//发送请求--%>
	}
	
	</script>
	
	</head>
	
	<body>
	
	<h2>My Book Collection:</h2>
	<div id="myDiv"></div>
	<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>
	 
	</body>
	</html>

二，微软AJAX技术框架：上边是对 XMLHttpRequest 简单的了解，也是学习 AJAX 最基础的知识。在这里我还想提一下，微软为了方便用户使用，在 asp.net 平台中提供了 AJAX 扩展：

利用这些控件我们能够很方便快捷的实现很多异步通信的，而对于这些控件具体属性，方法的会在后边学习中提到！

三， AJAX ControlToolKit 扩展包： AJAX ControlToolKit 是由开源社区向广大 ASP.NET 开发者奉献的一组 Web 控件，基本涵盖了 Web 页面开发最需要使用的功能，使用方便。 AJAX ControlToolKit 建构于微软 AJAXExtension 之上，充分展示了 AJAX 技术的强大威力。下载位置： http://www.asp.net/ajax ，安装过程： http://www.jb51.cc/article/p-akrusini-ok.html 对于具体使用，还需要后边的学习中实践。

综上为初步学习一下AJAX，了解它的功能，和需要学习的东西以及其占的位置，为下边学习他们奠定基础！

原文链接：https://www.f2er.com/ajax/165575.html

猜你在找的Ajax相关文章