PHP的介绍及应用,ajax的介绍及应用，跨域问题及jsonp解决方法

PHP（服务器编程语言）

服务器由环境（Apache），数据库（mysql），代码（HTML+css +js,php）组成。
PHP必须在服务器的环境下执行

php与js最大的区别就是工作环境，PHP：文件结构，PHP的执行需要在服务器下
浏览器没有解析PHP文件的功能，PHP文件被服务器执行后，显示在浏览器中

前端代码：
接收：浏览器暂代接收功能，以html的格式显示在浏览器中
发送：1.form表单自带的发送（临时使用），form表单中name的值作为字段名
2.ajax发送：发送数据的格式为：名字=值&名字=值；字段名=字段值
后端：
接收：三种方式：GET,_GET,GET,_POST,$_REQUEST,用来接收
发送：echo,pring_r（用于查看或者测试）,

php文件的注意点：
一.格式规则：
1.注释，支持#号
2.变量，必须以$开头
3.字符串拼接为：.
4.对象访问属性为：->
5.php没有打印语句，只有返回语句
6.在php中每行代码结束必须加分号
7.php的数据类型：字符，整型，浮点型，布尔，NULL，对象，数组，资源型
二：PHP解析：
因为浏览器不能解析php
php在服务器被解析，返回数据
服务器只能返回字符型数据 所以，在php中，返回的所有的数据类型，都会被转成字符
在PHP中有三种数组格式（PHP代码如下）：
索引数组

         $arr = array(23,56,"hello");echo $arr[0];echo $arr[1];echo $arr[2];echo "<br>";或：echo count($arr);echo "<br>";for($i=0;$i<count($arr);$i++){  //count($arr)指数组长度，这里没有length属性echo $arr[$i];echo "<br>";}

关联数组（用=>链接起来）：

$arr1 = array("name"=>"admin","age"=>17);
$arr2 = array("name"=>"root","age"=>18);
echo $arr;
print $arr;
print_r($arr);

对象：

     class Obj{var $name = "admin"; //**这里var用作对象的属性声明**function show(){echo "hello ".$this->name;}}$o = new Obj();// echo $o->name;// echo $o->show();echo json_encode($o);

将自己的数组或者对象转换成json，返回json格式数据
echo json_encode($arr);
接收一个关联数组，返回值就是json格式的数据
作用：就是将关联数组转换成json格式的数据

mysql的基本知识

在PHP中主要用到数据的增删改查
MySQL是一个开源的关系型数据库管理系统，管理关系型数据库。目前属于Oracle公司。
数据库：数据的仓库，在数据库中，以表格的形式存在，表格中，行是数据，记录，列是字段，一组相关的数据。
主键：是唯一的，一个数据表只能包含一个主键，可以用主键查询数据；
数据库没有高效的管理方式
mysql用来管理数据库，但是mysql也没有可视化界面。

php操作mysql存储数据：

登录mysql，连接mysql,选择数据库：

 $link = @new mysqli("localhost:3306","root","root","test1910");if($link->connect_error){echo $link->connect_error;}

mysql的操作命令：
增 INSERT stu (name,tel,cj) VALUES(‘admin’,‘1232132’,34.5);
改 UPDATE stu SET cj=67.5 WHERE id=1;
查 SELECT name,tel,cj FROM stu;
删 DELETE FROM stu WHERE id=3;

向mysql发送命令，根据命令执行不同的功能： $link->query(“mysql命令”);

具体的增删改查代码如下：
增：

 $str = "INSERT stu (name,tel,score) VALUES('李四','345',78.5)";$q = $link->query($str);if($q){echo "insert success";}else{echo "insert error";}

删：

 $str = "DELETE FROM stu WHERE id=6";$q = $link->query($str);if($q){echo "delete success";}else{echo "delete error";}

改：

 $str = "UPDATE stu SET name='王二' WHERE id=5";$q = $link->query($str);if($q){echo "update success";}else{echo "update error";}

查：资源型数据
提供了四种方法用来解析从mysql获取的数据
$q->fetch_array(); //关联数组+索引数组
$q->fetch_row(); //索引数组
$q->fetch_assoc(); //关联数组
$q->fetch_object(); //对象

     $str = "SELECT * FROM stu";$q = $link->query($str);if($q){// 每个fetch方法都是：每次执行只能拿到一条信息while(true){$arr = $q->fetch_array();print_r($arr);echo "<br>";if(!$arr){break;}}// 索引数组+关联数组while($arr = $q->fetch_array()){print_r($arr);echo "<br>";}//索引数组while($arr = $q->fetch_row()){print_r($arr);echo "<br>";}// 关联数组(常用)√while($arr = $q->fetch_assoc()){// print_r($arr);// echo $arr["cj"];echo json_encode($arr);echo "<br>";}//对象while($arr = $q->fetch_object()){print_r($arr);echo "<br>";}   }else{echo "select error";}

程序中的同步异步：
同步：按顺序依次执行（平时正常的语句代码都是同步的）
异步：同时执行（异步的事件有延时期，鼠标和键盘事件等）
线程(js单线程)
程序：一个功能；
进程：一个功能从开始执行到结束执行；
线程：一个功能从开始执行到结束执行期间，所经历的多个分支；
优点：多线程，速度更快，更消耗性能。
js是一个异步的单线程编程语言
单线程利用异步模拟的多线程执行

ajax的介绍

ajax：前后端交互的重要手段和桥梁，ajax不是一个技术，而是一组技术的组合；
ajax：异步的js和服务端的数据
优点：
1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
2.用户体验极佳（不刷新页面即可获取可更新的数据）；
3.提升 Web 程序的性能（在传递数据方面做到按需发送，不必整体提交）；
4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；
缺点：
1.不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）；
3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；

前后点连接的载体：XML（XMLHttpRequest）对象
交互的数据必须都得是字符

ajax的使用

注：在PHP中的json字符串不严谨遵守json字符串的规则时，可以用在前端用eval来解析json，
eval的功能：将字符作为js代码执行

         // 有XHR对象var xhr = new XMLHttpRequest();// 设置要请求的方式（get/post）和地址(这里推荐使用绝对地址)，true代表使用异步方式，xhr.open("get","http://localhost/1910-server/ajax/data/data.txt",true)    // 监听事件xhr.onreadystatechange = function(){// 载体自身的执行情况  xhr.readyState// 网络的状态  xhr.statusif(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.responseText)}else if(xhr.readyState == 4 && xhr.status != 200){console.log(xhr.status);}}// 发送xhr.send();

ajax的bug:1>undefined不能被for-in
解决方法：var data = data || {};
2>浏览器的缓存问题：每次打开一个新的页面或者地址，都会下载到浏览器的缓存中，为了提升下一次打开同一个页面的速度，
解决方法：欺骗浏览器缓存，在url后拼接时间戳

ajax 的get方法：

         function ajaxGet(url,callback,data){data = data || {};var str = "";for(var i in data){str +=`${i}=${data[i]}&`;}var d = new Date();url = url + "?" + str + "wxyt=" + d.getTime();var xhr = new XMLHttpRequest();xhr.open("get",url,true);xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){callback(xhr.responseText);}}xhr.send();}

ajax的post方法（post只能在send里面发送）：

         function ajaxPost(url,callback,data){data = data || {};var str = "";for(var i in data){str += `${i}=${data[i]}&`;}var xhr = new XMLHttpRequest();xhr.open("POST",url,true);xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){callback(xhr.responseText);}}//send会原样发送自己接收的数据，所以需要在发送之前设置需要发送数据的格式。格式：表单格式xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send(str);}

