学步园

个人的一点点经验，跟jquery的jQuery.getJSON不同，只是使用最基本的javascript来实现的一些应用，而飞丁网采用的正是这种技术。

ajax的标准应用

         为着重说明ajax的事务，这里将不考虑浏览器的兼容性，并以：chrome8.0.552.224为例。

       从开发人员的角度来讲，ajax是一种允许开发者模拟浏览器访问资源获取数据的一种行为，在浏览器里，它表现为一个类来进行调用。在chrome里它的名称为：XMLHttpRequest()。

       它有如下属性：

readyState：当前请求进行的状态，其有5个状态，每个状态对应当前的执行状态。

responseText：请求返回的字符值。

responseXML：对请求的响应，将其解析为XML并作为Document对象返回。

status：请求返回的HTTP状态码。

statusText：对应status的状态码的字符解释。

       它有如下方法：

       abort()：取消此次请求。

       getAllResponseHeaders()：获取响应所有头部

getResponseHeader(headerkey)：获取对应的响应头部

open(method, url,
async, username, password)：打开一个链接，也是链接的初始化，参数分别为：请求方式（get/post），请求地址，是否异步，请求的用户名和密码（可省略）。

send(body)  ：执行请求并发送数据。这里的数据发送时请求方式必须为post。

setRequestHeader(name, value)：设置请求头部，当需要发送post数据时此处需要进行设置。

       一个事件：

onreadystatechange：当readyState变化时调用该句柄。

这里举一个使用POST传输数据的例子。

/*<br /> 用于测试ajax的POST测试<br /> */<br /> function setRequest(){<br /> var xmlRequest = new XMLHttpRequest();<br /> xmlRequest.onreadystatechange = function(){ if(xmlRequest.readyState==4) alert(xmlRequest.responseText); };<br /> xmlRequest.open('POST','ajax.php',true);<br /> var params = 'everything=ok';<br /> xmlRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");<br /> xmlRequest.setRequestHeader("Content-length", params.length);<br /> xmlRequest.setRequestHeader("Connection", "close");<br /> xmlRequest.send(params);<br /> }<br />  

ajax的iframe模拟应用

相信这里的iframe来做ajax的替代也是已经被很多地方使用的，它跟ajax对象调用的方式相比有如下优势：

1.        
在数据提交过程中不需要对数据进行组装而可以直接传送

2.        
可传输文件

3.        
可接收文件。这里指的是可直接对文件进行请求（图片、下载文件等）。

4.        
可以返回js代码从而直接执行。

它的劣势：

1.      
无法获取执行状态，只能在执行结束后执行句柄。

2.      
对超时、访问失败等错误处理需要自己编写。

3.      
请求获得的数据需要自己格式化和定义。

现在我们做一个同样的示例：

 /*<br /> html<br /> */<br /> <form action="ajax.php" method="post" target="ajax-iframe" id="ajax-form"><br /> <input type="hidden" name="everything" value="ok" /><br /> </form><br /> <iframe name="ajax-iframe" src="about:blank" mce_src="about:blank" style="display:none;" mce_style="display:none;" id="ajax-iframe"></iframe><br />  

/*<br /> js<br /> */<br /> function setRequest(){<br /> obj = document.getElementById('ajax-iframe');<br /> obj.onload = function(){ alert(this.contentDocument.body.innerHTML); };<br /> document.getElementById('ajax-form').submit();<br /> }<br />  

ajax跨域请求应用

         这个技术并非网络中所说的JSONP，而是一种利用：iframe、js调用、cookie综合执行的技术，示例请看飞丁网的浏览器插件技术。http://www.fdings.com/html/browser

         js可以在客户端做任何想做的事，但是遇到了跨域就显得无能为力。人人网和QQ空间的浏览器快捷分享是获取当前浏览的网址(url)，然后将这个数据使用get明文的方式传到自己的处理页面。这样做的好处是：可以在本地直接做业务处理；数据更加安全；然而这样做却有一个很大的不足是：用户需要跳转页面！

  
 飞丁网的网页分享看起来似乎很简单，只是弹出一个看起来就是该页面一部分的对话框，然后直接进行交互即可。表面上这是一个很简单的过程，然而这种技术需要解决一个问题：如何跨域操作？

  
 数据交互

在跨域中，数据交互是最棘手的问题。飞丁的做法是：js通过使用iframe来向服务器端传送数据，服务器端通过生成cookie和js来返回数据，具体做法如下：

这就是飞丁网的技术实现，从而实现了数据在异域中传输。

参考：http://hi.baidu.com/pcmonkee/blog/item/0ef0f86c289dd3c881cb4af7.html