本篇文章介绍了关于基础的原生javascript中的ajax操作,内容相对比较基础,对于javascript中ajax没够掌握清楚的同学可以再次看看学习学习javascript中的ajax操作,废话不那么多,我们一起来看看吧!
以下html文件都要服务器环境下打开。
nbsp;html>ceshi 帐号: 密码: function checkname() { var username = document.getElementById('username').value; //1、创建对象 var xhr = new XMLHttpRequest(); //2、连接服务器 xhr.open('GET','name.json',true);//json数据内容如下图3 //3、向服务器发送请求 xhr.send(null); //4、请求完成,响应就绪 xhr.onreadystatechange=function(){ if (xhr.readyState==4) { if (xhr.status==200) {//表示已经获取到文件。 var str = JSON.parse(xhr.responseText);//将json数据转换成js数组对 alert(str);//输出结果如图4 。 }else{ alert(xhr.statusText)//如果没有获取name.json的数据,即服务器找不到这个文件,则执行该段代码。输出框会显示“Not Found”。如果是alert(xhr.status),则显示404; } } } };
登录后复制
function checkname() { var username = document.getElementById('username').value; var boo = false; //1、创建对象 var xhr = new XMLHttpRequest(); //2、连接服务器 xhr.open('GET','name1.json',true); //3、向服务器发送请求 xhr.send(null); //4、请求完成,响应就绪 xhr.onreadystatechange=function(){ if (xhr.readyState==4) { if (xhr.status==200) { var str = JSON.parse(xhr.responseText);//将json数据转换成js数组对象 alert(str) for (var i = 0; i < str.length; i++) { if (username == str[i]) { boo = true; } }//判断用户名是否已经存在,即输入的用户名是否存在与json文件中。 if (boo) { alert("用户民已存在"); } else { alert("用户名可以使用") } } } }; };
登录后复制
ajax技术是一种能够将桌面应用程序的体验效果带给web应用程序的技术。这种体验效果主要就是页面的无刷新数据交换以及页面无刷新改变内容。ajax的功能真的是很多,讲不完的那种多
相关ajax文章推荐:
Ajax和PHP实例分析
用jq发送多个ajax然后执行回调的小技巧
以上就是ajax演示源码的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2783889.html