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; };
原文链接:http://blog.csdn.net/my98800/article/details/54879877
(资源库 www.zyku.net)
您可能感兴趣的文章
- 03-31利用ajax+php实现商品价格计算
- 03-30thinkphp5 使用H-ui+ajax 提交数据
- 07-27PHP自定义函数判断是否为Get、Post及Ajax提交的方法
- 07-18使用Ajax方法实现Form表单的提交及注意事项
- 07-18Ajax的特性及乱码问题
- 07-12jQuery+Ajax请求本地数据加载商品列表页并跳转详情页
- 06-26Ajax提交表单并接收json实例代码
- 04-05Ajax验证用户名或昵称是否已被注册
- 03-15thinkPHP+ajax实现统计页面pv浏览量的方法
- 02-18ThinkPHP中ajax使用实例教程
- 03-31CentOS7添加开机启动服务或脚本
- 09-21抖音解散粉丝群流程一览
- 01-12证件照乐拍-证件照乐拍应用软件功能介
- 01-08英语五年级点读辅导-英语五年级点读辅
- 04-27OPPO手机剪辑视频教程
- 12-26必连5G大师-必连5G大师应用软件功能介
- 09-23一加ColorOS12升级计划介绍
- 11-02autosleep入睡时间查询方法分享
- 02-20Notepad++如何关联文本
- 01-17千万女神答题-千万女神答题应用软件功
最近更新
阅读排行
猜你喜欢
- 01-12DEDECMS v5.3 发布图集时不能获取缩略
- 07-05Linux dump命令
- 08-10快手直播电视投屏教程
- 01-12遇见我的猫-遇见我的猫应用软件功能介
- 01-12厨卫U家-厨卫U家应用软件功能介绍
- 02-28帝国CMS灵动标签调用复选框字段怎么去
- 02-13华为nova8录屏设置流程
- 03-17mysql5.6及以下版本如何查询数据库里
- 08-10利用PHP生成随机密码的几种方法
- 12-26永乐-永乐应用软件功能介绍