php 当前域名（web前端ajax笔记之二）|快速备案

学习大纲主要以高级应用为主一、Ajax跨域请求1.什么是跨域所谓跨域就是不同域名之间的数据访问，非当前域名数据请求。跨域的问题：不可以获取数据再ajax中的体现是：假如：你有网站a，当你再a站使用ajax请求网站b的地址的时候就会出现跨域数据请求的问题。那么什么时候我们算跨域呢？URL说明是否跨域http://www.a.com/1.phphttp://www.a.com/2.php同一域名下不同文件的访问否http://www.a.com/a/1.phphttp://www.a.com/b/2.php同一域名下不同目录的文件访问否http://www.a.com/1.phphttp://www.a.com:80/1.php同一域名下不同端口的文件访问是http://www.a.com/1.phphttps://www.a.com/1.php同一域名下，不同协议之间的访问是http://www.a.com/1.phphttp://127.0.0.1/1.php域名和对应域名IP是http://www.a.com/1.phphttp://oa.a.com/1.php同一个主域名和从域名之间是http://www.a.com/1.phphttp://www.b.com/2.php不同域名之间是2.CORS跨域解决1.1概念CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS目前所有浏览器都支持该功能，IE浏览器不能低于IE10如果跨域就会出现1.2代码允许所有域名访问再服务器端代码返回的请求头中增加Header(‘Access-Control-Allow-Origin:*’); //*代码所有域名实现效果只需要再PHP的响应最开始增加一个头输出1.3允许单个域名访问使用格式Header(‘Access-Control-Allow-Origin:指定网址’);http://www.teach.comheader('Access-Control-Allow-Origin:http://www.teach.com');说明：使用好处安全性高脚下留心：必须要加上http://1.4允许多个域名访问再PHP中获取服务器信息我们可以使用$_SERVE这个全局变量其中有个HTTP_ORIGIN 的参数就是用来获取请求用户来源的域名地址我们可以这样子来写代码【PHP代码】$url = $_SERVER['HTTP_ORIGIN'];
$origin='';
$allowUrl = array('http://www.teach.com','http://www.php8.com');
if(in_array($url,$allowUrl)){
$origin = $url;
}
Header('Access-Control-Allow-Origin:'.$origin);
$user = array('admin','xiaoming','xiaohong','xiaoqiang');
//获取传递的参数
$username = $_GET['username'];
//判断用户是否存在在数组中
if(in_array($username,$user)){
echo '不可用';
}else{
echo '可用';
}3.JSONP跨域解决1.1什么是JSONPJSON(JavaScript Object Notation)是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取（注意：仅支持GET形式）1.2实现跨域<script>
function callback(data){
// console.log(data);
alert(data.name);
}
</script>
<body>
<input type="button" value="点我" id="btn1">

</body>
<script type="text/javascript">
var obj = document.getElementById('btn1');
obj.onclick = function(){
var scriptObj = document.createElement('script');
scriptObj.src="http://www.php8.com/2.php";
document.body.appendChild(scriptObj);
}
</script>
<!–<script type="text/javascript" src="http://www.php8.com/2.php"></script>–>【PHP代码】<?php
$array = array('name'=>'xiaoming','age'=>18);
$json_str = json_encode($array);
echo "callback($json_str)";二、自定义AJAX框架重复使用到的代码有那些呢？根据属性ID获取节点对象document.getElementById();就是ajax 的整个发送请求的过程1.自定义获取节点document.getElementById();封装成函数Function $(id){Return document.getElementById(id);}2.自定义异步请求/*
* 同步请求方法
* @param string id 文档ID名称
*/
function $(id){
return document.getElementById(id);
}
/*
* 封装ajax请求
*@param string url 请求地址
*@param string postData 发送参数
*@param function fun 回调函数
*/
function ajax(url,postData,fun){
//创建ajax对象
var XHRObj = new XMLHttpRequest();
//创建请求头，设置请求发送的地址和类型，并且将参数传递给服务端
XHRObj.open('post',url);
//获取服务器端返回的数据
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
fun(XHRObj.responseText);

}
}
//设置数据编码格式,使用URL编码格式
XHRObj.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//发送请求
XHRObj.send(postData);
}【调用案例】<script type="text/javascript">
//按钮绑定事件，给input增加ID属性
// var checkObj = document.getElementById('check');
$('check').onclick = function(){
var username = $('username').value;
ajax('check.php','username='+username,function(obj){
alert(obj);
});

}

