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文件,这个稍后介绍。
分享到:
相关推荐
对AJax的简单理解,AJAX简单说明 通过这些也许可以简化学习的过程
学习ajax的详细资料,能更好的理解ajax
学习ajax必不可少的文档加深对ajax的理解
这是学习ajax的一本入门书籍,讲得非常好很适合初学者学习,易于读者理解且勾起学习的兴趣
ajax基础教程,无刷新技术的一种方法。学习他让你更好的理解使用.net的ajaxpro.
本书是“网站开发非常之旅”丛书之一,该书用40多个实例覆盖Ajax技术应用的典型场景,用完整的流程图表示函数的调用关系,...其中的代码规范,层次清楚,注释丰富,若配合视频演示光盘进行学习,更易于读者对Ajax的理解
好的架构设计应该满足KISS的原则,容易理解和学习、开发效率高、容易维护和扩展。在各种必须要满足的约束条件之下,设计出一个最简化的架构是架构师孜孜不倦追求的目标。幸运的是,经过国外高水平的Web开发专家的...
对一种技术的理解与思考越来越深入时,学习一种新技术也会更加容易。触类旁 通,举一反三的能力,就是来自于对于技术本质的追寻。 二、地图,本质上或多或少的相通,也提示着我们技术之间的相互关联,当 你了解的...
ajax技术快速上手的学习,快速理解ajax原理,ajax验证数据库登陆源码。
对初学者理解ajax有一定帮助,对于学习前端打下强有力的接触
学习ajax框架的好教程,可以让人很快理解ajax框架。
对于初学者来说,Ajax是那么神秘,有了这些东西,它也不是再那么神秘了,有了这些东西,你会更好的理解Ajax,
在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了,当时候知道了为什么会存在跨域,以及跨域解决的方案有哪些,今天随着课程的学习,又加深了AJAX跨域的理解,以此记录下来。
本书介绍了如何使用ASP.NET 3.5 AJAX特性创建功能丰富、响应迅速的动态网站,并概述了体系结构,包括ASP.NET服务器元素、客户端JavaScript库和运行库,能够帮助读者清晰地理解ASENET 3.5 AJAX的各个部分之间的关系,...
对一种技术的理解与思考越来越深入时,学习一种新技术也会更加容易。触类旁 通,举一反三的能力,就是来自于对于技术本质的追寻。 二、地图,本质上或多或少的相通,也提示着我们技术之间的相互关联,当 你了解的...
某年某月写的一个ajax实例。...在我学习ajax的过程中,曾经被N多资料所误导,那些不知所云的资料把一个很简单的功能描述的那叫一个云山雾罩。 本文用两个简单的jsp页面让大家对ajax有个透彻的理解。
仅仅是从一个外行,从一个使用者的角度出发,来理解AJAX,就像我在本书的第一章AJAX我也行中那样,开发出很愚蠢,甚至都没有资格被称之为AJAX应用的纯IE、XMLHTTP应用。 <br> AJAX更酷的一点在于,对于传统的Web...
你将透彻理解今天的Web站点和应用程序的内部工作原理,并且学习怎样将Ajax知识用于高级浏览器搜索、Web服务、混搭等。通过学习本书,你将发现为什么利用Ajax从事开发更快速、更容易、代价更低。
仅仅是从一个外行,从一个使用者的 角度出发,来理解 AJAX,就像我在本书的第一章 AJAX 我也行中那样,开发 出很愚蠢,甚至都没有资格被称之为 AJAX 应用的纯 IE、XMLHTTP 应用。 AJAX 更酷的一点在于,对于传统的 ...