ajax知识点

最新推荐文章于 2022-04-28 22:11:43 发布

w小猪头

最新推荐文章于 2022-04-28 22:11:43 发布

阅读量154

点赞数 1

分类专栏：复习

本文链接：https://blog.csdn.net/weixin_50690255/article/details/109707814

版权

复习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ajax

1，ajax介绍

ajax也是技术名词的缩写：
Asynchronous：异步的；
JavaScript：JavaScript语言
And：和、与
XNL：数据传输格式

客户端通过HTTP向服务器发送请求

2，ajax使用

ajax是为了实现在不刷新整个页面的情况下，局部的更新页面的数据
为了实现ajax，W3C组织要求所有浏览器都内置一个XMLHttpReauest对象，这个对象负责实现ajax功能

1）用户名验证

02ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<label for="">用户名</label>
<input type="text" id="username">
<span id="userinfo"></span>
</div>
<div>
<label for="">密码</label>
<input type="text" id="password">
</div>
<div>
<label for="">邮箱</label>
<input type="text" id="email">
</div>
<div>
<label for="">电话</label>
<input type="text" id="tell">
</div>
<input id="btn_save" type="button" value="注册">
<script>
var btn_save=document.querySelector('#btn_save')
btn_save.addEventListener('click',function(){
/*
1）分别获取用户键入的用户名、密码等信息
2）使用ajax的方式将这些信息发送到服务器端
3）根据服务器端返回的信息，决定客户端如何显示
*/
var username=document.querySelector('#username').value
var password=document.querySelector('#password').value
var email=document.querySelector('#email').value
var tell=document.querySelector('#tell').value
// 创建 xmlhttprequest 对象
var xhr=new XMLHttpRequest()
// 配置要请求的url地址和请求方式
xhr.open('get',`02ajax.php?
username=${username}&password=${password}&email=${email}&tell=${tell}`)
// 为 xhr 注册一个事件，这个事件会在客户端与服务器交互过程中不断被调用
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
document.querySelector('#userinfo').innerHTML=xhr.responseText
console.log(xhr.responseText);
}
}
// 发送请求
xhr.send()
})
</script>
</body>
</html>

02ajax.php

<?php
$username=$_GET['username'];
if($username=='onlifes'){
echo '用户名已经被占用';
}else{
echo '恭喜，用户名可以使用';
}

2、ajax请求

1）ajax发送get请求
基本语法如下：

html代码

document.querySelector('button').addEventLustener('click',function() {
	// 创建对象
	var xhr=new XMLHttpRequest()
	// 配置要请求的地址和请求方式
	xhr.open('get','03get.php')
	// 发送请求
	xhr.send()
})

php代码

<?php
echo 'hello';

总结：
send方法不调用，是不会发送网络请求的
php端使用echo方法向客户端返回数据

传递参数

ajax通过get方法发送请求的时候，参数需要写到请求地址的后面，以问好分隔，如果由多个参数，中间使用&分隔

xhr.open('get','03get.php?id=5&title=明天就要放假了')

php端通过$_GET的方式获取

<?php
echo $_GET['title'];

ajax获取服务端返回值

xhr.onreadystatechange = function(){
/*
readyState 属性的值等于4，表名一次完整的ajax交互完成。
xmlhttprequest 对象会自动的将服务器端返回的信息放到
responseText 属性中
*/
if(xhr.readyState==4) {
		console.log(xhr.responseText);
	}
}

总结：
onreadystatechange时间一定要写到send方法前面
readyState属性的值为4的时候才可以从responseText属性中拿到服务器的返回值
php通过echo方法向客户端返回数据，返回的数据只能是字符串类型

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>ajax 请求</button>
<script>
document.querySelector('button').addEventListener('click', function () {
// 创建对象
var xhr = new XMLHttpRequest()
// 配置要请求的地址和请求方式
xhr.open('get', '03get.php?id=5&title=明天就要放假了')
xhr.onreadystatechange = function () {
/*
readyState 属性的值等于4，表明依次完整的ajax交互完成，
xmlhttprequest 对象会自动的将服务器端返回的信息放到
responseText 属性中
*/
if(xhr.readyState==4){
console.log(xhr.responseText);
}
}
// 发送请求
xhr.send()
})
</script>
</body>

