ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等)。
ajax优点:
1) 页面无刷新的动态数据交互
2) 局部刷新页面
3) 界面的美观
4) 对数据库的操作
ajax使用
第一步:创建ajax引擎(获取XMLHttpRequest对象)
不同浏览器内核,获取XMLHttpRequest对象方法不一样。所以在创建ajax引擎之前需要先判断浏览器内核。
主流浏览器内核有:IE浏览器,火狐浏览器(Firefox)
创建方法一:
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP’);
//第一个适用于火狐内核(Firefox),第二个适用于IE
创建方法二:
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");
}
第二步:通过创建的XMLHttpRequest对象准备发送请求到指定服务器页面
if(xmlhttp){ //检测XMLHttpRequest对象是否创建成功(若对象为null对象返回false)
xmlhttp.open("get/post","URL",true/false);
//调用XMLHttpRequest对象的open方法准备向服务器发送请求
//参数一:请求的方式;(string)
//参数二:发送ajax请求的URL;(string)
//参数三:是否使用异步机制处理;(bool)
//回调函数得知数据是否返回完成(数据是否全部获取)
xmlhttp.onreadystatechange = function(){
//实时监测数据交互状态(状态改变的事件触发器)
//该事件在数据交互时会被反复调用
//调用过程中会实时返回当前执行的状态
if(xmlhttp.readyState == 4){
//通过readyState属性获取当前状态
//若当前状态为4则表示数据全部返回
if(xmlhttp.status == 200){ //通过status属性获取http返回的状态码(200表示成功)
//第四步:开始处理返回的数据(结果)
//根据具体需求进行处理
//通过responseText属性获取返回报文
}
}
}
第三步:向服务器发送请求
xmlhttp.send(); //调用XMLHttpRequest对象的send()方法发送请求
//send()方法的参数也可以用了传递数据(post请求下)
最后附上一个完整版 :
function ajax(method, URLdata, dispose) {
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.open(method, URLdata, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200 || xmlhttp.status == 300) {
dispose(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}
扩展——ajax处理Json格式数据
使用JSON.parse()方法将Json字符串转换为JS对象。
var Json = JSON.parse(json字符串);
var r = JSON.parse(xmlhttp.responseText);
alert(r[0].Name);
转换为js对象的json可以直接点出对象的属性;如果是集合,使用下标取对象。