Ajax入门完整示例代码!
我添加了十分详尽的注释,同时在IDE中调试运行成功,大家可以直接拿去学习和使用
我相信代码是最好的学习工具,呵呵
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
< head > < title > Ajax入门示例 </ title > </ head >
< script type ="text/jscript" > ...
var xmlhttp;
function createHTTP()
...{
if(window.ActiveXObject)
...{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器中创建异步调用对象
}
else if(window.XMLHttpRequest)
...{
xmlhttp=new XMLHttpRequest(); //Firefox中创建异步调用对象
}
}
function startHTTP()
...{
//第一步:根据不同的浏览器创建异步调用对象(XMLHttpRequest)
createHTTP();
//第二步:加载数据所在的服务器,Ajax可以从其他网站获取数据,也可以从本地的XML文件中获取
//语法如下:xmlhttp.open(method,url,bool)
//method:表示HTTP的请求方法,一共有get、post、head、put、delete五种方法;get是将参数追加到URL中发送,而post是将参数串放在请求体中发送。如果数据处理不改变数据的状态(比如获取数据),就用get;如果编辑、更新数据等改变了数据,则用post。
//URL:表示数据的地址;bool:表示是否使用异步获取,true表示异步,false表示同步
xmlhttp.open("GET","XMLFile.xml",true);
//第三步:异步调用服务器状态的变化:状态变化与事件挂钩,注意方法后面不带括号
xmlhttp.onreadystatechange=StateDO;
//第四步:发出一个HTTP请求。可以通过在发送请求时设置的参数有选择的挑选数据。如果发送请求时,参数已经放在了请求的URL中,则send方法中,参数可以设置为null或者不写。如果希望把参数放在send方法中,则语法如下:xmlhttp.Send(“id=cgjun”); 由于用Send方法发送参数时,需要考虑很多环境变量,如HTTP Method和服务器的一些设置,所以建议将参数放在请求的URL中
xmlhttp.send(null);
}
function StateDO()
...{
//判断是否完成状态(异步调用完成时,状态编号为4);返回的状态代码=200,表示调用成功;返回的状态代码=400,表示没有找到
if(xmlhttp.readystate==4 && xmlhttp.status==200)
...{
document.getElementById("mytext").innerHTML=xmlhttp.responsetext;
}
}
</ script >
< body >
< div style ="" id ="mytext" > 这是旧数据 </ div >< input type ="button" value ="更新DIV" onclick ="startHTTP()" /></ body ></ html >
< head > < title > Ajax入门示例 </ title > </ head >
< script type ="text/jscript" > ...
var xmlhttp;
function createHTTP()
...{
if(window.ActiveXObject)
...{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器中创建异步调用对象
}
else if(window.XMLHttpRequest)
...{
xmlhttp=new XMLHttpRequest(); //Firefox中创建异步调用对象
}
}
function startHTTP()
...{
//第一步:根据不同的浏览器创建异步调用对象(XMLHttpRequest)
createHTTP();
//第二步:加载数据所在的服务器,Ajax可以从其他网站获取数据,也可以从本地的XML文件中获取
//语法如下:xmlhttp.open(method,url,bool)
//method:表示HTTP的请求方法,一共有get、post、head、put、delete五种方法;get是将参数追加到URL中发送,而post是将参数串放在请求体中发送。如果数据处理不改变数据的状态(比如获取数据),就用get;如果编辑、更新数据等改变了数据,则用post。
//URL:表示数据的地址;bool:表示是否使用异步获取,true表示异步,false表示同步
xmlhttp.open("GET","XMLFile.xml",true);
//第三步:异步调用服务器状态的变化:状态变化与事件挂钩,注意方法后面不带括号
xmlhttp.onreadystatechange=StateDO;
//第四步:发出一个HTTP请求。可以通过在发送请求时设置的参数有选择的挑选数据。如果发送请求时,参数已经放在了请求的URL中,则send方法中,参数可以设置为null或者不写。如果希望把参数放在send方法中,则语法如下:xmlhttp.Send(“id=cgjun”); 由于用Send方法发送参数时,需要考虑很多环境变量,如HTTP Method和服务器的一些设置,所以建议将参数放在请求的URL中
xmlhttp.send(null);
}
function StateDO()
...{
//判断是否完成状态(异步调用完成时,状态编号为4);返回的状态代码=200,表示调用成功;返回的状态代码=400,表示没有找到
if(xmlhttp.readystate==4 && xmlhttp.status==200)
...{
document.getElementById("mytext").innerHTML=xmlhttp.responsetext;
}
}
</ script >
< body >
< div style ="" id ="mytext" > 这是旧数据 </ div >< input type ="button" value ="更新DIV" onclick ="startHTTP()" /></ body ></ html >