学习Ajax之前必须有html，CSS，JS，jQuery(了解)的相关知识。
1.什么是Ajax？
Ajax在前端主要的功能是获取服务器的数据。
经常使用Ajax来进行异步加载，也就是不影响整个窗口的前提下，进行页面部分的加载改变。
Ajax异步!!!，Ajax的全称自然就是：Asynchronous(异步) JavaScript And XML
2.Ajax的使用 Get方法
在学习php基础语法时候，我们通过跳转到一个新的页面来实现，就像php语法的第7节一样。下面我们使用Ajax来，直接请求服务器发送数据，不需要跳转一个新的页面。
在元素JS中来实现Ajax主要的类就是XMLHttpRequest，它的使用一般有四个步骤：
1.创建XMLHttpRequest对象
2.准备发送网络请求
3.开始发送网络请求
4.指定回调函数
这里使用ajax，能够识别用户名是否已存在的例子：
例如：
首先，在wamp后台中，创建一个checkUsername.php，作为一个判断文件。
<?php
$username = $_GET["username"];
//这里应该查询数据库，这里只是一个模拟数据库
if($username == 'zhangsan'){
echo "username exists";
}else{
echo "username OK";
}
?>
再在wamp中，创建一个register.html，来作为前端访问的页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册界面</title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
var username = document.getElementById("username").value;
//使用JS代码进行checkUsername.php这个文件的访问，将Username传递给这个文件
//从这开始就使用ajax来操作了。
//<!--第一步：创建XMLHttpRequest对象-->
var xhr = new XMLHttpRequest();
//<!--第二步：准备发送-->
//这里的open方法有三个参数。
//第一个参数，使用的什么方法。
//第二个参数url，这里因为是get请求，所以url后面是要跟上参数的！！！
//第三个参数，同步还是异步，true异步，false同步
xhr.open("get","checkUsername.php?username="+username,true);
//<!--第三步：执行发送-->
xhr.send(null);
//<!--第四步：指定回调函数-->
xhr.onreadystatechange = function(){
//responseText返回的是字符串
var result = xhr.responseText;
console.log(result);
document.getElementById("result").innerText = result;
};
};
};
</script>
</head>
<body>
<h1>注册界面</h1>
<form action="register.php" method="get">
用户名：<input type="text" name="username" id="username">
<input type="button" value="验证用户名" id="btn">
<span id="result"></span>
<br>
密码：<input type="password" name="password">
<input type="submit" name="" value="提交">
</form>
</body>
</html>
多看注释！！！！来理解代码。
3.Ajax的使用 Post方法
和上面一样，直接上例子，一定看注释！！
创建一个register.html，来作为前端访问的页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册界面</title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
var username = document.getElementById("username").value;
//使用JS代码进行checkUsername.php这个文件的访问，将Username传递给这个文件
//从这开始就使用ajax来操作了。
//<!--第一步：创建XMLHttpRequest对象-->
var xhr = null
//由于IE6以下的版本是没有XMLhttpRequest这个对象的，所以做一个兼容性判断。
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else{
//IE6以下版本，都是使用ActiveXObject
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//<!--第二步：准备发送-->
//这里的open方法有三个参数。
//第一个参数，使用的什么方法。
//第二个参数url，这里因为是get请求，所以url后面是要跟上参数的！！！
//第三个参数，同步还是异步，true同步，false异步,默认异步
// xhr.open("get","checkUsername.php?username="+username,true);
xhr.open("post","checkUsername.php",true);
//<!--第三步：执行发送-->
//对于post请求，参数应该放到请求体当中
var param = "username=" + username
//设置xhr请求头信息，这个步骤仅仅是针对于post请求才有的！！！
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(param);
//<!--第四步：指定回调函数-->
xhr.onreadystatechange = function(){
//readyState等于4代表的是xhr的完成相应
if(xhr.readyState == 4){
//status等于200，代表正常
if(xhr.status == 200){
//除了responseText还有xhr.responseXML,就是不同的格式。
var result = xhr.responseText;
console.log(result);
document.getElementById("result").innerText = result;
}
}
};
};
};
</script>
</head>
<body>
<h1>注册界面</h1>
<form action="register.php" method="post">
用户名：<input type="text" name="username" id="username">
<input type="button" value="验证用户名" id="btn">
<span id="result"></span>
<br>
密码：<input type="password" name="password">
<input type="submit" name="" value="提交">
</form>
</body>
</html>
对readyState和status的解释：
另一个不变，checkUsername.php
<?php
$username = $_POST["username"];
//这里应该查询数据库，这里只是一个模拟数据库
if($username == 'zhangsan'){
echo "username exists";
}else{
echo "username OK";
}
?>
这里解释以下，第2步骤，准备发送阶段的open方法中的服务端地址如何确定，一般开发人员会提供一份接口文档,里面会详细的告诉你地址参数什么的。
4.使用Ajax完成唯一性案例操作
话不多说，直接上代码。
创作一个register.html文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>register</title>
<script type="text/javascript">
window.onload = function(){
var username = document.querySelector("#username");
var email = document.querySelector("#email");
var phone = document.querySelector("#phone");
//onblur,事件在对象失去焦点时发生。
username.onblur = function(){
var usernameValue = username.value;
console.log(usernameValue);
//这里比较用户名username和服务器数据库里面内容。
//往后使用ajax来实现。
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get","./server/checkUsername.php?uname="+usernameValue,true);
xhr.send(null);
xhr.onreadystatechange = function(){
if (xhr.readyState==4) {
if (xhr.status==200) {
//responseText返回的是字符串
//responseXML返回的是XML格式
var result = xhr.responseText;
console.log(result);
var username_result = document.querySelector("#username_result");
if (result == "NO") {
username_result.innerText = "user已经注册！！";
}else{
username_result.innerText = "user可以使用。";
}
}
}
}
};
email.onblur = function(){
var emailValue = email.value;
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post","./server/checkEmail.php",true);
var param = "e="+ emailValue;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);
xhr.onreadystatechange = function(){
if (xhr.readyState==4 && xhr.status==200) {
var result = xhr.responseText;
var email_result = document.querySelector("#email_result");
if (result==0) {
email_result.innerText = "邮箱可用";
}else{
email_result.innerText = "邮箱不可用";
}
}
};
};
phone.onblur = function(){
var phoneValue = phone.value;
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post","./server/checkPhone.php",true);
var param = "phonenumber="+phoneValue;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);
xhr.onreadystatechange = function(){
if (xhr.readyState==4) {
if (xhr.status==200) {
//xhr.responseText是一个字符串
var result = xhr.responseText;
//如果得到的像一个字符串形式，可以把他转化为对象，方便我们获取里面的值。
resultObject = JSON.parse(result)
var phone_result = document.querySelector("#phone_result")
if (resultObject.status == 0 ) {
//代表手机号码可用
phone_result.innerText = resultObject.message.tips+","+resultObject.message.phonefrom;
}else if (resultObject.status == 1) {
//代表手机号码不可用
phone_result.innerText = resultObject.message;
}
}
}
}
};
}
</script>
</head>
<body>
<h1>注册界面</h1>
<form action="">
用户名：<input type="text" id="username"><span id="username_result"></span><br>
邮箱：<input type="text" id="email"><span id="email_result"></span><br>
手机号码：<input type="text" id="phone"><span id="phone_result"></span>
</form>
</body>
</html>
再准备三个服务器php文件，
checkEmail.php：
<?php
$email = $_POST["e"];
if ($email == 'xxx@qq.com') {
echo '1';
}else{
echo '0';
}
?>
checkPhone.php文件：
<?php
$phone = $_POST["phonenumber"];
if ($phone == '139') {
echo '{"status":1,"message":"手机号已经被使用"}';
}else{
echo '{"status":0,"message":{"tips":"手机号可用","phonefrom":"中国电信"}}';
}
?>
checkUsername文件：
<?php
$username = $_GET["uname"];
//这里应该查询数据库，这里只是一个模拟数据库
if($username == '123'){
echo "NO";
}else{
echo "OK";
}
?>
上面就是完成了一个用户名，电话，电子邮箱的一个唯一性检验，一定要多看注释，联合前面。
3133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
