1.ajax 模块在处理网络请求的时候包括以下四个步骤：
（1）创建Xhr对象
（2）发出HTTP请求
（3）接收服务器回传的数据
（4）更新网页数据
补充：ajax可以付出同步请求，也可以发出异步请求。
但大多数情况下指的是异步请求，因为同步的ajax请求对浏览器会产生“阻塞效应”。
<?php
var xhr= newXHLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr,readyState==4){
if(xhr.statuas==200){
console.log(JSON.panrse(xhr.responseText));
}else{
console.error(xhr.statusText);
}
}
}
xhr.onerror=function(e){
console.error(xhr.statusText);
}；
xhr.open('GET','ajax.php',true);
xhr.timeout=5000;
xhr.send(null);
2.
在Ajax规则中，"请求"从创建到被发送需要至少经历如下几个步骤：
通过XMLHttpRequest类创建xhr对象
为xhr对象添加属性与回调方法
令xhr对象执行open()方法，指明请求被发往某处
令xhr对象执行send()方法，发出请求。
3. xhr对象的常用属性与方法
在整体感知中我们看到的例子中的属性和方法，基本都是要掌握的内容。或许有一些内容
并没有体现在上面，但相信我他们都会是你今后离不开的东西。
（1）onreadystate属性 语法：xhr.onreadystatechange=function(){};
（2）readyState属性 语法： xhr.onreadystatechange=function(){
if(xhr.readyState==n){
//执行对应的函数
}
}
值为4,对应常量DONE,表示服务器数据已经完全接收，或者本次接收已经失败了。
（3）status属性
语法： if（xhr.readyState==n){
if(xhr.status==200){
//通信成功
}
}
200是正常访问
本属性是只读属性
（4）statuesText属性
xhr.statusText
（5）responseText属性
xhr.responseText
（6）open()方法
xhr.open("请求类型’,'url地址’，‘是否异步’）；
（7）setRequestHeader()方法
（8）send()方法
xhr.send(formData);
4.xhr对象发送post请求
var formData=new FormData();
formData.append('key',value);
xhr.send(formData);
var userName = document.querySelector('.userName').value;
var password = document.querySelector('.password').value;
var formData = new FormData();
formData.append('userName',userName);
formData.append('password',password);
5. xhr 对象的兼容性问题
标准浏览器支持的方法为：XMLHttpRequest()
IE浏览器支持的方法为：ActiveXObject()
if(window.XMLHttpRequest){
xhr=new XMLHttpReuest();
}else if(window.ActiveXObject();
}
可以直接使用三目运算符解决
xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("");
6. 请求超时timeout与超时监听ontimeout
xhr.timeout=xxx;
xhr.ontimeout=function(){
console.err('The request for'+url地址+‘timed out’);};
xhr,time=5000;//5秒后超时
xhr.ontimeout=function(){
console.error('The request for'+ajax.php+'timed out.');
};
7.登录post 请求实例
原生的登录HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<label for='username'>
<span>账户：</span><input type="text" id="username"
placeholder="请在此输入用户名"/>
</label>
<br/>
<label for="password">
<span>密码：</span><input type="text" id="password"
placeholder="请在此输入密码"/>
</label>
<br/>
<button>登录</button>
<script type="text/javascript">
var usernameInput = document.querySelector('#username');
var passwordInput = document.querySelector('#password');
var btn = document.querySelector('button');
btn.onclick = function (){
var username = usernameInput.value;
var password = passwordInput.value;
if(username.length==0||password.length==0){
alert('用户名或密码不能为空！！');
return;
}
//ajax
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
if(xhr.status == 200){
var resObj = JSON.parse(xhr.responseText);
// console.log(resObj);
if(resObj.code){
alert('登录成功，欢迎回来'+resObj.username);
}else{
alert('登录失败');
}
}else{
console.log(xhr.statusText);
}
}
};
//构造formData
var formData = new FormData();
formData.append('uname',username);
formData.append('upass',password);
//基本设置
xhr.open('post', 'denglu.php', true);
xhr.send(formData);
};
</script>
</body>
</html>
原生的登录php:
<?php
$success = array('msg'=>'OK');//code字段用来表示是否登录成功，1表示成功，0表示失败
$username = $_POST['uname'];
$password = $_POST['upass'];
//把数据库中所有的信息检索出来
$con = mysqli_connect('localhost','root','','studb');
if($con){
mysqli_query($con, 'set names utf8');
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');
//
$sql = "select * from stud where 1";
$result = $con->query($sql);
//
if($result->num_rows>0){
$info = [];
for($i=0; $row=$result->fetch_assoc(); $i++){
$info[$i] = $row;
}
//判断逻辑，判断数组信息中是否有和用户发来的内容匹配的选项
$flag = 0;
for($j=0; $j<count($info); $j++){
if($info[$j]['stuName'] == $username){
if($info[$j]['stuAge'] == $password){
$flag = 1;
break;
}
}
}
$success['code'] = $flag;
//ps
if($flag){
$success['username'] = $username;
}
}
}
echo json_encode($success);
?>
PDO 登录HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pod登录</title>
</head>
<body>
<label for="username">
<span>账户：</span><input type='text' id='username' placeholder='请在此输入用户名' value='lily'>
</label>
<br/>
<label for="password">
<span>密码：</span><input type='text' id='password' placeholder='请在此输入密码' value='19'>
</label>
<br/>
<button>登录</button>
<script type='text/javascript'>
var usernameInput = document.querySelector('#username');
var passwordInput = document.querySelector('#password');
var btn = document.querySelector('button');
btn.onclick = function (){
var username = usernameInput.value;
var password = passwordInput.value;
if(username.length==0||password.length==0){
alert('用户名或密码不能为空！！');
return;
}
// ajax
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
if(xhr.status == 200){
var resObj = JSON.parse(xhr.responseText);
console.log(resObj);
if(resObj.code){
alert('登录成功，欢迎回来'+resObj.username);
}else{
alert('登录失败');
}
}else{
console.log(xhr.statusText);
}
}
};
//构造formData
var formData = new FormData();
formData.append('uname',username);
formData.append('upass',password);
//基本设置
xhr.open('post', 'poddenglu.php', true);
xhr.send(formData);
};
</script>
</body>
</html>
PDO登录php:
<?php
$success=array('msg'=>'OK');
$username=$_POST['uname'];
$password=$_POST['upass'];
//
// $username='lily';
// $password='19';
class singletonPDO{
private static $pdo = null;
public static function getPdo (){
if(self::$pdo == null){
try {
self::$pdo = new PDO("mysql:host=localhost;dbname=studb","root","");
} catch (Exception $e) {
echo '出现错误:'.'<br/>';
echo $e->getMessage();
}
}
return self::$pdo;
}
}
$pdo = singletonPDO::getPdo();
$pdo->exec('set names utf8');
$sql="select * from stud where 1";
$pdoso=$pdo->prepare($sql);
$pdoso->execute();
$pdoso->bindColumn(1,$stuName);
$pdoso->bindColumn(2,$stuGender);
$pdoso->bindColumn(3,$stuAge);
$pdoso->bindColumn(4,$stuNumber);
$pdoso->bindColumn(5,$stuScroe);
// echo "<pre>";
$info=[];
for($i=0; $pdoso->fetch(PDO::FETCH_COLUMN);$i++){
$info[$i]=array($stuName, $stuGender, $stuAge, $stuNumber, $stuScroe);
}
$flag = 0;
for($j=0; $j<count($info); $j++){
if($info[$j][0] == $username){
if($info[$j][2] == $password){
$flag = 1;
break;
}
}
}
$success['code'] = $flag;
//ps
if($flag){
$success['username'] = $username;
}
echo json_encode($success);
?>
