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使用实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！