</script>三、地区三级联动1.概述在我们购买商品填写商品邮寄地址的时候会出现地区的选择，省、市、区。包括我们再一些社交网站的时候，更新个人资料例如：出生地址，居住地址等以上案例我们应该如何实现呢？我们再学习ajax的时候已经知道了数据格式，可以使用json 可以使用xml在实际工作项目中，一般将地理位置信息保存到数据库中从数据库中读取是最普遍的。准备数据库db_php9CREATE TABLE `location` (`id` int(11) NOT NULL COMMENT '主键标识',`name` varchar(40) NOT NULL DEFAULT '' COMMENT '城市名称',`pid` int(11) NOT NULL DEFAULT '0' COMMENT '所属父级',PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='地区表\n@author liumeng';一个无限级分类表2.显示省份数据1.1思路1.打开网页发送ajax请求获取省份数据2.服务器端链接数据库，并且从数据库中获取省份数据3.将数据转换成json数据返回给客户端4.客户端处理接受到的json数据，展示出来1.2JS代码使用封装好的js<!–引入封装的ajax方法–>
<script type=text/javascript src="../ajax.js"></script>
<script type="text/javascript">
//获取省级别的数据
ajax('/ajax/location.php','pid=0',function(data){

//将省的数据遍历出来写入到select 里面去
$str = '<option value="-1">请选择</option>';
//循环遍历省份数据
for(i=0;i<data.length;i++){
$str += '<option value="'+data[i].id+'">'+data[i].name+'</option>';

}
//将便利的数据放到容器中去
$('sheng').innerHTML = $str;

});
</script>1.3PHP代码<?php
header('content-type:text/html;charset=utf-8');
//数据库链接方式有我们使用PDO链接方式
//1.设置数据源
$dsn = 'mysql:dbname=db_php9;host=localhost';
//2.数据库链接用户名和密码
$username = 'root';
$pwd ='';
//实例化PDO类
$pdo = new PDO($dsn,$username,$pwd);
//设置编码格式
$pdo->query('set names utf8');
//查询省份的sql 语句
$sql = 'select * from location where pid=0';
//执行查询语句
$res = $pdo->query($sql);
//返回字段结果集 PDO::FETCH_ASSOC
$datas = $res->fetchAll(PDO::FETCH_ASSOC);
//将结果转换成json数据返回给客户端
echo json_encode($datas);最终运行结果3.显示城市数据1.1思路1.给省份绑定change 事件2.ajax传递参数id,3.服务器端根据前端传递过来的id获取省份的下级城市数据4.将服务器端返回的城市的数据展示到前段1.2JS代码<script type="text/javascript">//获取省级别的数据ajax('/ajax/location.php','pid=0',function(data){//将省的数据遍历出来写入到select 里面去$str = '<option value="-1">请选择</option>';//循环遍历省份数据for(i=0;i<data.length;i++){$str += '<option value="'+data[i].id+'">'+data[i].name+'</option>';}//将便利的数据放到容器中去$('sheng').innerHTML = $str;});//省份绑定change事件$('sheng').onchange = function(){//获取当前选中的省份的IDid = this.value;ajax('/ajax/location.php','pid='+id,function(data){//将省的数据遍历出来写入到select 里面去$str = '<option value="-1">请选择</option>';//循环遍历省份数据for(i=0;i<data.length;i++){$str += '<option value="'+data[i].id+'">'+data[i].name+'</option>';}//将便利的数据放到容器中去$('shi').innerHTML = $str;});}</script>1.3PHP代码4.显示地区数据1.1思路1.给省份绑定change 事件2.ajax传递参数id,3.服务器端根据前端传递过来的id获取省份的下级城市数据4.将服务器端返回的城市的数据展示到前段1.2JS代码<script type="text/javascript">
//获取省级别的数据
ajax('/ajax/location.php','pid=0',function(data){

}
//将便利的数据放到容器中去
$('sheng').innerHTML = $str;

});
//省份绑定change事件
$('sheng').onchange = function(){
//获取当前选中的省份的ID
id = this.value;
ajax('/ajax/location.php','pid='+id,function(data){

}
//将便利的数据放到容器中去
$('shi').innerHTML = $str;
//选择省的时候要清空区的数据
$('qu').innerHTML = '<option value="-1">请选择</option>';
});
}
//市级绑定change事件
$('shi').onchange = function(){
//获取当前选中的省份的ID
id = this.value;
ajax('/ajax/location.php','pid='+id,function(data){

}
//将便利的数据放到容器中去
$('qu').innerHTML = $str;
});
}
</script>1.3PHP代码因为我们用的是无级分类不需要考虑了。四、分页1.需求AJAX的分页思想就是：将跳转链接的href方法换成，使用js动态方法，异步获取数据2.完成面向过程分页<?php
//1.设置数据源
$dsn = 'mysql:dbname=db_php9;host=localhost';
//2.数据库链接用户名和密码
$username = 'root';
$pwd ='';
//实例化PDO类
$pdo = new PDO($dsn,$username,$pwd);
//设置编码格式
$pdo->query('set names utf8');
//获取传过来的页数
$pageno = isset($_GET['page'])?intval($_GET['page']):1;
//初始化每页显示个数
$pageSize = 4;
//定位起始位置
$page = $pageSize*($pageno-1) ;
//分页sql语句
$sql = "select * from page limit $page,$pageSize";
//执行sql语句
$res = $pdo->query($sql);
//分页页码展示
//下一页为了不超出页码我们要使用总页数/每页显示个数 = 一共有多少页
$sql2 = "select count(*) from page";
$res2 = $pdo->query($sql2);
$countData = $res2->fetch();
$counts = $countData['count(*)'];
//四舍五入取整数
$totalPage = ceil($counts/$pageSize);
//上一页
$prev = $pageno>1 ? $pageno -1 : $pageno;
$next = $totalPage>$pageno ? $pageno +1:$totalPage;
//获取数据
$datas = $res->fetchAll(PDO::FETCH_ASSOC);
//设置页码
$str = '<table border="1">
<tr>
<td>新闻标题</td>
<td>新闻内容</td>

