ajax演示源码

本篇文章介绍了关于基础的原生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;                }            }        }        };

登录后复制

3.png

4.png

    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

(0)
上一篇 2025年3月8日 16:56:43
下一篇 2025年2月25日 20:04:01

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • $.ajax()怎样从服务器获取json数据

    这次给大家带来$.ajax()怎样从服务器获取json数据,$.ajax()怎样从服务器获取json数据的注意事项有哪些,下面就是实战案例,一起来看一下。 下面小编就为大家分享一篇基于$.ajax()方法从服务器获取json数据的几种方式总…

    2025年3月8日
    200
  • Ajax与Jquery结合数据库做出实现下拉框的二级联动

    这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下。 首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: …

    2025年3月8日 编程技术
    200
  • 在jquery的请求ajax与在servlet中的响应ajax

    这次给大家带来在jquery的请求ajax与在servlet中的响应ajax,在jquery的请求ajax与在servlet中的响应ajax的注意事项有哪些,下面就是实战案例,一起来看一下。 在jsp中,首先,你需要导入jquery的架包:…

    编程技术 2025年3月8日
    200
  • ajax请求data会遇到哪些问题

    这次给大家带来ajax请求data会遇到哪些问题,ajax请求data的注意事项有哪些,下面就是实战案例,一起来看一下。 使用jquery,post请求data:那里要使用data:JSON.stringify(data) $.ajax({…

    编程技术 2025年3月8日
    200
  • Jquery ajax异步跨域怎么实现

    这次给大家带来Jquery ajax异步跨域怎么实现,Jquery ajax异步跨域实现的注意事项有哪些,下面就是实战案例,一起来看一下。 如何快速解决JS或Jquery ajax异步跨域的问题呢?下面小编就为大家分享一篇快速解决Jquer…

    编程技术 2025年3月8日
    200
  • ajax请求后台数据成功后无反映应该如何处理

    这次给大家带来ajax请求后台数据成功后无反映应该如何处理,ajax请求后台数据成功后无反映的注意事项有哪些,下面就是实战案例,一起来看一下。 jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:…

    编程技术 2025年3月8日
    200
  • 在jQuery里怎样最高性能的写ajax请求

    这次给大家带来在jQuery里怎样最高性能的写ajax请求,在jQuery里怎样最高性能的写ajax请求的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并…

    编程技术 2025年3月8日
    200
  • 多个AJAX如何一起请求等待

    这次给大家带来多个AJAX如何一起请求等待,多个AJAX一起请求等待的注意事项有哪些,下面就是实战案例,一起来看一下。 下面小编就为大家分享一篇利用JQUERY实现多个AJAX请求等待的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随…

    2025年3月8日 编程技术
    200
  • Ajax怎么实现下拉框无刷新联动

    这次给大家带来Ajax怎么实现下拉框无刷新联动,Ajax实现下拉框无刷新联动的注意事项有哪些,下面就是实战案例,一起来看一下。 HTML代码: @{ Layout = null;}@using DAL;@using System.Data;…

    编程技术 2025年3月8日
    200
  • 用JQUERY实现多个AJAX请求同时等待

    这次给大家带来用jquery实现多个ajax请求同时等待,用jquery实现多个ajax请求同时等待的注意事项有哪些,下面就是实战案例,一起来看一下。 前言通常,jQuery的函数ajax进行Ajax调用。函数ajax只能做一个Ajax调用…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论