前端ajax异步请求,AJAX异步请求

javascript之AJAX

AJAX是什么？？

AJAX是一种用于创建快速动态网页的技术。

在后台与服务器进行少量大的数据交换，AJAX可以使网页实现异步更新。就是在不重新加载网页的情况下，对网页的某部分进行更新

传统的网页如果需要更新内容，必须重载整个网页面。

有很多使用AJAX的应用程序案例：百度地图，PHP中文网等等

POST请求数据的处理方式

一种是转换成PHP能处理的方式,在前端部分，我们都将请求数据，转换成JSON字符串，这样后端能够读取

示例

前端部分：

// 创建AJAX对象

var xhr = new XMLHttpRequest();

// 监听请求

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText);

}

}

// 初始化请求参数

xhr.open("POST","test1.php", true);

// 设置请求头，模拟表单类型数组进行发送，application/x-www-form-urlencoded默认

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

var user = {

email: "admin@php.cn",

password: "123456",

};

// 将JS对象转为JSON

var data = JSON .stringify(user);

// 发送请求

xhr.send(data);

后端部分：

// 获取前端的数据

$data=key($_POST);

// 将前端数据JSON解码

$user=json_decode($data);

print_r($user);

// 转换为数组，后端好处理

$user=json_decode($data,true);

print_r($user);

打印：

demo1.html:16 stdClass Object

(

[email] => admin@php_cn

[password] => 123456

)

Array

(

[email] => admin@php_cn

[password] => 123456

)

一种是通过file_get_contents("php://input")的方式访问，php://input 是个可以访问请求的原始数据的只读流

前端部分代码和上面一样

后端：

$data=file_get_contents('php://input');

echo $data;

// 将数据转换为PHP能够处理的类型

$user=json_decode($data);

print_r($user);

$user=json_decode($data,true);

print_r($user);

打印：

demo1.html:16 stdClass Object

(

[email] => admin@php_cn

[password] => 123456

)

Array

(

[email] => admin@php_cn

[password] => 123456

)

FromData与传统的请求头的区别

区别

可直接序列化表单数据

AJAX可直接识别，可以不用设置请求头

可用与表单数据与普通数据

案例

前端部分：

// 创建AJAX对象

varxhr=newXMLHttpRequest();

// 监听请求

xhr.onreadystatechange=function(){

if(xhr.readyState===4&&xhr.status===200){

console.log(xhr.responseText);

}

}

// 初始化请求参数

xhr.open("POST","test4.php",true);

// 设置请求头，模拟表单类型数组进行发送，如果是FormData，可以不用设置

// xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

// FormData

vardata=newFormData();

data.append("username","1");

data.append("password","1");

// 发送请求

xhr.send(data);

后端：

// 直接打印，不用处理，php能够识别

// 可以看到PHP已经识别到数组了

Array

(

[username]=>1

[password]=>1

)

打印：

demo4.html:16 {"status":1,"message":"\u9a8c\u8bc1\u901a\u8fc7"}

FormData实现用户登录与验证

前端部分

Fromdata请登录

action=""

method="POST"

style="display:grid;gap:15px;";

οnsubmit="returnfalse"

>

type="text"

name="username"

placeholder="exam@email.com"

required

autofocus

/>

提交

// 获取表单和按钮

var form = document.querySelector("form");

var btn = document.querySelector("form button");

// 给按钮绑定点击事件，进行AJAX请求

btn.onclick = function () {

// 1.创建AJAX对象

var xhr = new XMLHttpRequest();

// 2.监听请求

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText);

// 将json转为js对象

// var res = JSON.parse(xhr.responseText);

var res = JSON.parse(xhr.responseText);

console.log(res);

if (res.status > 0)

error = res.message;

else

error = "未知错误";

// 将提示信息显示到表单中

console.log(error);

var span = document.createElement("span");

span.innerHTML = error;

span.style.color = "red";

form.appendChild(span);

}

};

// 3.初始化请求参数

xhr.open("POST", "test4.php", true);

var data = new FormData(form);

data.append("login_time",new Date().getTime());

// 5.发送请求

xhr.send(data);

};

// 清除提示信息

var inputs = document.querySelectorAll("input");

for(var i = 0; i < inputs.length; i ++) {

inputs[i].oninput = function () {

if (btn.nextElementSibling !== null)

form.removeChild(btn.nextElementSibling);

}

}

后端部分：

$pdo=newPDO('mysql:host=localhost;dbname=message','1','123456');

$stmt=$pdo->prepare("SELECT COUNT(`id`) FROM `users` WHERE `account`=? AND `password` = ? LIMIT 1");

$stmt->execute([$_POST['username'],$_POST['password']]);

// print_r($stmt);

$user=$stmt->fetch(PDO::FETCH_NUM);

// print_r($user);

if($user[0]!=0)echo json_encode(['status'=>1,'message'=>'验证通过']);

elseecho json_encode(['status'=>0,'message'=>'邮箱密码错误']);

输出：

总结

AJAX请求数据有四步，请求数据有POST和GET。POST请求数据处理方式一共有两种，一种是通过POST本身获取，一种是通过文件流的方式。FormData用来发送数据有很大的优势，PHP能够直接处理，只需要new一个FormData对象。