Ajax和$.ajax使用实例详解(推荐)
实例一（Ajax请求基本创建格式）：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Ajax练习（GET，不考虑浏览器兼容性）</title>
<scripttype="text/JavaScript">
functiondoRequest(){
//不考虑浏览器兼容性问题
varxmlHttp=newXMLHttpRequest();
//打开一个与Http服务器的连接
xmlHttp.open("GET","Default.aspx",true);
//与服务器端交互
xmlHttp.send(null);
//监听服务器端响应状态的改变事件
xmlHttp.onreadystatechange=function(){
//客户端与服务器端交互完成
if(xmlHttp.readyState==4){
//服务器端返回Http状态码：200表示请求成功,404未找到,403错误
if(xmlHttp.status==200){
//获得服务器端资源
varresult=xmlHttp.responseText;
alert(result);
}
}
}
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<inputtype="button"id="btn"value="异步请求"onclick="doRequest()"/>
</div>
</form>
</body>
</html>
<headrunat="server">
<title>AjaxDemo实例</title>
<scriptsrc="JS/jQuery-1.4.1-vsdoc.js"type="text/javascript"></script>
<scripttype="text/javascript">
//使用Ajax读取浏览器的工作内容
functionreadRequest(){
//不考虑浏览器的兼容性问题
varxmlhttp=newXMLHttpRequest();
//打开一个与服务器相关的链接
//发送请求
//请求的方式（获取/发送），请求页面，是否异步
xmlhttp.open("GET","AjaxDemo.aspx",true);
//发送数据
xmlhttp.send(null);
//接受服务器返回结果
xmlhttp.onreadystatechange=function(){
//请求完成
if(xmlhttp.readyState==4){
//链接成功
if(xmlhttp.status==200){
//输出浏览器的内容
varresult=xmlhttp.responseText;
alert(result);
window.alert("读取浏览器的内容成功！");
}
}
};
};
functionbtn_Click(){
varhttp=newActiveXObject("Microsoft.XMLHTTP");
//或者使用这一句创建varxmlhttp=newXMLHttpRequest();
if(!http){
alert("创建xmlhttp对象异常！");
returnfalse;
}
http.open("POST","AjaxDemo.ashx",false);
http.onreadystatechange=function(){
if(http.readyState==4){
//链接成功
if(http.status==200){
alert(http.responseText);
document.getElementById("Text1").value=http.responseText;
}else{
window.alert("Ajax服务器返回错误！");
}
}
};
http.send();
};
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<inputid="Button1"type="button"value="使用Ajax读取浏览器的内容"onclick="readRequest()"/>
<br/>
<inputid="Text1"type="text"/>
<inputid="Button2"type="button"value="获取当前时间"onclick="btn_Click()"/>
</div>
</form>
</body>
实例二（见附件）
考虑浏览器兼容性Ajax请求处理，获取后台xml文件内容。
实例三（见附件）
使用$.Ajax获取后台读取xml文件内容信息。
functionreadXML1(){
//创建XML对象
varxmldom=newActiveXObject("Microsoft.XMLDOM");
//设置为异步
xmldom.async="false";
//加载需要读取的XML文档
xmldom.load("XML1.xml");
info="";
//需要读取的根节点
varnode=xmldom.selectNodes("student");
//依次读取其中的内容
info=node[0].childNodes[0].nodeTypedValue+"<br/>"+node[0].childNodes[1].nodeTypedValue+"<br/>"+node[0].childNodes[2].nodeTypedValue;
document.getElementById("xmlmsg").innerHTML=info;
};
functionreadXML2(){
//实例化xml对象
varxml=newActiveXObject("Microsoft.XMLDOM");
//异步设置
xml.async="false";
//加载需要读取的XML文档
xml.load("XML2.xml");
info="";
//选择需要读取的对象名称
varfnode=xml.documentElement.selectNodes("people");
//循环输出文档的内容
for(vari=0;i<fnode.length;i++){
for(varj=0;j<fnode[i].childNodes.length;j++){
info+=fnode[i].childNodes[j].text+"<br/>";
}
}
document.getElementById("xmlmsg").innerHTML=info;
};
好了，以上所述是小编给大家介绍的Ajax和$.ajax使用实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！