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