本地服务器软件的安装
安装一个软件：wampserver3.0.6_x64.exe
https://www.cr173.com/soft/259379.html
将路径设置好，默认安装在c盘，在安装路径中不允许出现中文
一直点击下一步，知道最后会弹出文件选项，选择你默认的打开的浏览器，一般选择Chrome
安装好之后，桌面上会出现这个图标
点击打开，右下角会出现这个后台服务
如果显示红色和黄色，则本地服务器有问题，路路径对，或者本地网络端口号和服务器端口号不匹配，显示绿色，本地服务器才可以使用，在本地网络中，可以用本地网络进行访问
（ps：如果需要外网也可以访问，则可以了解一下花生壳）
安装好软件之后，在安装目录下有一个叫www的目录，
里面如果有叫index.html的文件，则当本地访问该服务器是，默认显示index.html的网页。如果没有，则网络会直接访问该www的文件夹，
学习Ajax是需要用到网络访问数据，所以文件需要放到www这个文件夹中。
php基础
0.php文件的格式
<?php
//中间放内容
?>
1.php中有两种注释
1.1单行注释
//
1.2多行注释
/* */
2.如何定义变量?
$num = 10;
3.如何打印内容?
echo $num;
echo “
”; //换行
(注意点: 后端编写的代码不能直接运行, 只能放到服务器对应的文件夹下, 通过服务器运行
如何通过服务器运行: 通过ip地址找到服务器对应的文件夹, 然后再找到对应的文件运行)
如图所示
4.如何定义集合
4.1数组
a
r
r
=
a
r
r
a
y
(
1
,
3
,
5
)
;
p
r
i
n
t
r
(
arr = array(1, 3, 5); print_r(
arr=array(1,3,5);printr(arr);//打印集合的方法
echo “
”;
echo $arr[1];、、打印某个元素
4.2字典(对象)
d
i
c
t
=
a
r
r
a
y
(
"
n
a
m
e
"
=
>
"
N
i
c
k
"
,
"
a
g
e
"
=
>
"
19
"
)
;
p
r
i
n
t
r
(
dict = array("name"=>"Nick", "age"=>"19"); print_r(
dict=array("name"=>"Nick","age"=>"19");printr(dict);
echo “
”;
echo $dict[“name”];
5.分支循环语句
5.1.判断
a
g
e
=
17
;
i
f
(
age=17; if(
age=17;if(age >= 18){
echo “成年人”;
}else{
echo “未成年人”;
}
5.2.三目运算
r
e
s
=
(
res = (
res=(age >= 18) ? “成年人” : “未成年人”;
5.3 switch判断
switch ($age){
case -1:
echo “非人类”;
break;
case 18:
echo “成年人”;
break;
default:
echo “未成年人”;
break;
}
6.循环
a
r
r
=
a
r
r
a
y
(
1
,
3
,
5
)
;
f
o
r
(
arr = array(1, 3, 5); for(
arr=array(1,3,5);for(i = 0;
i
<
c
o
u
n
t
(
i < count(
i<count(arr); $i++){
echo
a
r
r
[
arr[
arr[i];
echo “
”;
}
i
n
d
e
x
=
0
;
w
h
i
l
e
(
index = 0; while (
index=0;while(index < count($arr)){
echo
a
r
r
[
arr[
arr[index];
echo “
”;
$index++;
}
jQuery中的Ajax
GET请求和POST请求的异同
相同点:
都是将数据提交到远程服务器
不同点:
1.提交数据存储的位置不同
GET请求会将数据放到URL后面
POST请求会将数据放到请求头中
2.提交数据大小限制不同
GET请求对数据有大小限制
POST请求对数据没有大小限制
上传文件
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-post-file</title>
</head>
<body>
<!--
注意: 服务端不支持中文，不然会乱码
1.上传文件一般使用POST提交
2.上传文件必须设置enctype="multipart/form-data"
3.上传的文件在PHP中可以通过$_FILES获取
4.PHP中文件默认会上传到一个临时目录, 接收完毕之后会自动删除
5.如果想要上传接收到某一个路径下，可以使用move_uploaded_file来将临时文件移动到永久文件夹中
-->
<!--
默认情况下服务器对上传文件的大小是有限制的, 如果想修改上传文件的限制可以修改php.ini文件
file_uploads = On ; 是否允许上传文件 On/Off 默认是On
upload_max_filesize = 2048M ; 上传文件的最大限制
post_max_size = 2048M ; 通过Post提交的最多数据
max_execution_time = 30000 ; 脚本最长的执行时间 单位为秒
max_input_time = 30000 ; 接收提交的数据的时间限制 单位为秒
memory_limit = 2048M ; 最大的内存消耗
-->
<form action="03-post-file.php" method="post" enctype="multipart/form-data">
<input type="file" name="upFile"><br>
<input type="submit" value="上传"><br>
</form>
</body>
</html>
php处理代码
<?php
// echo "post page";
// print_r($_POST);
// echo "<br>";
// print_r($_FILES);
// 1.获取上传文件对应的字典
$fileInfo = $_FILES["upFile"];
print_r($fileInfo);
echo "<br>";
// 2.获取上传文件的名称
$fileName = $fileInfo["name"];
// 3.获取上传文件保存的临时路径
$filePath = $fileInfo["tmp_name"];
echo $fileName;
echo "<br>";
echo $filePath;
// 4.移动文件(用点来拼接字符串)
move_uploaded_file($filePath, "./source/".$fileName);
?>
封装jQuery中的Ajax
1.创建一个异步对象
需要兼容浏览器
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.设置请求方式和请求地址
xmlhttp.open(method, url,async);
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
（注意：需要在url中加入一个时间戳，来进行实时更新）
3.发送请求
xmlhttp.send();
4.监听状态的变化
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
5.处理返回的结果（返回对象）
需要注意的地方：
1.在封装ajax时传入一个伪数组对象
2.如果有传入数据，需要将数据中的对象转化为数组的形式
3.在URL中是不可以出现中文的, 如果出现了中文需要转码，可以调用encodeURIComponent方法
4.需要区别发送的是get请求还是post请求
如果是get请求会将提交的数据拼接到URL后面
?userName=lnj&userPwd=123456
如果是post请求会将提交的数据放到请求头中
5.需要写一个方法来判断请求是否阐释
如果超时用xmlhttp.abort();来中断请求
具体封装代码如下
function obj2str(data) {
/*
{
"userName":"lnj",
"userPwd":"123456",
"t":"3712i9471329876498132"
}
*/
data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象,当前时间
data.t = new Date().getTime();
var res = [];
for(var key in data){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
function ajax(option) {//option是一个对象
// 0.将对象转换为字符串
var str = obj2str(option.data); // key=value&key=value;
// 1.创建一个异步对象
var xmlhttp, timer;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
/*
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
*/
if(option.type.toLowerCase() === "get"){
//str是一个时间戳
xmlhttp.open(option.type, option.url+"?"+str, true);
// 3.发送请求
xmlhttp.send();
}else{
xmlhttp.open(option.type, option.url,true);
// 注意点: 以下代码必须放到open和send之间
//如果是post请求会将提交的数据放到请求头中
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
if(xmlhttp.readyState === 4){
clearInterval(timer);
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
// console.log("接收到服务器返回的数据");
//返回xmlhttp这个异步对象，在执行函数时，可以用这个异步对象获取请求到的数据
option.success(xmlhttp);
}else{
// console.log("没有接收到服务器返回的数据");
option.error(xmlhttp);
}
}
}
// 判断外界是否传入了超时时间
if(option.timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, option.timeout);
}
}
xml基础
xml文件和html文件很像，格式有所区别，但主要都是用标签来写代码，区别就是html是展示页面的文件。而xml是储存数据的文件，xml属于后端。
xml文件样例：
<?xml version="1.0" encoding="UTF-8" ?>
<person>
<name>Nick</name>
<age>20</age>
</person>
如何实现用xml来数据交换呢
1.在html用ajax发送请求，请求路径为php文件
2.在php文件中输出为获取文件，获取的文件时xml文件
3.在xml文件边写相关的数据代码
代码实现如下
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-ajax-xml</title>
<script src="myAjax2.js"></script>
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
ajax({
type:"get",
url:"11-ajax-xml.php",
success: function (xhr) {
// console.log(xhr.responseXML);
// console.log(document);
var res = xhr.responseXML;
console.log(res.querySelector("name").innerHTML);
console.log(res.querySelector("age").innerHTML);
},
error: function (xhr) {
console.log(xhr.status);
}
})
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
2.php
<?php
// 执行结果中有中文, 必须在php文件顶部设置
//header("content-type:text/html; charset=utf-8");
// 如果PHP中需要返回XML数据, 也必须在PHP文件顶部设置
header("content-type:text/xml; charset=utf-8");
echo file_get_contents("info.xml");
3.xml
<?xml version="1.0" encoding="UTF-8" ?>
<person>
<name>Nick</name>
<age>20</age>
</person>
这样既可以实现xml文件的数据交换，可以获取xml中的数据实现网页更新
json基础
JSON是一种传递对象的语法，对象可以是name/value对，数组和其他对象。
通俗的来说json是一种数据格式，很像js中的伪数组，它每一个对象的值可以是一个新的对象
例如
{
"skillz": {
"web": [
{
"name": "html"，
"years": "5"
}，
{
"name": "css"，
"years": "3"
}
],
"database": [
{
"name": "sql"，
"years": "7"
}
]
}
}
如何实现用json来数据交换呢
1.在html用ajax发送请求，请求路径为php文件
2.在php文件中输出为获取文件，获取的文件时json文件
3.在json文件边写相关的数据代码
代码实现如下
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-ajax-json</title>
<script src="myAjax2.js"></script>
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
ajax({
type:"get",
url:"12-ajax-json.php",
success: function (xhr) {
// console.log(xhr.responseText);
var str = xhr.responseText;
/*
在低版本的IE中, 不可以使用原生的JSON.parse方法, 但是可以使用json2.js这个框架来兼容
*/
var obj = JSON.parse(str);
// console.log(obj);
console.log(obj.name);
console.log(obj.age);
},
error: function (xhr) {
console.log(xhr.status);
}
})
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
2.php
<?php
echo file_get_contents("12-ajax-json.txt");
3.json
{
"name":"Nick",
"age":"20"
}
这样既可以实现json文件的数据交换，可以获取json中的数据实现网页更新
3461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
