日期:2014-05-16 浏览次数:20565 次
1>:今天重新回到对AJAX的认识,首先从AJAX的由来说起,由于感觉自己才疏学浅,建议大家去阅读这篇文章http://wenku.baidu.com/view/17086494dd88d0d233d46ae6.html,
我感觉只有了解了WEB的发展历史,我们才能更好地理解并运用AJAX。
2>:其实AJAX最大的应用就是我们要理解XMLHttpRequest这个对象。XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请数 据, 在 页面加载后在服务器端接受数据,在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。
3>:我们如何创建一个XMLHttpRequest对象呢?
首先我们要知道XMLHttpRequest对象开始时有微软开发的一个基于IE5,IE6的一个插件,所以他在IE浏览器中肯定有自己的创建方式,IE中把他实现成一个ActiveX对象,但其他浏览器如果也想使用 XMLHttpRequest对象,就必须依靠JAVASCRIPT创建本地对象。我们在使用时不需要判断浏览器的类型,只需要看浏览器提供对ActiveX的支持。
下面就是XMLHttpRequest的创建方式:
function createXHR() { if(window.ActiveXObject) { xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttpRequest=new XMLHttpRequest(); } if(null==xmlHttpRequest) { alert("浏览器不支持"); } }
4>:介绍XMLHttpRequest的常用属性、方法:
百度其实是个好东西,我没必要复制粘贴:大家可以参考http://baike.baidu.com/view/1105115.htm
5>:XMLHttpRequest的应用:
其实要理解AJAX并学会运用我们只要掌握三方面内容,第一就是XMLHttpRequest对象的创建。第二就是如何从表单获取值并传到服务器。第三就是如何从后台获取数据显示在前台。大家想想AJAX的应用是不是就是围绕这三方面。
下面我们来简单说一下如何从表单获取值的问题:其实只要稍微了解点JavaScript的热你都知道我们DOM文档模型,通过操纵文档对象模型中对象的属性并调用其方法,可以使脚本按照一定的方式显示Web页并与用户的动作进行交互。
我们常用的就是document.getElementById("id").value.来获取网页中的数据。其他的大家用到就百度。
我们获取到值之后就是把这个值传给后台:这里我们一般采用get:方式提交,采用url传参。通过调用:xmlHttpRequest.open("get","url?paramater="+value,true);
最后就是如何从后台获取值传到前台显示:这里是通过xmlHttpRequest.responseText(返回一个字符串)xmlHttpRequest.responseXML返回一个XML文件。
我们可以通过解析这两种值插入到页面中:通常我们用到的显示在html中方式是:通过document.getElementById("id").value=xmlHttpRequest.responseText;
或者document.getElementById("id").innerHTML=xmlHttpRequest.responseText;
知道了这些我们先做一个简单地例子:
<script type="text/javascript"> var xmlHttpRequest=null; function createXHR() { if(window.ActiveXObject) { xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttpRequest=new XMLHttpRequest(); } if(null!=xmlHttpRequest) { var v1=document.getElementById("num1").value; var v2=document.getElementById("num2").value; xmlHttpRequest.open("get","servlet/AjaxServlet?v1="+v1+"&v2="+v2,true); xmlHttpRequest.onreadystatechange=callback; xmlHttpRequest.send(null); } } function callback() { if(xmlHttpRequest.readyState==4) { if(xmlHttpRequest.status==200) { var responseText=xmlHttpRequest.responseText; document.getElementById("num3").innerHTML=responseText;//innerHTML不能小写 } } } </script>
<form method="" action=""> <table border="1" borderstyle="solid" cellpacing="0" > <tr><td><input type="text" id="num1"/></td></tr> <tr><td><input type="text" id="num2"/></td></tr> <tr><td><input type="button" value="submit" onclick="createXHR()"/></td></tr> <tr><td><span id="num3"></span></td></tr> </table> </form>
以上代码有借鉴http://blog.csdn.net/csh624366188/article/details/7670500大家也可以去看。
还有两哥问题一:如何将结果显示在下拉列表,第二如何读取XML文件,这个稍后介绍。