</tr>';
foreach ($datas as $val){
$str.='<tr>
<td>'.$val['title'].'</td>
<td>'.$val['content'].'</td>

</tr>';
}

$str.='<tr>
<td colspan="2">
<span>总页数10</span>
<span><a href="?page='.$prev.'">上一页</a></span>
<span><a href="?page='.$next.'">下一页</a></span>
</td>';
$str.='</tr></table>';
echo $str;3.异步获取第一页数据1.HTML代码<script type="text/javascript" src="../ajax.js"></script>
<body>
<h1>AJAX-无刷新分页</h1>
<table id='content' border="1">

</table>

</body>
<script type="text/javascript">
ajax('page_ajax.php','page=1',function(data){

$('content').innerHTML = data.html;
});

</script>2.PHP代码将不是ajax的分页转换即可4.完成分页功能本质就是替换href标签使用javascript<?php
//1.设置数据源
$dsn = 'mysql:dbname=db_php9;host=localhost';
//2.数据库链接用户名和密码
$username = 'root';
$pwd ='';
//实例化PDO类
$pdo = new PDO($dsn,$username,$pwd);
//设置编码格式
$pdo->query('set names utf8');
//获取传过来的页数
$pageno = isset($_POST['page'])?intval($_POST['page']):1;
//初始化每页显示个数
$pageSize = 4;
//定位起始位置
$page = $pageSize*($pageno-1) ;
//分页sql语句
$sql = "select * from page limit $page,$pageSize";
//执行sql语句
$res = $pdo->query($sql);
//分页页码展示
//下一页为了不超出页码我们要使用总页数/每页显示个数 = 一共有多少页
$sql2 = "select count(*) from page";
$res2 = $pdo->query($sql2);
$countData = $res2->fetch();
$counts = $countData['count(*)'];
//四舍五入取整数
$totalPage = ceil($counts/$pageSize);
//上一页
$prev = $pageno>1 ? $pageno -1 : $pageno;
$next = $totalPage>$pageno ? $pageno +1:$totalPage;
//获取数据
$datas = $res->fetchAll(PDO::FETCH_ASSOC);
//设置页码
$str = '
<tr>
<td>新闻标题</td>
<td>新闻内容</td>

