AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
ajax原生版,兼容所有浏览器:
function loadXMLDoc(url){
xmlhttp=null;
if (window.XMLHttpRequest){
// code for Firefox, Opera, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject){
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null){
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);//method:请求的类型;GET 或 POST。async:true(异步)或 false(同步)
xmlhttp.send(null);//string:仅用于 POST 请求
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加请求头。
}
else{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change(){
if (xmlhttp.readyState==4){
// 4 = "loaded"
if (xmlhttp.status==200){
// 200 = "OK"
document.getElementById('T1').innerHTML=xmlhttp.responseText;
}
else{
alert("Problem retrieving data:" + xmlhttp.statusText);
}
}
}
1.responseText 获得字符串形式的响应数据。
2.responseXML 获得 XML 形式的响应数据。
3.onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
4.readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
5.status
200: "OK"
404: 未找到页面
简化ajax模版,便于工作中调用:
function loadAjax(url,box){
// code for IE7+, Firefox, Chrome, Opera, Safari || code for IE6, IE5
var req = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
req.open("GET",url,true); //post 中文路径会报错。
req.send();
req.onreadystatechange = function(){
if(req.readyState==4&&req.status==200){
box.innerHTML=req.responseText;
}
}
}
注:没有readyState和status错误提示。
网友评论