ajax简单运用一（无刷新验证用户名(get)

时间：2022-02-28 19:10:50

 大家好我是肥羊，现在我们来简单的来写一下ajax的get方式编写一个简单的ajax验证用户名的函数，不足之处还望大家多多包涵。

首先我们来简单的介绍一下编写过程：

编写过程：

  • 创建ajax对象
    • ActiveXObject("Microsoft.XMLHTTP")
    • XMLHttpRequest()
  • 连接服务器
    • open(方法, 文件名, 异步传输)
      • 同步和异步
  • 发送请求
    • send()
  • 接收返回值
  • l 请求状态监控
    l onreadystatechange 事件
    l readyState 属性：请求状态
    l 0     （ 未初始化）还没有调用 open() 方法
    l 1     （ 载入）已调用 send() 方法，正在发送请求
    l 2     （ 载入完成） send() 方法完成，已收到全部响应内容
    l 3     （ 解析）正在解析响应内容
    l 4     （ 完成）响应内容解析完成，可以在客户端调用了
    l status 属性：请求结果
    l responseText



运行程序下面代码时请先确认是否安装了本地服务器；

我是使用的WampServer2.1a-x32做虚拟服务器

首先在代码编辑器新建html文件和php文件。

下面是原码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="username" /><span id="inf"></span>
</body>
<script>
(function (){
function id(id){//这里是创建一个获取id的函数，
return document.getElementById(id);
}
function ajax(){//创建ajxa对象
var oAjax;
if(window.XMLHttpRequest){
// 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
oAjax=new XMLHttpRequest();
}else {
//老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
oAjax =new ActiveXObject('Microsoft.XMLHTTP');
}
 
return oAjax;//返回oajax；验证ajax对象是否创建成功
 }
id('username').onkeyup=function(){
//当在输入框里按下键盘时，运行此函数
var xhr=ajax();
    //第一个参数：数据传输方式 get  post
//第二个参数：处理文件  xx.php xx.txt ,要数据：直接写路径就好；提交数据：在地址那里写数据（get方式）
//第三个参数：同步或者异步方式，默认是异步true
var url='checkName.php?name='+id('username').value;这个是新建php文件的地址和传输的内容，注意不要写错。
xhr.open('GET',url, true);//发送请求(准备资料，真正的发送)
xhr.send(null);//如果是get方式，写null或者为空,如果是post，参数那就直接写要传输的内容
xhr.onreadystatechange=function(){//接收php传来的数据，进行处理
if(xhr.readyState==4){//服务器已经完成对请求的处理
if(xhr.status==200){// 服务器已成功处理了请求
id('inf').innerHTML=xhr.responseText;//最后把传送回来的值赋给id为‘inf’的span标签
}
}
}

}

})();
</script>
</html>



这是新建的php文件的代码

<?php
//3.获取ajax传过来的内容，做处理，再返回给ajax。后台做的，或者协作
$username=$_GET['name'];//把内容拿到，进行判断，输出信息返回给ajax
if($username=='admin'){
echo '该用户名不合法';
}
else if($username=='malin'){
echo '该用户名已经被注册';
}
else{
echo '该用户名可以注册';
}
?>




ajax简单运用一（无刷新验证用户名(get)这是我用的虚拟服务器，

1.安装好这个服务器，

2.运行软件鼠标左键单击进入www目录，然后把文件放在这个目录下运行，



ajax简单运用一（无刷新验证用户名(get)

3.在浏览器器下输入localhost/文件地址。

4.成功


标签：

相关文章