Ajax和$.ajax使用实例详解(推荐)
程序员文章站
2022-03-31 14:10:56
实例一（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使用实例详解，希望对大家有所帮助
上一篇： ajax无刷新评论功能
下一篇： nodeJS模块简单用法示例