ajax经典案例—无刷新验证用户名(GET)

最新推荐文章于 2022-07-25 10:47:04 发布
原创 最新推荐文章于 2022-07-25 10:47:04 发布 · 830 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细介绍了使用AJAX实现客户端与服务器交互的四个步骤：创建AJAX对象、发送请求、服务器处理及接收响应。通过具体实例展示了如何用JavaScript实现异步数据传输。

编写过程分为四步：1、创建ajax对象2、连接服务器，发送请求3、服务器处理4、接受返回值。

一、创建ajax对象

  1. function $(id){
  2. return document.getElementById(id);
  3. }
  5. function getXHR(){
  6. var oAjax;
  7. if(window.XMLHttpRequest){
  8. //IE7+, Firefox, Chrome, Opera, Safari
  9. oAjax=newXMLHttpRequest();
  10. }
  11. else{
  12. oAjax=newActiveXObject("Microsoft.XMLHTTP")
  13. }// code for IE6, IE5
  14. return oAjax;
  15. }
二、连接服务器，发送请求
  1. var url='/checkName.php?time='+newDate()+'&name='+$('username').value;
  2. xhr.open('GET',url,true);
  3. xhr.send(null);
  1. //open(get,url,true)
  2. //第一个参数：数据传输方式 get post
  3. //第二个参数：处理文件 xx.php xx.txt ,要数据：直接写路径就好；提交数据：在地址那里写数据（get方式）
  4. //第三个参数：同步或者异步方式，默认是异步true
  1. //send() 如果是get方式，写null或者为空
  2. //如果是post，参数那就直接写要传输的内容

三、服务器处理
  1. <?php
  3. //3号线：获取ajax传来的信息，做处理，再返回给ajax：后台做，或者后台协作
  4. $userName=$_GET['name'];
  6. if($userName=='admin'){//把内容拿到，进行判断，输出信息返回给ajax
  7. echo'该用户名不能使用';
  8. }
  10. else{
  11. echo'该用户名能使用';
  12. }
  14. ?>
四、接受返回值。
  1. xhr.onreadystatechange=function(){
  2. //alert('现在的状态是：'+xhr.readyState);
  3. if(xhr.readyState==4){
  4. //alert(xhr.responseText);
  5. $('inf').innerHTML=xhr.responseText;
  6. }
  9. }
IE的缓存解决方法有两种：1、在URL上添加动态的数据，如时间轴new Date() 2、服务端写代码，禁止缓存header("Cache-Control: no-cache");。

  1. xhr.onreadystatechange=function(){
  2. //alert('现在的状态是：'+xhr.readyState);
  3. if(xhr.readyState==4){
  4. //alert(xhr.responseText);
  5. $('inf').innerHTML=xhr.responseText;
  6. }
  9. }
_小彬哥
关注
一个完整的ajax应用例子
09-25
一个完整的用js写的ajax例子，模仿注册页面输入用户名，输入框失去焦点后，后台异步判断该用户名是否可用，并在页面显示判断结果
Ajax无刷新注册验证用户名
05-16
通过 Ajax 去无刷新注册验证用户名是否存在！
AJAX(三)--实例无刷新验证用户名是否存在
http://blog.csdn.net/lovesummerforever
02-05 7748
我们知道在注册淘宝账户时，当我们注册的账户名与其他人同名的时候，系统会自动的给出提示，并且给出推荐使用的账户名，并没有完全的刷新整个页面，而是悄悄的向服务器端发送请求进行验证，让我们感觉很舒服，这就是AJAX技术的作用，大大增加了用户体验。          我们查看源代码就可以看到客户端脚本，使用的AJAX技术。
Ajax案例实战分析
weixin_45688123的博客
07-25 1235
Ajax，全称为AsynchronousJavaScriptandXML，是利用JavaScript在保证页面链接不改变的情况下，滑动某一区域会不断地出现新的数据，是与服务器交换数据并更新部分网页的技术。通过对爬取NBA微博数据案例来体会Ajax分析和爬取的基本流程，由于Ajax接口大部分都是以JSON的格式返回数据，在一定程度上减少了对数据提取的工作量。......
AJAX_入门&经典案例
xglfire的博客
06-28 5167
AJAX_入门&经典案例 AJAX 快速入门 AJAX 介绍 AJAX(Asynchronous JavaScript And XML)：异步的JavaScript 和 XML。 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。 一般的网页如果需要更新内容，必需重新加载个页面。 而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。 异步 同步 原生 JavaScript 实现
Ajax的经典示例
鬼屋里的故事~.~
08-26 1445
   Ajax(Asynchronous JavaScript and XML)，使用户在使用Web程序时，不用在来来回回的Post了，可以近乎实时的从客户端收到服务器返回的信息，而无需刷新，极大的非富了用户的操作体验。                 XMLHttpRequest对象是Ajax的核心对象        不同的浏览器，建立对象的方式不同这里以IE为例        var requ