.php返回数据的格式

         if($u == $user && $p == $pass){echo '{"msg":"成功","statu":0,"userMsg":{}}';}else if($u == $user && $p != $pass){echo '{"msg":"密码错误","statu":1}';}else{echo '{"msg":"该用户名不存在","statu":2}';}

ajax的跨域问题及解决方法

在请求的资源上，没有访问控制允许源，因为当前发起请求的页面与要请求的资源不是一个服务器的标志，这就是所谓的跨域问题。
跨域：不同源。
同源：同服务，同地址，同端口
跨域情况下，请求是成功的，数据是可以拿到的，但是，浏览器单方面阻止，会报错

jsonp解决跨域问题：

jsonp解决跨域的原理：浏览器阻止的是ajax的跨域，但是没有阻止HTML标签请求外部资源的跨域。

         function jsonp(url,callback,data){// 解析要发送的数据data = data || {};var str = "";for(var i in data){str += `${i}=${data[i]}&`;}// 将数据拼接到urlurl = url + "?" + str.slice(0,str.length-1);// jsonp的功能：1.创建scriptvar script = document.createElement("script");script.src = url;document.body.appendChild(script);// jsonp的功能：2.创建准备被资源执行的全局函数window[data[data.columnName]] = function(res){callback(res);}}//传入得到data对象如下:{user:"admin",pass:123,    zxc:"ewqrwer213213213",// 根据后台指定的字段名，传入回调函数名，传给后台  columnName:"zxc"      // 用来保存后台接收的 回调函数名所在的字段名，传给自己的函数}

jsonp的应用：（模拟百度搜索框，根据搜索出现推荐内容，借助百度的接口实现，利用自己封装的ajax来实现）

             <script>class baiduSearch{constructor() {this.txt = document.getElementById("txt");this.list = document.getElementById("list");//百度的搜索下拉菜单数据接口this.url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";this.init();}//准备绑定事件init(){var that = this;this.txt.onkeyup = function(){//判断输入框是否为空if(this.value){//不为空请求数据that.val = this.value;//开启jsonp准备请求跨越数据that.load();}else{//输入框值为空，则提示内容为空that.list.innerHTML = "";}}}//开启jsonp请求跨越数据load(){var that = this;jsonp(this.url,function(res){//请求成功后，解析数据，准备渲染页面that.res = res.s;that.display();},{//准备发送数据wd:this.val,//百度要求搜索的关键字cb:"acdv",//百度要求的回调函数名columnName:"cb"//自己要求的回调函数名所在的字段名})}display(){//解析数据，拼接结构var str = "";for(var i=0;i<this.res.length;i++){str += `<li>${this.res[i]}</li>`}//填充页面this.list.innerHTML = str;}}new baiduSearch();</script>

后台跨域问题解决方法

将下面两条代码放进后端文件中即可：

header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

服务器代理解决跨域问题

服务器代理的原理：浏览器提出的跨域，浏览器运行在客户端
服务端有没有浏览器，自己搭建一个服务器，在这个服务器中请求跨域的资源
原本跨域的资源，被拿到自己搭建的服务器内
自己的前端文件，也放在自己的服务器
自己的前端文件，请求自己的服务器中的资源
就不存在跨域了