</html>

2)ajax发送post请求

ajax发送post请求，需要注意：

将open方法的第一个参数改为post
传递的参数不能放到地址的后面，而是放到send方法的参数中，格式与get请求一样
以post方法传递参数，一定要使用setRequestHeader方法设置请求
php端使用$_POST获取数据

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>ajax 请求</button>
<script>
document.querySelector('button').addEventListener('click', function () {
// 创建对象
var xhr = new XMLHttpRequest()
// 配置要请求的地址和请求方式
xhr.open('post', '04post.php')
xhr.onreadystatechange = function () {
/*
readyState 属性的值等于4，表明依次完整的ajax交互完成，
xmlhttprequest 对象会自动的将服务器端返回的信息放到
responseText 属性中
*/
if (xhr.readyState == 4) {
console.log(xhr.responseText);
}
}
//发送合适的请求头信息
xhr.setRequestHeader("Content-type", "application/x-www-formurlencoded");
// 发送请求
xhr.send('id=5&title=今天上一天班，太爽了')
})
</script>
</body>
</html>

php代码

<?php
ajax $_POST['id'];

3)ajax验证用户名

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<label for="">用户名</label>
<input type="text" id="username">
<span id="userinfo"></span>
</div>
<div>
<label for="">密码</label>
<input type="text" id="password">
</div>
<div>
<label for="">邮箱</label>
<input type="text" id="email">
</div>
<div>
<label for="">电话</label>
<input type="text" id="tell">
</div>
<input id="btn_save" type="button" value="注册">
<script>
document.querySelector('#username').addEventListener('blur', function ()
{
// 创建对象
var xhr = new XMLHttpRequest()
// 配置请求方式和请求地址
xhr.open('get', 'checkUser.php?user=' + this.value)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.responseText == 'ok') {
document.querySelector('#userinfo').innerHTML = '恭喜你，
可以使用'
document.querySelector('#userinfo').style.color='green'
} else {
document.querySelector('#userinfo').innerHTML = '用户名已
经被占用'
document.querySelector('#userinfo').style.color='red'
}
}
}
// 发送
xhr.send()
})
</script>
</body>
</html>

php代码

<?php
$username=$_GET['user'];
if($username=='onlifes'){
		echo 'no';
}else{
		echo 'ok';
}

4)form表单与ajax比较
相同点：
安全性都一样，都是发送的http协议。安全性与提交文件的业务处理有关，与提交方式无关。
两者都可以用于提交数据

不同：
ajax在提交、请求、接收时都是异步进行的，网页不需要刷新，只刷新页面局部，不关心也不影响其他部分的内容

ajax提交时，是在后台新建一个请求，而form确实放弃本页面，然后在请求。

ajax在提交、请求、接收时。整个过程都需要使用程序来对其进行数据处理。而form表单提交时根据表单结构自动完成，不需要代码，干预，用submit提交。

使用ajax可以将HTML代码与php代码分离开

3.登陆

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<label for="">用户名</label>
<input type="text" id="username">
</div>
<div>
<label for="">密码</label>
<input type="text" id="password">
</div>
<div>
<input id="btn_login" type="button" value="登录">
<span id="error"></span>
</div>
<script>
var btn_login = document.querySelector('#btn_login')
var error=document.querySelector('#error')
btn_login.addEventListener('click', function () {
// 获取用户输入的用户名和密码
var username=document.querySelector('#username').value
var password=document.querySelector('#password').value
/*
单击按钮时，向 server.php 发送一个 ajax 请求
将用户输入的用户名和密码发送给 server.php，server.php
再去数据库中进行验证，根据验证结果返回信息
*/
// 创建对象
var xhr=new XMLHttpRequest()
// 配置请求的地址和请求方式
// 参数传递使用键=值的方式，键的名称随意命名
xhr.open('get',`server.php?u=${username}&p=${password}`)
// 为 xhr 注册事件，服务器返回数据的时候此事件会执行，并能够拿到服务器
// 返回的数据
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.responseText=='ok'){
// 跳转到 home.html
window.location.href='home.html'
}else{
error.innerHTML='用户名或密码失败'
}
}
}
// 发送请求
xhr.send()
})
</script>
</body>
</html>

