Ajax和$.ajax使用实例详解(推荐)
更新时间：2017年02月05日 11:33:02 作者：my98800
本文通过三个实例给大家讲解了Ajax和$.ajax使用实例详解，非常不错，具有参考借鉴价值，需要的朋友参考下
实例一（Ajax请求基本创建格式）：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax练习（GET，不考虑浏览器兼容性）</title>
<script type="text/JavaScript">
function doRequest() {
//不考虑浏览器兼容性问题
var xmlHttp = new XMLHttpRequest();
//打开一个与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) {
//获得服务器端资源
var result = xmlHttp.responseText;
alert(result);
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn" value="异步请求" onclick="doRequest()" />
</div>
</form>
</body>
</html>
<head runat="server">
<title>AjaxDemo实例</title>
<script src="JS/jQuery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
//使用Ajax读取浏览器的工作内容
function readRequest() {
//不考虑浏览器的兼容性问题
var xmlhttp = new XMLHttpRequest();
//打开一个与服务器相关的链接
//发送请求
//请求的方式（获取/发送），请求页面，是否异步
xmlhttp.open("GET", "AjaxDemo.aspx", true);
//发送数据
xmlhttp.send(null);
//接受服务器返回结果
xmlhttp.onreadystatechange = function() {
//请求完成
if (xmlhttp.readyState == 4) {
//链接成功
if (xmlhttp.status == 200) {
//输出浏览器的内容
var result = xmlhttp.responseText;
alert(result);
window.alert("读取浏览器的内容成功！");
}
}
};
};
function btn_Click() {
var http = new ActiveXObject("Microsoft.XMLHTTP");
//或者使用这一句创建 var xmlhttp = new XMLHttpRequest();
if (!http) {
alert("创建xmlhttp对象异常！");
return false;
}
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>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="使用Ajax读取浏览器的内容" onclick="readRequest()" />
<br/>
<input id="Text1" type="text" />
<input id="Button2" type="button" value="获取当前时间" onclick="btn_Click()"/>
</div>
</form>
</body>
实例二（见附件）
考虑浏览器兼容性Ajax请求处理，获取后台xml文件内容。
实例三（见附件）
使用$.Ajax获取后台读取xml文件内容信息。
function readXML1() {
//创建XML对象
var xmldom = new ActiveXObject("Microsoft.XMLDOM");
//设置为异步
xmldom.async = "false";
//加载需要读取的XML文档
xmldom.load("XML1.xml");
info = "";
//需要读取的根节点
var node = 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;
};
function readXML2() {
//实例化xml对象
var xml = new ActiveXObject("Microsoft.XMLDOM");
//异步设置
xml.async = "false";
//加载需要读取的XML文档
xml.load("XML2.xml");
info = "";
//选择需要读取的对象名称
var fnode = xml.documentElement.selectNodes("people");
//循环输出文档的内容
for (var i = 0; i < fnode.length; i++) {
for (var j = 0; j < fnode[i].childNodes.length; j++) {
info += fnode[i].childNodes[j].text + "<br/>";
}
}
document.getElementById("xmlmsg").innerHTML = info;
};
好了，以上所述是小编给大家介绍的Ajax和$.ajax使用实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
最近小编在研究嵌入式开发的课程设计，接下来通过本篇文章给介绍了Boa服务器下的ajax与cgi通信的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧2016-07-07
ajax poller 实现代码。2009-07-07
这篇文章主要为大家详细介绍了Ajax实现页面无刷新留言效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了如何利用Ajax实现上传图像,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-04-04
使用getJSON()异步请求服务器返回json格式数据的实现
下面小编就为大家带来一篇使用getJSON()异步请求服务器返回json格式数据的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
Ajax到底是什么？是一个并不太容易掌握，但可以增加网站交互性的方法？是Web2.0的基石？还是又一轮网络开发中的跟风？2008-06-06
鼠标经过弹出详细内容的效果想必大家都有见到过吧，其实很简单，在本文为大家介绍下使用ajax实现此效果，感兴趣的朋友可以参考下2013-09-09
Ajax的小贴士使用小结...2007-10-10
这篇文章主要介绍了如何利用Ajax绘制进度条，文中的示例代码讲解详细，对我们的学习或工作有一定的帮助，感兴趣的小伙伴可以了解一下2022-04-04
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。网上关于介绍ajax的原理有很多，本文将通过图文的形式给大家更直接明了的介绍，有需要的可以参考学习。2016-08-08
最新评论