AJAX概念
导语:什么是同步,什么是异步
同步:当拨打电话的时候,张三拨通李四的电话,这时候如果王五也给李四打电话,那么李四只能挂断张三的电话,再去接通王五的电话,这就是同步;
异步:当拨打电话的时候,张三拨通李四的电话,这时候如果王五也给李四打电话,李四能在跟张三通话的同时还能跟王五通话,如果再有马六给李四打电话,李四照样可以接通,并且跟马六进行通话,这就是异步;
总结:异步就是做一件时的同时还能做另外一件事(两个人同时给你发短信都能接收到)
-
Asynchronous Javascript And XML(异步JavaScript和XML),
-
AJAX并不是一种语言,而是一种创建交互式网页应用的网页开发技术
-
AJAX是Javascript、HTML和CSS、DOM、XML和XSTL、XMLHttpRequest 等技术的组合
-
AJAX核心对象是XMLHttpRequest
同步和异步的特点
1)同步就是自上而下运行,必须上面运行有了结果在继续向下运行
2)异步运行不会考虑上一行代码运行结果,而是直接向下运行
3)异步需要配合回调函数获取内容
4)同步需要配合回调函数获取内容
思考问题?
-
什么是异步
-
什么是页面无刷新,进行局部更新
-
没有提交表单,谁发的请求
-
怎么显示请求过来的数据
-
前后交互的方式有哪些
前后端交互的方式有哪些:
-
form(表单提交)
-
标签访问(带有 href, src)
-
AJAX
AJAX工作原理
请求:ajax发请求,产生一个对象xmlhttpRequest对象;产生之后会产生ajax请求,产生之后替浏览器发送请求 应答:服务器返回数据 -> ajax引擎 -> 使用js处理数据 -> 放在页面对应位置
AJAX优缺点
-
AJAX异步处理的优点
-
减轻服务器的负担,AJAX一般只从服务器获取只需要的数据。
-
无刷新页面更新,减少用户等待时间。
-
更好的客户体验,可以将一些服务器的工作转移到客户端完成,节约网络资源,提高用户体验
-
无平台限制
-
促进显示与数据相分离
-
-
AJAX异步处理的缺点
-
页面中存在大量js,给搜索引擎带来困难
-
AJAX干掉了Back和History功能,即对浏览器机制的破坏
-
存在跨域问题 域名
-
只能传输及接收utf-8编码数据
-
PHP基础
安装xampp php环境的安装,使用xampp(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包。
查看百度百科解释
使用英文官网地址下载:https://www.apachefriends.org/index.html ajax实现的是前后端交互,所以需要对应的后端语言作为支撑
百度云盘下载地址:https://pan.baidu.com/s/1Vi6s89LNHPgD_C4ZjUMIbg 提取码:k6vw
安装:一直点next 安装phpstudy 官网:https://www.xp.cn/download.html
百度网盘下载地址:链接:https://pan.baidu.com/s/16qIuavTaHkrfetebilnx7A 提取码:w97y
phpstudy安装过程
直接下一步安装
安装成功之后,只需要启动apache和mysql
![[1280X1280 (8).PNG]]
![[2cc330fd-03e3-4d7e-92b4-e9b4f5f95ef4.png]]
phpstudy_pro\WWW 为项目根目录
![[fb85ea7c-526f-435c-925e-854fc17d1b4a.png]]
更改配置文件
D:\phpstudy_pro\Extensions\Apache2.4.39\conf\httpd.conf
Plain
控制面板 - apche - config - Apache(httpd.conf)
把313行的代码,更改为下面内容
DirectoryIndex XXX.html
![[6450a76b-5498-4fb7-8825-97804b757f33.png]]
访问服务器 http://127.0.0.1
Plain
列表的形式显示 htdocs 文件夹下的所有内容
PHP输出变量
- echo 输出一个或者多个字符串
PHP
echo "Hello, world!"."";
echo("你好");
- print() 输出一个字符串
PHP
print("郑州");
- printf() 格式化输出语句
PHP
$age = 18;
$weight = 77.5;
printf("你好....%d, 体重 = %f"."<br>", $age, $weight);
- 输出数组
PHP
print_r($age);
// 索引(index)数组
$week = array("周一", "周二", "web");
// 关联数组
$per = array("name"=>"张三", "age"=>18, "sex"=>"男");
print_r($week);
echo "";
print_r($per);
- var_dump(): 输出数组和基本变量, 并能够将变量的类型输出出来
PHP
echo "";
var_dump($week);
echo "";
var_dump($per);
echo "";
var_dump($age);
echo "";
var_dump($weight);
echo "";
echo "";
echo "";
echo "";
echo "";
变量的定义和输出
- 变量
1, 定义变量以$开头, 不用加 var 2, 变量名由数字, 字母, 下划线组成, 数字不能开头 3, 区分大小写 4, 见名知意
PHP
$age = 18;
$Age = 20;
echo $age."".$Age."";
$num;// 如果不赋初值结果是 NULL
var_dump($num);
echo "";
变量的赋值
PHP
// 1, 值赋值
$a = 3;
$b = 5;
$$c = $$a;
echo $a.",".$b.",".$c."";
$c = 100;
echo $a.",".$b.",".$c."";
// 2, 址赋值
$$d = &$$b;
echo $a.",".$b.",".$d."";// 3, 5, 5
$d = 100;
echo $a.",".$b.",".$d."";// 3, 5, 100
常量
常量定义语法:
-
define(参数一, 参数二, 参数三)
-
参数一: 常量的名字
-
参数二: 常量的值
-
参数三: 布尔值, 是否区分大小写. true 代表不分区, false 代表区分. 默认值 false(一般使用默认值)
函数
基础结构
PHP
function sum($a, $b) {
return $a + $b;
}
echo sum(3, 5);
定义函数, 交换两个变量的值
PHP
function changeNum(&$a, &$b) {
$temp = $a;
$a = $b;
$b = $temp;
echo $a.", ".$b;// 5, 3
}
$aNum = 3; $bNum = 5;
changeNum($aNum, $bNum);
echo $aNum.", ".$bNum;// 5, 3
php的外部引入文件
PHP
// include, require, include_once, require_once都可以引入外部 php 文件.
include 与 include_once 的区别:
通过 include_once 引入外部文件, 无论引入多少次, 结果都只会引入一次;
通过 include 多次引入外部 php 文件, 会将外部 php 文件中的内容复制多次到当前页面中, 会造成代码冗余.
require 与 require_once 的区别:
与上述 include 与 include_once 的区别 相同.
include 与 require 的区别:
当通过 require 引入的外部文件中内容报错或者文件路径出错, 会影响到当前页面代码的执行;
而通过 include 引入不会影响当前页面代码的执行.
接收传递过来的数据
PHP
// 获取前端post请求传递过来的数据
$user = $_POST["un"];
$pass = $_POST["ps"];
var_dump($pass); // 返回数据类型
if ($user == "123" && $pass == "123") {
echo "POST是咱的人";
} else {
echo "POST不是咱的人";
}
获取get/post传递过来的数据 html
HTML
<form action="3.getMsg.php" method="post" enctype="multipart/form-data" >
用户名:<input type="text" name='uname' />
密码:<input type="text" name='pwd'/>
</form>
接收多选框传递过来的数据 html - name值必须添加[],表示传递的是数组类型,将来php接收到的也是数组类型
HTML
<form action="3.getMsg.php" method="post" enctype="multipart/form-data" >
用户名:<input type="text" name='uname' />
密码:<input type="text" name='pwd'/>
爱好:
篮球:<input type="checkbox" name="hobby[]" value="lanqiu">
足球:<input type="checkbox" name="hobby[]" value="zq">
羽毛球:<input type="checkbox" name="hobby[]" value="ymq"><br/>
<input type="submit">
</form>
接收file传递过来的数据 html
HTML
<form action="3.getMsg.php" method="post" enctype="multipart/form-data" >
文件:<input type="file" name='files'>
<input type="submit">
</form>
使用json-server代替php
使用json-server创建一个服务器