AJAX
李世荣
江西农业大学软件学院,网络工程师,软件设计师
展开
-
(转)使用XMLHTTP获取XML文档并生成XMLDOM
客户端利用XMLHTTP发送请求得到服务端应答数据,并用Javascript操作DOM最终更新页面- 又称无刷新更新页面,有代替传统web开发中采用form(表单)递交方式更新web页面的趋势。 XMLHTTP依赖于XMLHttpRequest完成从客户端的请求到服务端的应答。XMLHttpRequest提供了两个方法open和send。open方法用于初始化XMLHttpRequest对象、原创 2014-12-02 09:45:58 · 566 阅读 · 0 评论 -
自动完成技术,像百度一样通过AJAX技术来搜索备选项
效果截图: 视频效果:模拟了搜索中常用的提示功能,很值得研究。静态提交页面:autoComplete.htmlAJAX自动完成技术 .mouseOut{ background:#708090; color:#FFFAFA; } .mouseOver{ background:#FFFAFA; color:#000000; } var xmlHttp; var completeDiv; v原创 2014-12-02 09:46:45 · 502 阅读 · 0 评论 -
创建工具窗口提示
效果截图: 效果视频:相比于传统的Web,使用AJAX可以大量的减少首次加载的信息量,只在用户需要时再动态的进行加载。这是个很大的进步。但是有一个缺点,服务器端传回的数据存在中文乱码的问题。静态页面:toolTip.htmlAjax实现提示框功能 var xmlHttp; var dataDiv; var dataTable; var dataTableBody; var offsetEl; f原创 2014-12-02 09:46:43 · 443 阅读 · 0 评论 -
动态更新Web页面
效果截图:插入的数据可以及时的在当前页中进行显示,主要采用AJAX技术静态页面:employeeList.html员工列表 var xmlHttp; var name; var title; var department; var deleteID; var EMP_PREFIX="emp-"; function createXMLHttpRequest(){ if(window.Active原创 2014-12-02 09:46:40 · 664 阅读 · 0 评论 -
动态显示进度条
截图效果: 视频效果:在进度条中,每一个格子都是一个对象,通过控制每个对象的背景色来模拟任务完成的进度。通过定期向服务器端发送请求来获得一个改变值的参数,其实也许可以在客户端进行这样一个工作,有待尝试。静态页面:progressBar.htmlAjax进度条实例 var xmlHttp; var key; var bar_color="green";//设置进度条颜色 var span_id="b原创 2014-12-02 09:46:37 · 1280 阅读 · 0 评论 -
自动刷新页面技术
效果截图: 视频效果截图:主要是通过定时器向服务器发送请求,从而自动更新内容,在AJAX出现以前这个是比较难以实现的。静态页面:dynamicUpdate.html自动刷新var xmlHttp;function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHT原创 2014-12-02 09:46:35 · 549 阅读 · 0 评论 -
动态加载列表框实现级联菜单的效果
效果截图:视频效果:当两个选择框的值均不为空的时候,向服务器发送请求,并通过document来改变显示框的内容。静态页面:dynamicLists.html动态清单案例var xmlHttp;function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP原创 2014-12-02 09:46:32 · 1680 阅读 · 0 评论 -
利用Yahoo! Search API开发自已的搜索引擎-JavaScript版
美国东部时间3月1日,雅虎公司联合创始人之一的杨致远将宣布公司的搜索网络将进入Web服务。雅虎公司在www.developer.yahoo.com网站建立了Yahoo Search Developer Network,公司计划在此纽约举行的搜索引擎战略大会(Search Engine Strategies Conference)上推出这一计划。该网络将允许开发者在雅虎搜索之上建立新的应用程序,其中原创 2014-12-02 09:46:27 · 1127 阅读 · 0 评论 -
分页显示的一个案例
主要是AJAX的综合应用,涉及到了数据库,XML,XSL,Javascript,html,servlet,jsp,css其中没有做好的是删除后的自动刷新,有待更正!起始页index.html小组管理系统var xmlHttp;var req_url;function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp=new Act原创 2014-12-02 09:46:25 · 490 阅读 · 0 评论 -
用dtable显示并清除以前的结果
小组管理系统var xmlHttp;var req_url;function createXMLHttpRequest(){ if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); }else{ if(window.ActiveXObject){ try{ xmlHttp=new ActiveXObject("Msxml2.X原创 2014-12-02 09:46:22 · 501 阅读 · 0 评论 -
异步检测用户名是否存在的一个案例
主要原理是OnBlur来触发startRequest事件,再由一个span的层来显示查询结果AjaxTest.htmlfunction mycheck(){ if(form1.name.value==""){ alert("组名不能为空!!"); form1.name.focus(); return false; } if(form1.slogan.value==""){ alert("口原创 2014-12-02 09:46:20 · 794 阅读 · 0 评论 -
XML+XSL在表格中显示数据的主要程序
这个程序中相比于XML+DOM来说有很多优点,比比就知道var xslDoc = new ActiveXObject("Microsoft.XMLDOM"); xslDoc.async = false; xslDoc.load("xsl/teaminfo.xsl"); var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async原创 2014-12-02 09:46:17 · 1058 阅读 · 0 评论 -
XML+DOM将元素的数据依次插入到表格中
下面写的是主要的程序部分,不能清除原来的数据var dtable = document.getElementById("dataBody"); var teamEls = xmlHttp.responseXML.getElementsByTagName("team");for(var i=0;i var elTr = dtable.insertRow(i); var teamEl =原创 2014-12-02 09:46:15 · 769 阅读 · 0 评论 -
通过Yahoo+Search+API访问Web服务实现自己的搜索引擎
效果截图: 本实例中并未实现所谓的模拟搜索引擎,因为没有较好的网络在yahoo上申请到账号,所以以后再测试了。静态页面:yahooSearch.htmlTransitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Yahoo! Search Web Servicesvar xmlHttp;function createXMLHttpRequest原创 2014-12-02 09:46:48 · 1632 阅读 · 0 评论