php代码

<?php
$username=$_GET['u'];
$password=$_GET['p'];
if($usename=='admin' && $password=='admin'){
		echo 'ok';
}else{
		echo 'no';
}

4.ajax实现英雄管理

1）创建表

create table heroes(
id int primary key auto_increment,
title varchar(50) not null,
job varchar(50) not null,
skill varchar(100) not null,
skin varchar(100) not null
)

2）搭建英雄列表页面静态样式

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./hero.css">
</head>
<body>
<div class="box">
<a href="#">添加英雄</a>
<table>
<thead>
<tr>
<th>英雄名称</th>
<th>英雄技能</th>
<th>英雄职业</th>
<th>英雄皮肤</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>妲己</td>
<td>眩晕</td>
<td>法师</td>
<td>大红袍</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

css

*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #999;
}
.box{
width: 1000px;
margin: 0 auto;
}
table{
margin-top: 20px;
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
text-align: center;
}
th,td{
border: 1px solid #ccc;
padding: 10px;
}

3）实现展现英雄列表

修改herolist html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./hero.css">
</head>
<body>
<div class="box">
<a href="#">添加英雄</a>
<table>
<thead>
<tr>
<th>英雄名称</th>
<th>英雄技能</th>
<th>英雄职业</th>
<th>英雄皮肤</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>妲己</td>
<td>眩晕</td>
<td>法师</td>
<td>大红袍</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr> -->
</tbody>
</table>
</div>
<script>
loadHeroes()
// 获取所有英雄信息并展示到页面上
function loadHeroes() {
/*
1、页面加载时，发送一个 ajax 请求，以 get 方式请求 herolist.php
2、herolist.php 连接数据库，查询 heroes 表中的数据，返回一个关联数组
3、将关联数组转换为 json 字符串，作为返回值
4、html 拿到返回值，循环渲染到表格中
*/
// 创建 ajax 对象
var xhr = new XMLHttpRequest()
// 配置请求方式和地址
xhr.open('get', 'herolist.php')
// 注册事件
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(xhr.responseText);
var data = JSON.parse(xhr.responseText)
data.forEach(function (ele, index) {
console.log(ele);
var tr = document.createElement('tr')
tr.innerHTML = `
<td>${ele.title}</td>
<td>${ele.skill}</td>
<td>${ele.job}</td>
<td>${ele.skin}</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
`
document.querySelector('tbody').appendChild(tr)
})
}
}
// 发送请求
xhr.send()
}
</script>
</body>
</html>

创建herolist.php

<?php
// 不同语言之间，只有一种共同都认识的数据类型，就是字符串
// json_encode 方法将一个关联数组转化为json格式字符串
//创建连接
$link=mysqli_connect('localhost','root','root','tencent')or die('连接失败')；
// 设置编码
mysqli_set_charset($link,'utf8');
// 拼写sql语句
$sql="select * from heroes";
// 查询
$res=mysqli_query($link,$sql);
if($res!=false){
/*将查询到的数据中的每1行数据转换为一个关联数组（将字段名称作为键，将对应的字段的值作为
值），
放到一个大数组中*/
$heroes=mysqli_fetch_all($res,MYSQLI_ASSOC);
// echo '<pre>';
// print_r($heroes);
// echo '</pre>';
echo json_encode($heroes);
}