Ajax与传统web应用的不同
传统的javascript编程中,若想得到服务器端数据或文件上的信息,或者发送客户端信息到服务器, 需要建立一个html 的form,然后GET或者POST数据到服务器端,用户需要单击submit按钮来发送或者接受数据信息,然后等待服务器响应请求,页面重新加载。因为服务器每次都会返回一个新的页面,所以传统的web应用可能很慢,而且交互不太好。实用ajax技术,就可以使javascript通过XMLHttpRequest对象直接与服务器交互。通过HTTP Request,一个web页面可以发送一个请求到web服务器,而且接收web服务器返回的信息(不用重新加载页面),展示给用户的还是同一个界面,但是用户感觉页面刷新了,但看不到javascript后台进行的发送请求和接收响应。
Ajax请求过程
1. 创建XMLHttpRequest对象的一个实例
2. 调用方法open,初始化数据源请求
3. 为onreadystatechange属性指定一个处理器函数来处理服务器的响应。
4. 通过调用send建立一个非阻塞的数据源请求。
5. 在处理函数中,服务器响应得到时处理该响应。根据接收到的数据修改DOM元素。
XMLHttpRequest的属性和方法
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 还没有调用send()方法
1 (载入) 已调用send()方法,正在发送请求
2 (载入完成) send方法已调用,已经接收到全部响应内容
3 (交互) 正在解析响应内容
4 (完成) 响应内容解析完成,可以在客户端调用了。
但是,由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。
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) { }
}
}
}
function Ustbwuyi() {
var data = document.getElementById("username").value;
CreateXmlHttp();
if (!xmlhttp) {
alert("创建xmlhttp对象异常!");
return false;
}
xmlhttp.open("POST", url, false);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
document.getElementById("user1").innerHTML = "数据正在加载...";
if (xmlhttp.status == 200) {
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}
Ajax优点
1. 页面无刷新,用户体验好
2. 使用异步方式与服务器通信,具有更加迅速的响应能力
3. 可以把服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担。Ajax的原则是按需取数据,可以最大程度减少冗余请求和响应对服务器造成的负担。
Ajax缺点
1. ajax不支持浏览器返回按钮
2. 安全问题,ajax暴露了与服务器交互的细节
3. 对搜索引擎的支持比较弱
4. 破坏了程序的异常机制
5. 不容易调试
Ajax跨域解决办法
1. web代理的方式。用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,从而返回合适的结果。此方案可以解决现阶段所能想到的多数跨域访问问题,但要求A网站提供web代理的支持。且每次交互过程,A网站的服务器负担增加,无法代用户保存session状态。
2. 用户本地转储方式。IE本身依附于window平台的特性为我们提供了一种基于iframe利用内存来绕行的方案,即两个window之间可以在客户端通过window剪贴板的方式进行数据传输,只需要在接收数据的一方设置interval进行轮询,获得结果后清除interval即可。