Ajax发送get/post请求的基本格式模板以及验证用户是否存在案例1.2.xhr.open('get','getDa

本文已参与「新人创作礼」活动，一起开启掘金创作之路

Ajax发送get/post请求主要分为以下4步：

1.创建对象

 var xhr = new XMLHttpRequest();

2.设置请求行

//（get请求数据写在url后面）open('method','url','async');
/*method:请求的类型：GET或POST
  * url:文件在服务器上的位置
  * async:true(异步)或false(同步),默认true
  * */
xhr.open('get','getData.php'，true);

3.设置请求头

 //（get请求可以省略，post不发数据也可以省略）
 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4.请求主体发送

//get请求为空，或者写null，post请求数据写在这里，如果没有数据，直接为空或者写null
 xhr.send(null);

为了方便理解，下面我贴一个验证用户是否存在的小案例：

前端部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>用户注册</h2>
    <input type="text"  placeholder="请输入用户名">
</body>
</html>
<script>
    //什么时候发送请求？onblur:失去焦点
    document.querySelector('input').onblur = function(){
   	 //1.创建对象
        var xhr = new XMLHttpRequest();
        //2.设置请求行
        xhr.open('get','checkName.php?name='+this.value);
        //3.设置请求头（此处用get请求可以省略）
        // xhr.setRequestHeader();
        	//这里是设置回调函数
        xhr.onload = function () {
            document.querySelector('h2').innerHTML = xhr.responseText;//呈现给用户看
        }
        //4.请求主体发送（get请求为空，或者写null）
        xhr.send(null);
    }
</script>

后端部分代码

<?php
//获取数据
$name = $_GET['name'];
//用数组模拟数据库
$nameArr = array('jack','rose','nike');
//在数据库中查询数据，in_array（要查询的数据名，在哪个数据库查询）
$result = in_array($name,$nameArr);
if($result == true){
    echo '很遗憾，已被使用';
}else{
    echo '恭喜你，可以使用';
}
?>

查询前
在这里插入图片描述
查询rose(数据库中存在)

查询Tom(数据库中不存在)