012 Javascript(126 - 133)
[A] 服务器入门与安装
服务器知识
1. 软件架构：
C/S(客户端->服务端)
B/S(浏览器->服务端)
2. 哪些技术可以开发网站？
php, jsp, asp, ruby, python, nodejs, c/c++等
3. WAMP架构解读
windows + apache + mysql + php
LAMP架构解读
Linux + apache + mysql + php
Linux + nginx + mysql + php
PHPnow
apache + mysql + php
服务器：
apache软件运行在你的电脑上，那么你电脑上的某个磁盘就对外可见，别人可以通过IP或域名访问到这个位置
客户端和服务端是一个相对概念：
服务端 资源提供方
客户端 资源受益方
服务器安装：
(集成安装环境)WAMP, LAMP, PHPnow
PHPnow/htdocs 服务器根目录
localhost+路径 直接访问本地电脑服务器
IP 访问当前电脑的服务器,即：127.0.0.1
默认访问到的是文件名以index开头的文件
index.php
index.html
index.jsp
[B] PHP语法
1. php的输出函数：
1. echo 输出内容
或 echo(输出内容)
2. print_r(输出内容)
3. var_dump(输出内容) 同时输出所输出内容的数据类型，长度和内容等信息。
【注】PHP代码兼容html和CSS的所有代码，如果输出内容中有标签，则会直接解析掉
2. 前后端技术分离开发：
前段开发工程师：html + css + javascript 即网站上我们能看到的部分
后端开发工程师：php + mysql
全站开发工程师：前段，后端，网页端，移动端全都会的工程师
3. PHP变量的定义：
1. 变量$f符号开头，后面跟着变量的名称
2. 变量名必须以字母或者下划线开头
3. 变量名只能包含字母，数字，字符以及下划线(a-z,A-Z,0-9,_)
4. 变量名是区分大小写的
【注】PHP是弱引用类型，给变量赋值什么数据，就是什么数据类型。
4. 字符串拼接：
用.进行拼接，而不是+号
5. 数据类型
String 字符串
Integer 整型
Float 浮点型
Boolean 布尔值
Array 数组
Object 对象
NULL 空值
6. 分支语句
a. if..else语句
if(判断条件){
语句块1;
}else{
语句块2;
}
b. switch...case语句
switch(值){
case 值1：
语句1;
break;
case 值2：
语句2;
break;
...
default:
语句n;
break;
}
c. for语句
for($i = 0; $i < 100; $i++){
语句块;
}
6. 数组
索引数组：下标是数字的叫做索引数组
关联数组：下标是字符的叫做关联数组
全局数组：系统定义的全局数组
$_GET 接收通过get提交过来的数据
$_POST 接收通过post提交过来的数据
多维数组：右索引数组和关联数组相互组合形成的数组
数组定义与索引
$arr = array("张三","李四","王五"); //定义数组
$a = $arr[0]; //通过下标索引
//循环索引
for($i = 0; $i < count($arr); $i++){
echo($arr[$i]."\n");
}
获取数组长度
count($arr)
7. 关联数组，也叫键-值数组
$arr = array("王五" => "打鱼的","赵四" => "打柴的","王琦" => "打虾的");
echo($arr["王五"]); //通过字符索引
//循环索引
foreach($arr1 as $ke => $valu){
echo("下标是：{$ke}，值是：{$valu} \n");
}
8. 二维数组，即数组元素为数组的数组叫做二维数组，外层是索引数组，内层是关联数组。
// 二维数组
$arr2 = array(
array("name" => "小白", "English" => 60, "math" => 90),
array("name" => "小红", "English" => 97, "math" => 80),
array("name" => "小白", "English" => 88, "math" => 89),
);
echo($arr2[0]["name"]); //索引
9. 数组函数
array_keys() //返回数组中所有的键名
array_pop() //删除数组中的最后一个元素，即出栈
array_push() //将一个或者多个元素从数组的末尾插入，即入栈
array_rand() //从数组中随机选出一个或者多个元素，返回键名
array_shift() //删除数组中的第一个元素，并返回所删除的值
count() //返回数组的长度
in_array() //检查数组中是否存在指定的元素
[C] 认识Ajax
AJAX 是Asynchronous JavaScript and XML(异步JavaScript和XML)，节省用户操作时间，提高用户体验，减少数据请求，传输获取数据
【注】ajax是前后端数据交互的搬运工，都可以异步进行
XML数据传输格式(大型的用户网站：新浪，网易，凤凰网)
优点：
1. 种类丰富
2.传输量非常大
缺点：
1. 解析麻烦
2. 不太适合轻量级数据
json数据传输格式(字符串)，95%移动端应用
优点：
1. 适合轻量级数据
2. 解析比较轻松
缺点：
1. 数据种类少
2. 传输数据量比较少
AJAX语法
ajax实现步骤：
1. 创建ajax对象
2. 调用open，相当于输入网址
3. 调用时send，相当于按下enter键
4. 等待数据响应
1. 在IE8以下，不兼容XMLHttpRequest
在IE8以下声明AJAX的方法是：
ActiveXObject("Microsoft.XMLHTTP");
try{
尝试代码块;
throw new Error("提示信息！！") 主动报错，调试时经常用
}catch(error){
error 错误对象，try括号中执行代码的异常信息;
补救代码块;
}
执行过程：
a. 先去执行try中的代码
b. try中的代码执行成功，则不再执行catch中的代码
c. try中的代码执行不成功，再执行catch中的代码进行补救
2. onreadystatechange事件
每当 readyState 改变时，就会触发 onreadystatechange 事件
readyState属性：请求状态
0 (初始化)请求未初始化，即还没有调用open
1 (载入中)服务器连接已建立，已发送send()方法
2 (已载入)请求已接收，即已完成send()方法，收到全部的响应内容
3 (解析中)请求处理中，正在解析内容
4 (已完成)请求已完成，可以再客户端调用了。
状态码 state：当前网络的请求状态
200: "OK"
404: 未找到页面
【注】当 readyState 等于 4 且状态为 200 时，表示响应已就绪
3. 调用open，相当于输入网址
xhr.open("get", "data.txt", true);
第一个参数：请求方式 get post
第二个参数：URL
第三个参数：是否异步
true 异步
false 同步
示例代码：
// 1.创建ajax对象 var xhr = new XMLHttpRequest(); // 2. 调用open，相当于输入网址 xhr.open("get", "004ajax_get.php?name=jack&age=218&sex=man", true); // 3. 调用时send，相当于按下enter键 xhr.send(); // 4. 等待数据响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ // alert(xhr.status); alert(xhr.responseText); } } }
[E] ajax的get请求和post请求 表单提交
action: 点击submit后需要提交到的url
method：请求方式，get和post
get(默认方式)
http://192.168.137.1/054post_php.php?username=xxx&age=18&password=123abc
提交方式：是直接将数据拼接在url后面进行提交，通过?进行拼接，查询字符串
好处：简单
缺点：
1. 不安全
2. 最大2KB
3. 没法实现上传
post
提交方式：post提交通过浏览器内部进行提交
好处：
1. 安全
2. 理论上没有上限
3. 可以上传
缺点：比get复杂
//请求的html文件 <body> <!-- 10.36.27.37 action: 点击submit后需要提交到的url method：请求方式 1. 将该html文件保存在服务器路径下， 2. 运行该html文件，并将浏览器地址修改为： localhost/005get_receive.php 或 192.168.137.1/005get_receive.php --> <form action="005get_receive.php" method="GET"> <input type="text" name="username" placeholder="用户名"> <input type="text" name="age" placeholder="年龄"> <input type="password" name="password" placeholder="密码"> <input type="submit"> </form> </body> // 响应的php文件 <?php header('content-type:text/html;charset="utf-8"'); /* $_GET: 存放通过get请求提交的所有数据 1. 将该php文件存放在服务器环境下即可 */ $name = $_GET["username"]; $ag = $_GET["age"]; $pwd = $_GET["password"]; echo("你的名字是：{$name}，年龄是：{$ag}，密码是：{$pwd}"); ?>
- post请求实现
// post请求的html文件 <body> <!-- action: 点击submit后需要提交到的url method：请求方式，get和post 1. 将该html文件存放在服务器环境下 2. 运行该html文件，并将浏览器地址修改为： localhost/006get_receive.php 或 192.168.137.1/006get_receive.php --> <form action="006post_receive.php" method="POST" enctype="application/x-www-form-urlencoded">
<input type="text" name="username" placeholder="用户名"> <input type="text" name="age" placeholder="年龄"> <input type="password" name="password" placeholder="密码"> <input type="submit"> </form> </body> // post响应的php文件 <?php header('content-type:text/html;charset="utf-8"'); /* $_GET: 存放通过get请求提交的所有数据 $_POST: 存放通过post请求提交的所有数据 1. 将该php文件放在服务器环境下即可 */ $name = $_POST["username"]; $ag = $_POST["age"]; $pwd = $_POST["password"]; echo("你的名字是：{$name}，年龄是：{$ag}，密码是：{$pwd}"); ?>
[F] ajax函数封装
// ajax函数封装 function $ajax({method = "get", url, data, success, error}){ // 1.创建ajax对象 var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // 若对象格式的数据存在，则进行转换 if(data){ data = quaryString(data); } // 2. 调用open，相当于输入网址 if(method == "get" && data){ url = url + "?" + data; } xhr.open(method, url, true); // 3. 调用时send，相当于按下enter键 if(method == "get"){ xhr.send(); }else{ // post请求时，必须在send方法调用前，去设置请求数据的格式 xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); xhr.send(data); } // 4. 等待数据响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ /* 在响应成功后继续操作 用到回调函数 */ if(success){ success(xhr.responseText); } alert(xhr.responseText); }else{ if(error){ error("Error:" + xhr.responseText); } } } } } function quaryString(obj){ var res = ""; for(var arr in obj){ res = res + arr + "=" + obj[arr] + "&"; } return res.substring(0, res.length-1); }
