今天,我们理解一项比较火爆的技术。它能在我们需要加载局部页面更新数据时,或者是需要大量的局部数据刷新或加载。不必重新加载整个页面,为客户提升了网上的体验。这就是AJAX 技术。
在此之前,用户点击了某个链接,请求发送回服务器,然后服务器根据用户的操作再返回新的页面,即使用户操作的是局部的页面的时候,页面也要重新的加载一遍。这就增加了用户的重复的操作。我们就可以用AJAX技术来操作。它的主要的优势是,对页面的请求是以异步的方式发送服务器,而服务器不会用整个页面来响应请求,它会以异步的方式来处理响应,而用户还可以继续和页面操作交互。你的脚本则可以按需加载和创建页面内容,而不会打断用户的浏览体验了。我们会有goole地图的感觉。
首先,AJAX的运行环境是依赖于js的。也就是写在js当中的。通过是js来驱动。这是AJAX的使用范围。
AJAX的核心技术是XMLHttpRequest对象的,所以,我们想用AJAX技术,先必须创建XMLHttpRequest对象。用 new XMLHttpRequest (); 的构造函数的方式来创建一个AJAX的对象实例,完整的创建方式如下:
var xhr = new XMLHttpRequest();
这样,就创建了一个xhr的对象实例了。
然后,由于AJAX的兼用要覆盖ie版本,所以,我们要写兼容模式,兼容模式有几下写法:
function checkXmlhttp() {
if(typeof XMLHttpRequest == "undefined")// 花括号 省略了 如果XMLHttpRequest的类型是undefined 的 那么就执行ie的类型兼容。
window.XMLHttpRequest = function () {
try{
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
}catch (err){};
try{
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch (err) {};
try{
return new ActiveXObject ("Msxml2.XMLHTTP");
}catch(err) {};
return false;
}
return new XMLHttpRequest();
}
var xhr = checkXmlhttp(); //调用这个函数 就拿到这个函数返回值了。
这个是兼容写法的比较复杂的情况。有一种简单的写法,我们经常用。
// 简单的写法:运用三目运算法来做判断。
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
然后下一步是配置请求 最重要的方法是:open(); 有三个参数:第一个参数是:请求方式:GET/POST 一般默认的是:GET的请求方式。第二个参数是:接口的地址路径。相对路径和绝对路径。(接口的路径就是我们请求服务器的链条,我们一般用的绝对路径,首先是,http/https// 这是安全协议,然后是域名(或者是ip地址)然后是端口,有的默认不写。这些就确定了接口的具体位置,端口是指服务器的不同功能。不同的功能有不同的端口号。通过这些要素,来确定接口的链条,我们可以通过接口链来向服务器请求数据的。) 举个实例:
xhr.open("GET","http://wthrcdn.etouch.cn/weather_mini?city=北京",true)
// 发送请求。用send()方法,
xhr.send(null);
// 监听数据请求状态。用到的是onreadystatechange 监听事件。它的值在不同阶段有不同的含义。如下所示:
0:请求未初始化
1:服务器器连接已建立
2:请求已接收
3:请求处理理中
4:请求已完成,且响应已就绪
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status ==200){
alert(xhr.responseText);
}
}
以上完成了 AJAX的请求。