</tr>';
foreach ($datas as $val){
$str.='<tr>
<td>'.$val['title'].'</td>
<td>'.$val['content'].'</td>

</tr>';
}
$str.='<tr>
<td colspan="2">
<span>总页数10</span>
<span><a href="javascript:goPage('.$prev.');">上一页</a></span>
<span><a href="javascript:goPage('.$next.');">下一页</a></span>
</td>';
$str.='</tr>';
echo json_encode(array('html'=>$str));<script type="text/javascript" src="../ajax.js"></script>
<body>
<h1>AJAX-无刷新分页</h1>
<table id='content' border="1">

</table>

</body>
<script type="text/javascript">
ajax('page_ajax.php','page=1',function(data){

$('content').innerHTML = data.html;
});
//获取数据函数
function goPage(page){
ajax('page_ajax.php','page='+page,function(data){

$('content').innerHTML = data.html;
});
}
</script>五、无刷新表单信息提交1.收集表单信息再前面我们学习ajax进行post传值，我们需要获取所有的值然后组合成字符串，发送数据请求。1.1HTML代码<script type="text/javascript">

//ajax 提交所有数据
//增加点击事件
document.getElementById('btn1').onclick = function(){
//获取所有元素
var XHR = new XMLHttpRequest();

XHR.onreadystatechange = function(){
if(XHR.readyState == 4 && XHR.status == 200){
console.log(XHR.responseText);

}
}
XHR.open('post','form.php');
//使用formData
var formdata = new FormData(document.getElementById('reg_form'));
//设置请求头,不需要设置请求头部
// XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XHR.send(formdata);

}

</script>1.2PHP代码<?phpvar_dump($_POST);exit;脚下留心：1.FormData 是HTML5 的新技术，再主流的浏览器都可以正常使用2.不需要设置请求头3.表单Input 必须要有name属性，不然不会提交2.无刷新上传附件【FromData】1.1HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>AJAX-表单提交</title>
</head>
<body>
<form action="" id="reg_form" method="post">
<table border="1">
<tr>
<td align='center' colspan="2">注册</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id=""></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="pwd" id=""></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="text" name="pwd2" id=""></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" name="phone" id=""></td>
</tr>
<tr>
<td>邮件</td>
<td><input type="text" name="email" id=""></td>
</tr>
<tr>
<td>头像</td>
<td><input type="file" name="img"></td>
</tr>
<tr>
<td align="center" id="btn1" colspan="2"><input type="button" value="提交"></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">

//ajax 提交所有数据
//增加点击事件
document.getElementById('btn1').onclick = function(){
//获取所有元素
var XHR = new XMLHttpRequest();

XHR.onreadystatechange = function(){
if(XHR.readyState == 4 && XHR.status == 200){
console.log(XHR.responseText);

}

</script>
</html>1.2PHP代码<?php
//var_dump($_POST);exit;
//附件上传
var_dump($_FILES);
/*
打印出来的结果说明已经给我们传递过来了
array (size=1)
'img' =>
array (size=5)
'name' => string 'timg.jpg' (length=8)
'type' => string 'image/jpeg' (length=10)
'tmp_name' => string 'C:\wamp64\tmp\php4332.tmp' (length=25)
'error' => int 0
'size' => int 33024
*/
if($_FILES['img']['name']){

//上传文件
//使用php move_uploaded_file('临时文件位置','新的文件的位置');
$old_file = $_FILES['img']['tmp_name'];
$new_file = 'php9_img/'.time().'.jpg';
$res = move_uploaded_file($old_file,$new_file);
var_dump($res);exit;
}总结：使用FromData 可以收集文件上传的数据

相关文章