Ajax
什么是Ajax
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术
通过Ajax改变内容
<div id="showInfo"></div>
<form id="form">
<input type="text" id="user" />
<!--后台接收的变量名字是啥，就是你的name啊，所以name要和后台对应-->
<input type="password" id="pass" />
<input type="button" id="btn" value="登录" />
</form>
<script type="text/javascript">
window.onload=function(){
var btn = document.getElementById('btn');
var show = document.getElementById("showInfo");
btn.onclick=function(){
var username = document.getElementById('user').value;
var password = document.getElementById('pass').value;
/*现在开始我们的ajax*/
/*ajax 不是一门语言，也不是一个插件，就是一个方法，一个技术*/
/*第一步：创建对象*/
var xhr = null;
if(window.XMLHttpRequest){
/*浏览器通过XMLHttpRequest方法创建ajax对象，不过IE5和6不支持*/
/*核心XMLHttpRequest*/
xhr = new XMLHttpRequest();//实例化一个ajax对象
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
/*初始化准备好了*/
/*接着写ajax需要的东西*/
var url = 'login.php?un='+username+'&pd='+password;
xhr.open('post',url,false);//这一步，就是已经是发送请求了
/*open方法声明传输，三个删除，第一个：请求方式；第二个：请求路径；第三个：加载方式（同步、异步,默认，通常，都给我写true）*/
//send()用来给后台传参用的，但是一般ajax传的参数很少，所以都直接放在url后面；
//这段代码在请求结束后执行，
//代表着你请求后要执行的内容
xhr.onreadystatechange=function(){//这一步，其实是请求的结果
if(xhr.readyState==4&&xhr.status==200){
//status==200表示请求成功
//404表示没有找到页面或者数据
console.log('服务器处理数据完成，并且响应了数据');
var data = JSON.parse(xhr.responseText);
console.log(data)
show.innerHTML=data[0][1];
}
}
xhr.send();
}
}
</script>
login.php ↓
<?php
$username = $_POST['username'];
$password = $_POST['password'];
if($username=='admin'&&$password=='123'){
echo '<div>登陆成功</div>';
}else{
echo '<div>登陆失败</div>';
}
?>
创建 XMLHttpRequest 对象
var xhr = null;
if(window.XMLHttpRequest){
/*浏览器通过XMLHttpRequest方法创建ajax对象，不过IE5和6不支持*/
/*核心XMLHttpRequest*/
xhr = new XMLHttpRequest(); //实例化一个ajax对象
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // iE5 和 6
}
向服务器发送请求
使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
Ajax
后台数据交互，同步异步传输
是一种创建交互网页应用的开发技术、主旨在于改善用户体验，实现无刷新效果
优点：
不需要插件支持
优秀的用户体验
提高web程序的性能
减轻服务器和带宽的负担
缺点
破坏浏览器“前进”、“后退”按钮的正常功能，可以通过简单的插件弥补
对搜索引擎支持不足
学会对新知识进行发散性的自学，了解实际开发过程中所学知识的应用和坑等等
如果出现304错误，代表远程服务端数据没有变化，所以服务端不会响应
那么，怎么解决呢？
在你传过去的数据后面加一个随机数就行了
跨域
ajax因为浏览器的安全问题，无法跨域访问数据
那么，我们可以采用script的跨域访问的漏洞，而产生了jsonp的一个技术
用jsonp来解决跨域问题
一句话：带有callback的json就是jsonp
Jsonp是一种数据的调用方式
Ajax是一个技术
Jsonp也是一个技术
虽然我们常说ajax跨域，但是所谓的ajax跨域都是用jsonp来实现，jsonp是一个单独的技术，和ajax没一毛钱关系；
当给你的API接口自带callback的时候，用jsonp调用就可以了
当给你的api接口只是单纯的json数据的是，需要自己追加callback来回调；
在JQ里面，把JSONP和AJAX整合在了一起
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main{
width: 800px;
text-align: center;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="../jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
function abc(data){
console.log(data)
var d = data.weather;
for(var i = 0;i < d.length;i ++){
var date = d[i].date;
var day = d[i].info.day;
var night = d[i].info.night;
var tag='';
tag+='<span>日期：'+date+'</span><ul>';
tag+='<li>白天天气：'+day[1]+'</li>';
tag+='<li>白天温度：'+day[2]+'</li>';
tag+='<li>白天风向：'+day[3]+'</li>';
tag+='<li>白天风速：'+day[4]+'</li>';
tag+='</ul>';
console.log(tag)
$('#nr').html(tag)
}
}
$(function(){
var ct = $('#city');
var nr = $('#nr');
ct.change(function(){
nr.html('');
});
$('#btn').click(function(){
var code = ct.val();
var url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code='+code+'&_jsonp=abc';
var script = document.createElement('script');
script.src=url;
document.body.appendChild(script);
});
});
</script>
</head>
<body>
<div class="main">
<button id="btn">获取</button>
<select id="city">
<option value="101010100">北京</option>
<option value="101020100">上海</option>
<option value="101280101">广州</option>
<option value="101280601">深圳</option>
</select>
<div id="nr">
</div>
</div>
</body>
</html>
数据库
什么是数据库？
就是按照数据的组织架构来存储数据的仓库，就叫做数据库
也就是说，我们平时的数据，都是存在数据库里面的，用json存放大量数据是非常麻烦已经不好的方式；
左键点击wamp，选择phpmyadmin,进入数据库
账号：root，密码没有，为空；
插入数据：INSERT INTO `login` (`username`, `password`) VALUES ('admin', '123456');
查找数据：SELECT * FROM `login` WHERE `username` = 'admin' AND `password` = '123456'
当你工作中，公司采用的服务器版本5.5以下，可以使用PHP的mysql方法，但是如果是5.5以上，就用mysqli方法；
增加：insert into 数据表(字段1,字段2,字段3) values('值1','值2','值3')
删除：delete from 数据表 where id=你要删除的数据id
修改：update 数据表 set 字段1=‘值1’,字段2=‘值2’,字段3=‘值3’ where id=你要修改的数据ID
查询：select（你要查询的字段，*代表全部字段） from 表名 where （你的查询条件）
demo login
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="user" />
<input type="password" id="pass" />
<button id="zc">注册</button>
<button id="dl">登录</button>
</body>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var us = $("#user").val();
var pd = $("#pass").val();
$("#zc").click(function(){
var sp = us.slice(0,2);
console.log(sp);
$.ajax({
type:"post",
url:"login.php",
data:{
user:us,
pass:pd,
flag:0
},
success:function(data){
alert(data);
}
});
});
$("#dl").click(function(){
$.ajax({
type:"post",
url:"login.php",
data:{
user:us,
pass:pd,
flag:1
},
success:function(data){
alert(data);
}
});
});
})
</script>
</html>
<?php
$us = $_POST["user"];
$pd = $_POST["pass"];
$flag = $_POST["flag"];
$_mysqli = new mysqli();
$_mysqli -> connect("localhost","anqxmcn","123456","anqxmcn");
$_mysqli -> set_charset("utf8");
if($flag==1){
$result = $_mysqli -> query("SELECT * FROM `login` WHERE `username` LIKE '".$us."' AND `password` LIKE '".$pd."'");
$row = $result -> fetch_row();
if($us==$row[0]&&$pd==$row[1]){
echo '登录成功';
}else{
echo '登录失败';
};
}else{
$result = $_mysqli -> query("INSERT INTO `anqxmcn`.`login` (`username`, `password`) VALUES ('".$us."', '".$pd."');");
if($result==1){
echo '注册成功';
}else{
echo '注册失败';
};
};
?>
网友评论