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

来源：互联网发布：淘宝网的管理模式编辑：程序博客网时间：2024/06/04 23:32

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

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

编写过程：

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

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

我是使用的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 '该用户名可以注册';
}
?>

这是我用的虚拟服务器，

1.安装好这个服务器，

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

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

4.成功

阅读全文

1 0