[Web前端应用]--Ajax技术与应用简介 【难度 ★★★★】

本文介绍原始的Ajax技术,包括XMLHttpRequest对象的创建、服务器返回信息的处理及URL请求的发送等关键技术步骤。此外还介绍了如何利用JavaScript的newDate().getTime()方法解决缓存问题,确保每次Ajax请求都能获取最新数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本节以不用框架的形式,讲述最原始的Ajax技术,许多的应用都需要Ajax方法,例如你去一些网站中注册,发现你输入的新用户名称,会在右侧即刻显示出“已经注册”或“可用”的字样,而不需要你去提交了结果后再提醒,这样的功能就是Ajax实现的。
Ajax异步调用实现的关键是XMLHttpRequest对象的使用,可分为三步实现:
1,创建XMLHttpRequest
2,定义服务器返回信息的操作函数
3,使用XMLHttpRequest对象发送URL请求给处理页面


【代码】--创建XMLHttpRequest对象的通用代码:
var xmlHttp;//设置全局变量
function createXMLHttpRequest(){
if(window.ActiveXObject)//IE情况下
xmlHttp = new ActiveXObjext("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)//非IE情况下
xmlHttp = new XMLHttpRequest()
}


【代码】--结合Javascript的new Date().getTime()方法,开发能解决缓存旧读的Ajax程序,在请求页后面加上该函数生成的时间戳,能有效的放置信息旧读,保证每次Ajax请求都是获取到最新的数据。
······//省略部分代码
createXMLHttpRequest(){······//详细见上例的代码}
var sURL = the_url + "?sendValue=" + val + "&timestamp=" +new Date().getTime();
xmlHttp.open("GET",sURL,true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
······//一系列的商业逻辑,例如去后台查询数据库
result = xmlHttp.responseText.split(",")//将结果用,分隔符分批,以数组形式传入result变量中。至于.split()方法是否需要使用,与你的商业逻辑有关。一般的,Ajax静态刷新获取的值,会由后台的处理结果中(例如后台的数据库查询结果),放置到xmlHttpRequest对象的responseText属性当中。
······//省略部分代码
}
}
xmlHttp.send(null);
······//省略部分代码

其中:Ajax有GET和POST两种方法:
xmlHttp.open("GET","serverPage?value=123");然后再设置xmlHttp.send(null);
xmlHttp.open("POST","serverPage");然后设置setRequestHeader()方法,最后编写xmlHttp.send("value=123&XMLHttpRequest=test");
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值