关于Ajax技术原理的几点总结_H5之家 - 中国HTML5教程资源分享第一站

　　ajax：Asynchronous Javascript and XML 异步Javascript 和XML。是一种创建交互式网页应用的网页开发技术。那么下面我们来谈谈关乎Ajax技术原理的几点总结。想了解更多相关资讯请持续关注我们应届毕业生培训网。

　　1.0 优势：

　　1.1 通过异步模式，提升了用户体验。

　　1.2 优化了浏览器与服务器之间的传输，减少了不必要的数据往返，减少了带宽占用。

　　1.3 Ajax引擎在客户端运行，承担了一部分本来由服务器承担的共组，从而减少了大用户量下的服务器负载。

　　2.0 工作原理

　　Ajax核心是Javascript对象XmlHttpRequest。该对象在 IE5中首次引用，它是一种支持异步请求的技术。XmlHttpRequest使您可以使用Javascript向服务器提出请求并处理响应，而不是阻塞用户，达到无刷新的效果。

　　由于浏览器之间存在差异，创建XmlHttpRequest对象的方式也有差异（主要是IE和其他浏览器之间的差异）。

　　2.1 比较通用型的创建异步请求的方法:

　　代码如下：

　　function CreateXmlHttp() {

　　//非IE浏览器创建XmlHttpRequest对象的方法

　　if (window.XmlHttpRequest) {

　　xmlhttp = new XmlHttpRequest();

　　}

　　//IE浏览器创建XmlHttpRequest对象的方法

　　if (window.ActiveXObject) {

　　try {

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

　　}

　　catch (e) {

　　try {

　　xmlhttp = new ActiveXObject("msxml2.XMLHTTP");

　　}

　　catch (ex)

　　{ }

　　}

　　2.2 XmlHttpRequest相关属性：

　　onreadystatechange 每次状态改变所触发事件的事件处理程序。

　　responseText 从服务器进程返回数据的字符串形式。

　　responseXML 从服务器进程返回的DOM兼容的文档数据对象。

　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

　　status Text 伴随状态码的字符串信息

　　readyState 对象状态值

　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

　　1 (初始化) 对象已建立，尚未调用send方法

　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

　　2.3 简单的Demo示例：

　　代码如下：

　　function SendAsyncRequest() {

　　var data = document.getElementById("XXId").value;

　　CreateXmlHttp(); //创建XmlHttpRequest对象

　　if (!xmlhttp) { //判断对象是否创建成功

　　alert("创建xmlhttp对象异常！");

　　return false;

　　}

　　xmlhttp.open("POST", url, false); //开始发送异步请求

　　xmlhttp.onreadystatechange = function () {

　　if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {

　　document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText; //数据接收完毕

　　}

　　xmlhttp.send();

　　}

　　3.0 缺点：

　　1.破坏了浏览器后退按钮的正常行为，动态更新页面后，无法回到前一个页面的状态。

　　2.使用Javascript作为Ajax的基础引擎，Javascript的兼容性并不是很好。（当然现在流行的Jquery等javascript类库大大改善了这些问题,对Ajax的调用也方便了很多，本文只是简述了Ajax的基本实现原理）。

　　JSON（JavaScriptObject Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。下面请看yjbys小编对Ajax使用JSON数据格式案例的分析。想了解更多相关资讯请持续关注我们应届毕业生培训网。

　　JSON的规则很简单：对象是一个无序的“‘名称/值'对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值'对”之间使用“,”（逗号）分隔。

　　JSON用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。

　　对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。

　　<span style="font-size:18px;">{"person": {

　　"name":"Andy Budd",

　　"website":"",

　　"email":"andy@clearleft.com"

　　}

　　}</span>

　　JSON 只是一种文本字符串。它被存储在responseText 属性中

　　为了读取存储在 responseText 属性中的JSON 数据，需要根据JavaScript 的eval语句。函数 eval会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的

　　2：案例

　　<%@ page language="java" pageEncoding="UTF-8"%>

　　<head>

　　<title>People at Clearleft</title>

　　@import url("clearleft.css");

　　</style>

　　window.onload=function(){

　　var aNodes=document.getElementsByTagName("a");

　　for(var i = 0;i < aNodes.length; i++){

　　aNodes[i].onclick=function(){

　　var request=new XMLHttpRequest();

　　var url=this.href;

　　var method="GET";

　　request.open(method,url);

　　request.send(null);

　　request.onreadystatechange=function(){

　　if(request.readyState==4){

　　if(request.status==200||request==304){

　　var result=request.responseText; //json被存储在responseText属性中

　　var object=eval("("+result+")"); //读取responseText中的json数据

　　var name= object.person.name; //读取json对象中存储的数据

　　var website= object.person.website;

　　var email= object.person.email;

　　var aNode=document.createElement("a");

　　aNode.appendChild(document.createTextNode(name+":"+"email"+":"+website));

　　aNode.href="mailTo"+"email"+",website";

　　var h2Node=document.createElement("h2");

　　h2Node.appendChild(aNode);

　　var dtails=document.getElementById("details");

　　details.innerHTML=""; //防止重复的添加字符串

　　dtails.appendChild(h2Node);

　　}

　　return false;

　　}

　　};

　　</script>

　　</head>

　　<body>

　　<h1>

　　People

　　</h1>

　　<ul>

　　<li>

　　</li>

　　<li>

　　<a href="files/richard.js">Richard</a>

　　</li>

　　<li>

　　<a href="files/jeremy.js">Jeremy</a>

　　</li>

　　</ul>

　　</body>

　　</html>

　　对于ajax请求post和get的区别来说，最简单的是

　　1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来

　　2.使用Get请求发送数据量小,Post请求发送数据量大

　　3.get请求需注意缓存问题,post请求不需担心这个问题

　　但是其远远不止如此，下面请看yjbys小编的详细介绍。

　　Get方式: