AJAX发送请求(GET方式)

AJAX请求

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术：

• 这里介绍一下AJAX发送请求（GET）

首先我们看一下效果

当用户名已经存在时

当用户名不存在于数据库里，可以使用时

在用户登录时，这是最常见的用法。接下来，我们看看代码吧。

首先，咱们写一个简单的PHP服务

PHP部分

代码如下：

<?php
$db = ['tom', 'mary', 'john'];

//数据库的查询

$uname = $_REQUEST['uname'];
$exists = false;
foreach($db  as  $n){
	if($n === $uname){
		$exists = true;
		break;
	}
}

if($exists){
	echo '1';
}else{
	echo '0';
}
?>

这里仅是一个demo，用于举例。

接着，我们看HTML部分。HTML的代码很简单，就不说了，直接上代码：

HTML部分

代码如下：

	<h1>验证用户名是否正确--AJAX</h1>
	用户名: <input type="text" id="uname"> <span id="uname_ts"></span>
	<br>
	密码名: <input type="password" id="pwd"> <span id="pwd_ts"></span>
	<br>
	验证码: <input type="text">
	<br>
	<button>提交</button>

###接下来我们进入AJAX部分。

• AJAX发送请求分为四个步骤，万变不离其宗：

1.建立连接

	var xhr;
	if (window.XMLHttpRequest){// 兼容 IE7+, Firefox, Chrome, Opera, Safari
	  	xhr = new XMLHttpRequest();
	 }
	else {// 兼容 IE6, IE5
	  	xhr = new ActiveXObject("Microsoft.XMLHTTP");
	 }

2.绑定监听函数

		xhr.onreadystatechange = function(){
			//内容
		}

3.创建请求

		xhr.open("GET","01.txt",true)
		// xhr.open("请求方式","test1.txt",true);
		// GET：一般用于查询，所有的内容全部暴露地址栏中，2000来个字符
		// POST：一般用于存储或者修改服务器数据，请求体重，理论上网速好的情况下不限制大小
		// 第二个参数：请求的地址
		// 第三个参数：boolean     默认为true，不写也为true，表示异步，false表示同步

4.发送数据

		xhr.send(null);
		// xmlhttp.send();   发送数据
		// 有数据的时候写在send参数里，没有就不写或者'null'

####那AJAX判断用户名就非常简单易懂了

• 注意：页面需要在服务器上打开，这里用的Apache服务器

AJAX部分

代码如下：

	<script>
		var uname = document.getElementById("uname");
		uname.onblur = function(){
			// console.log(this.value);
			// 此处可以自己写一个正则验证
			if(uname.value == ''){
				return;
			}
			// 如果不是为空，开始发送AJAX请求，开始验证
			// 1.
			var xhr = null;
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			// 2.
			xhr.onreadystatechange = function(){
				if(xhr.readyState ===4){   //此时状态已经完成
					if(xhr.status === 200){   //响应已经完成
						console.log('已经接收到一个成功的响应');
						console.log(xhr.responseText);
						// 有了0和1
						checkName(xhr.responseText);
					}else{
						console.log('接收到一个非成功的ajax响应' + xhr.status)
					}
				}
			}
			// 3.
			xhr.open("GET","http://192.168.18.112:8080/0327ajax/3.php?uname="+uname.value,true);
			// 4.
			xhr.send(null);
		}

		//checkName方法
		function checkName(txt){
			var uname_ts = document.getElementById("uname_ts");
			if(txt === "1"){
				uname_ts.innerHTML = "该用户名已经被占用";
				uname_ts.style.color = "#f00";
			}else if(txt === "0"){
				uname_ts.innerHTML = "该用户名可以使用";
				uname_ts.style.color = "#0f0";
			}else{
				alert('未知错误' + txt)
			}
		}
	</script>

以上就是AJAX简单的介绍。