Ajax, php开发 
2 Comments 原生js发送ajax请求
Ajax其实就是通过XML对象发送HTTP请求:
其中:方法 :
open('get/post' ， URL ， true/false); // true: 异步请求 ;false: 同步请求
send(null); // 如有参数则 k=v&k2=v2 这种形式传过去，无参数则 null
属性 :
readyState: // 代表请求的状态 , 不断变化 ,0 变化到 4 的时候 , 请求全部结束
responseText // 响应的内容
status // 响应状态码 200,403,404
statusText // 状态文字 ,ok ,forbidden, not found
事件 :
onreadystatechange=function(){} // 当 readyState 变化时 , 会触发此事件
以ajax验证用户名为例
实现的效果是:
首先写简单的前端界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p><input type="text" name="username" value="" placeholder=""><span id="sp"></span></p>
<p><input type="submit" name="username" value="注册" ></p>
</body>
<script type="text/javascript">
var inp = document.getElementsByTagName('input')[0];
var sp = document.getElementById('sp');
inp.onblur = function(){
var xhr = new XMLHttpRequest; //new对象
xhr.open('get','1.php?name='+inp.value,true); //以get方式,访问:1.php并且加上参数(用户输入的用户名的值),以异步的形式访问.
xhr.send(null); //没有用到send则写null就ok了
xhr.onreadystatechange = function(){ //状态改变的时候就会触发此函数
if(this.readyState == 4){ //状态为4就是相应结束了
if(this.responseText == 1){ //若相应返回的值是1,
sp.innerHTML = '用户名已经存在';
sp.style.color = 'red'; //字体的颜色是红色
}else{ //若相应返回的值不是1
sp.innerHTML = '用户名可以用';
sp.style.color = 'green'; //字体的颜色是绿色
}
}
}
}
</script>
</html>
然后在1.php 中写:
<?php
$op = $_GET[‘name’]; //从地址栏上获取name值
$arr = array('lisi','zhanliu'); //简单模拟从数据库中取出来的数据,正式是需要连接数据库,取真实数据的
echo (in_array($op,$arr)?1:0); //判断获取的name值,是否在数组中,有则返回1,无则返回0,
?>
若你不想用get想用post请求则:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<p><input type="text" name="username" value=""><span id='sp'></span></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
<script type="text/javascript">
var inp = document.getElementsByTagName('input')[0];
var sp = document.getElementById('sp');
inp.onblur = function(){
var xhr = new XMLHttpRequest;
xhr.open('post','2.php',true); //post 异步方式
xhr.setRequesteader('Content-type','application/x-www-form-urlencoded'); //注意post方式一定要加上这个声明,否则传不过去.
xhr.send('name='+inp.value); //将值传过去
xhr.onreadystatechange = function (){
if(this.readyState == 4){
if(this.responseText == 1){
sp.innerHTML = '*通过';
sp.style.color = 'green';
}else{
sp.innerHTML = '*无该用户名';
sp.style.color = 'red';
}
}
}
}
</script>
</html>
然后在2.PHP改成post接收就行了
<?php
$op = $_GET[‘name’];
$arr = array('lisi','zhanliu');
echo (in_array($op,$arr)?1:0);
?>