大家好,又见面了,我是你们的朋友全栈君。自从Jesse James Garrett创造了AJAX这个名词,到现在已经过去十八个月了,AJAX几乎让Web开发彻底改头换面。在这一年半的时间里,发生了很多事情,包括Web 2.0的热炒,许多创建或使用富互联网技术公司的诞生或复苏,还有真正动态化的在线软件层出不穷。很明显,AJAX这个名词受到开发业界的广欢迎,已经真正的走入到我们生活中,Web应用程序也达到前所未有的发展。
如此火爆的技术难道我们还不去体验下吗?
首先推荐大家两本中文版ajax书(相信不少人都有了),Ajax.基础教程和AJAX In Action, 因为文件比较大电子邮件无法发送。有需要的朋友可以加我QQ 373437(请注明javaeye) 我可以发给大家,我基本每天在线的。
下面就开始我们第一次ajax 之旅吧
下面介绍的是一个最简单的ajax完整例子, 为了让完全没有接触过ajax的朋友看懂,我写了非常详细的注释 请不要嫌我罗嗦:)
simple.jsp 文件代码
<!–age contentType=”text/html; charset=GBK–>
<script type=”text/javascript”>
//定义一个变量,用来指向XMLHttpRequest对象
var xmlHttp;
//异步请求时调用的方法
function startRequest()
{
//该方法用来产生一个XMLHttpRequest对象
createXMLHttpRequest();
/**将XMLHttpRequest的属性onreadystatechange存储了回调函数的指针
如果XMLHttpRequest的readyState改变时就会调用回调函数,和C#里的委托是类似的
这里将指针指向了handlestatechange方法**/
xmlHttp.onreadystatechange=handlestatechange;
/*打开对服务器的调用第一个参数用来指定是get还是post方法访问,第二个参数是要访问的路径*/
xmlHttp.open(“GET”,”simple.xml”);
//向服务器发送请求
xmlHttp.send(null);
}
//改方法用来针对不同的浏览器产生一个XMLHttpRequest对象
function createXMLHttpRequest()
{
//判断如果浏览器是IE
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
//非IE的浏览器
else if(windox.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
//XMLHttpRequest的readyState改变时调用改方法
function handlestatechange()
{
//readyState有5个值,4表示请求完成,其他是0=未初始化,1=正在加载,2=以加载,3=交互中
if(xmlHttp.readyState==4)
{
//status 表示服务器请求状态 下面列出了一些基本状态
if(xmlHttp.status==200)
{alert(“请求成功”);
alert(“server:++++++++++”+ xmlHttp.responseText);
}
if(xmlHttp.status==202)
{alert(“请求被接收,但处理未完成”);
alert(“server:++++++++++”+ xmlHttp.responseText);
}
if(xmlHttp.status==400)
{alert(“错误的请求”);
alert(“server:++++++++++”+ xmlHttp.responseText);
}
if(xmlHttp.status==404)
{alert(“请求资源未找到”);
alert(“server:++++++++++”+ xmlHttp.responseText);
}
if(xmlHttp.status==500)
{alert(“内部服务器错误 代码问题”);
alert(“server:++++++++++”+ xmlHttp.responseText);
}
}
}
</script>
<!–点击该按钮时调用异步请求–>
<input type=”button” οnclick=”startRequest();” value=”ajax”/ >
<!– 下面是一些和ajax无关的静态代码 –>
<!– 下面是一些和ajax无关的静态代码 –>
注意看提交后页面是不是全部刷新
在目前的Web2.0热潮中,Ajax已成为人们谈论最多的技术术语!其实,AJAX(Asynchronous JavaScript and XML)是多种技术的综合,它使用XHTML和CSS标准化呈现,使用DOM实现动态显示和交互,使用XML和XSTL进行数据交换与处理,使用XMLHttpRequest对象进行异步数据读取,使用Javascript绑定和处理所有数据。更重要的是它打破了使用页面重载的惯例技术组合,可以说AJAX已成为Web开发的重要武器!
simple.xml代码
可以随便写点东西,这里就不帖了
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158773.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...