理解：
- ajax是一种用于创建快速动态网页的技术，而不是一门语言。
- 使用ajax技术，可以与服务器进行少量的数据交换，使网页实现异步更新加载，不刷新页面。
- ajax可以用来检测用户是否已经注册。
- ajax相当于一个中转站，从服务器请求少量的信息，而不是整个页面。
ajax基本工作原理：
- ajax相当于是一个数据的中转站，一个专门运转并存在于在客户和服务器之间的一中间层。
- 异步请求不会阻塞客户端的操作，用户体验不需要等待，一种即刻开箱的视觉感受。
- 客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求。
ajax的好处：异步进行请求，局部刷新页面
ajax的get请求：页面的局部刷新功能
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<button id="btn" type="button">发送Ajax请求</button>
<div id="screen"></div>
<script type="text/javascript">
$('#btn').click(()=>{
$.get('doAction.php',{
'userName':'宋明元',
'age':21
},(data) => {
$('#screen').html(data);
})
})
</script>
</body>
</html>
doAction.php
<?php
var_dump($_GET);
echo '<hr/>';
echo '欢迎您! '.$_GET['userName'].' 同学...';
echo '<hr/>';
echo '年龄：'.$_GET['age'];
ajax的post请求：页面的局部刷新功能
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<button id="btn" type="button">发送Ajax请求</button>
<div id="screen"></div>
<script type="text/javascript">
$('#btn').click(()=>{
$.post('doAction.php',{
'title':'大唐明月',
'content': '月下柳梢头，人约黄昏后。'
},(data) => {
$('#screen').html(data);
})
})
</script>
</body>
</html>
doAction.php
<?php
var_dump($_POST);
echo '<hr/>';
echo '即将为你朗诵的是： '.$_POST['title'];
echo '<hr/>';
echo '内容：'.$_POST['content'];
全能型$.ajax()：发起post请求
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btn" type="button">发送Ajax请求</button>
<div id="screen"></div>
<script type="text/javascript">
$('#btn').click(()=>{
$.ajax({
'url':'doAction.php',
'data':{
'title':'地上霜',
'content': '床前明月霜'
},
'success':(res) => {
$('#screen').html(res)
},
'dataType':'html',
'type':'post'
})
})
</script>
</body>
</html>
doAction.php
<?php
var_dump($_POST);
echo '<hr/>';
echo '即将为你朗诵的是： '.$_POST['title'];
echo '<hr/>';
echo '内容：'.$_POST['content'];
网友评论