用javascript实现页面无刷新更新数据
在Web开发中,一个常见的挑战是预测用户所需的数据。很多时候,我们需要在用户做出选择后才能从服务器获取相关数据,再反馈给用户。比如用户选择一个省份后,我们需要实时显示该省份下的所有城市。这种情况下,通常需要刷新整个页面才能重新读取数据,这样不仅效率低下,也会给用户带来不好的体验。
借助JavaScript和微软件的XMLHTTP对象,我们可以实现无需刷新页面的数据更新。以狼蚁网站的SEO优化为例,我们来演示一种验证用户注册情况的技术。
在服务器上创建一个CheckUser.asp文件,用于检测用户是否存在。根据用户是否存在,反馈0或1。然后,我们在客户端设计HTML页面。
一、JavaScript代码部分:
```javascript
function check_user_exists(form){
var u_name = form.u_name.value;
if (u_name == null || u_name == '') {
alert("请输入用户名");
return false;
}
var infoBoard = document.getElementById("checkInfo");
infoBoardnerText = '查询中...';
var myurl = location.protocol + "//" + location.hostname + "/CheckUser.asp?u_name=" + u_name;
var retCode = openUrl(myurl);
switch(retCode){
case "-2":
infoBoardnerHTML='抱歉,查询失败';
break;
case "1":
infoBoardnerHTML='恭喜,' + u_name + '可以使用';
break;
case "0":
infoBoardnerHTML='抱歉,用户名' + u_name + '已经被使用';
}
return;
}
function openUrl(url){
var objxml = new ActiveXObject("Microsoft.XMLHttp");
objxml.open("GET", url, false);
objxml.send();
var retInfo = objxml.responseText;
if (objxml.status=="200"){
return retInfo;
} else{
return "-2";
}
}
```
二、HTML表单设计部分:
```html
```
通过以上步骤,我们完成了一个无需刷新页面的数据更新程序(演示地址:[ 无需刷新页面即可获取数据的技术不仅提升了用户体验,也为开发者提供了更广阔的创新空间。
编程语言
- 用javascript实现页面无刷新更新数据
- PHP中PDO的事务处理分析
- jQuery移动端日期(datedropper)和时间(timedropper)选择器
- JS计算距当前时间的时间差实例
- php版微信自动获取收货地址api用法示例
- 13道关于JavaScript正则表达式的面试题
- PHP isset()及empty()用法区别详解
- jQuery如何用正则表达式验证手机号、身份证号、
- 深入理解JavaScript系列(28):设计模式之工厂模
- 浅谈js函数中的实例对象、类对象、局部变量(局
- PHP函数in_array()使用详解
- javascript实现动态加载CSS
- SQL普通表转分区表的方法
- 详解sql中exists和in的语法与区别
- Vue使用vux-ui自定义表单验证遇到的问题及解决方
- asp.net利用存储过程实现模糊查询示例分享