PHP 使用 Ajax 异步验证用户名是否已经被使用
JiangNanMax的博客
04-10 6821
PHP 使用 Ajax 异步验证用户名是否已经被使用 一、前言 在上周的服务器课程中，JJ 老师布置了一个针对 Ajax 的作业，大致的应用场景就是：比如在注册页面，用户注册账户时需要给自己取一个用户名，如果在用户填写完所有的信息点击提交后，服务器才对用户名是否已经被使用进行判断，如果还未被使用就没啥事，那如果被使用了呢？？？页面已经进行了刷新，用户还得重新输入一次所有的信息，用户体验极差。这...
关于Ajax的异步刷新功能及简单案例（php）
Wellfancy的博客
11-08 2503
目录 GET请求 有关 GET 请求的其他一些注释： POST请求 有关 POST 请求的其他一些注释： 几个一会儿会用到的知识点： 1、xmlhttp.readyState==4 && xmlhttp.status==200 2、针对IE6及以下的版本浏览器的兼容处理 3、onblur事件 操作演示 HTML代码 php代码部分： 1、checkUsername部分： 2、checkEmail部分 3、checkPhone部分 这篇文章主要来介绍一...
ssm用ajax异步验证用户名是否存在
追梦人生的博客
06-25 6682
ajax异步验证可以使页面无需刷新，即可使页面与服务器通信，尤其是注册页面，能给用户非常好的体验。在此记录下，方便大家使用，使用框架为（MyBatis+SpringMVC+Spring）。jsp页面：&lt;input type="text" name="name" id="name" placeholder="请输入用户名" required onchange="validateName()"..
Ajax无刷新验证用户名（get方法和post方法）
小蜗牛的博客
05-15 471
1.register_get.html ---------get方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户注册</title> <script type="text/javascript"> <!--...
Ajax交互小案例
weixin_45000814的博客
04-23 719
今天写的是登录注册到数据库的小案例，利用ajax技术实现 分为几个文件，具体如下： 首页内容页面(包括登录) 此页面实现了登录一次就不能再点击登录，只有退出登录判断cookie不存在时才可以再次点击登录按钮 同样登录成功才会设置cookie，并且只有存在cookie时才能跳转其他页面 <!DOCTYPE html> <html lang="en"> <head&...
ajax经典案例开发大全有几个案例
05-17
ajax经典案例开发大全 涵盖了带进度的文件上传，注册表单验证、产品快速检索 页面关键字提示，动态加载数据 自动定时业务等
Ajax经典实例大全
09-24
Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全
Ajax 经典案例开发大全
09-18
经典案例，带数据库脚本、Java源文件和页面源文件。有演示效果，也可以自己部署看效果。以下是案例的目录。 1-1.EXE 动态加载的FAQ实例演示 1-2.EXE 根据邮政编码获取地区信息实例演示 1-3.EXE 动态树形列表实例演示 1-4.EXE 多级联动菜单实例演示 1-5.EXE 条件设置向导实例演示 1-6.EXE 页面关键词提示实例演示 2-1.EXE 无刷新显示回帖实例演示 2-2.EXE 输入内容前提示实例演示 2-3.EXE 带进度的文件上传实例演示 2-4.EXE 大量数据动态浏览查询实例演示 2-5.EXE 信息排序实例演示 2-6.EXE 切换标签页实例演示 3-1.EXE 注册表单验证实例演示 3-2.EXE 购物车实例演示 3-3.EXE 产品快速检索实例演示 3-4.EXE 系列产品特性速查实例演示 3-5.EXE 邮件订阅实例演示 3-6.EXE 产品评级实例演示 4-1.EXE 简单计算器实例演示 4-2.EXE 文章拼写检查实例演示 4-3.EXE 拼词游戏实例演示 4-4.EXE 在线词典实例演示 4-5.EXE 远程网页源代码读取实例演示 5-1.EXE 相册浏览实例演示 5-2.EXE 幻灯片实例演示 5-3.EXE 灯箱效果实例演示 5-4.EXE 聊天室实例演示 6-1.EXE 自动登录实例演示 6-2.EXE 自动保存草稿实例演示 6-3.EXE 实时更新的股价实例演示 6-4.EXE 提前加载分页文章实例演示 7-1.EXE 获取服务器当前时间实例演示 7-2.EXE 远程PING服务器实例演示 7-3.EXE 服务器监测系统实例演示 7-4.EXE 使用滑动栏设置参数实例演示 8-1.EXE RSS阅读器实例演示 8-2.EXE 天气情况查询实例演示 8-3.EXE 访问搜索服务实例演示 8-4.EXE 读取Amazon产品目录实例演示 9-1.EXE 名片册实例演示 9-2.EXE 自定义个人门户实例演示 9-3.EXE 个人任务管理实例演示 9-4.EXE 许愿墙实例演示 9-5.EXE 日程表实例演示 9-6.EXE 考试系统实例演示
Ajax经典案例开发大全&jQuery实战案例精粹--mini书
01-29
内含有jQuery实战案例精粹--mini书和Ajax经典案例开发大全两个PDF
Ajax学习总结(一)：Ajax工作流程+XMLHttpRequest对象及它的两个方法+用户名无刷新验证
知且行的博客
05-31 483
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） 用途：快速创建动态网页，不需要刷新整个页面，只需与服务器进行少量的数据交换便可达到属于新的目的，适用于需要局部刷新的用例场景。如：省市联动、股票K线图、地图等。 Ajax工作流程： 1、浏览器创建一个XMLHttpRequest对象，发送HttpRequest请求到服...
使用Ajax实现无刷新用户名验证和分页的效果（一）
南广一瓮的博客
08-31 1087
最近一个项目开发需要采用非常简单的MVC+Ajax技术，实现对网页部分更新操作，因为Ajax在实际项目开发中使用较多，所以自行整理一份，以便将来的运用。
Ajax技术 实例篇
weixin_47044904的博客
06-09 1252
本篇文章通过Html+Ajax+node技术实现一个简单的Ajax请求案例，为加强对Ajax技术的了解和实操经验
ajax简单运用一（无刷新验证用户名(get)
zyp22343234的博客
05-21 1243
大家好我是肥羊，现在我们来简单的来写一下ajax的get方式编写一个简单的ajax验证用户名的函数，不足之处还望大家多多包涵。 首先我们来简单的介绍一下编写过程： 编写过程： 创建ajax对象 ActiveXObject("Microsoft.XMLHTTP")XMLHttpRequest() 连接服务器 open(方法, 文件名, 异步传输) 同步和异步
ajax经典案例之无刷新验证用户名源码以及分析
My_name_is_ZwZ的博客
07-15 686
其中js代码如下： &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;form method="post" action="user.do"&gt; 用户名：&lt;input type="text" onkeyup="chec
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值