服务器环境的搭建
使用的软件是WampServer，链接http://www.php100.com/
www是默认网站根目录
http://localhost;
上述的访问方式是在服务器环境下。
第一个Ajax程序
Ajax：异步JavaScript与Xhtml。使用异步的js去操作Xhtml。
- Ajax可以做的就是数据交互[可以在无刷新页面的情况下，发送请求]
- 节省用户操作，提高用户体验
- 减少数字请求
通过Ajax的内置对象，来模拟当前浏览器的请求行为。可以加载片段数据。
这里谈到了 asp jsp php等格式的文件
JS不能够直接操作后端的文件。
//AJAX最简单的流程。
//需要在服务器环境下访问
var getInput = document.getElementById('btn');
getInput.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open('get','1.txt',true);
xhr.send();//发送
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
ajax流程对象的创建和兼容处理
Ajax的行为与用户操作的行为类似
getInput.onclick = function(){
var xhr = new XMLHttpRequest();//创建对象[打开浏览器]
xhr.open('get','1.txt',true);//打开文件[在地址栏输入地址]
xhr.send();//发送请求[相当于用户巧回车]
//等待服务器返回内容
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
ajax在IE6-下是需要进行兼容的
if(String){//这样是可以判断是否支持对象。如果支持就会返回true
//，如果不支持就会报错。解决的办法是在把对象单过window下面的。如果不支持就会返回undefined
}
//兼容性解决办法
getInput.onclick = function(){
var xhr = null;
if(window.XMLHttpRequest){//拿不存在的对象去做判断一样会出错.表示判断window下面的对象是否存在。如果属性不存在就会返回undefined
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','1.txt',true);
xhr.send();
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
//报错之后会影响后续代码的执行
try {//尝试的代码如果有错误就会执行catch
//代码执行这个块的内容，如果有错误，就会执行catch(),并且传入错误信息参数
throw new Error('错了错了');//手动报错。执行到这里就会直接弹出。信息存储到e
alert(a);
}catch(e){//e表示抛出的错误信息
alert(2);
console.log(e);
}
//throw()表示手动报错
//另外一种兼容的方式
getInput.onclick = function(){
var xhr = null;//创建对象[打开浏览器]
try{//
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','1.txt',true);//打开文件[在地址栏输入地址]
xhr.send();//发送请求[相当于用户巧回车]
//等待服务器返回内容
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
open方法和表单
var xhr = new XMLHttpRequest();//创建对象
xhr.open('get','1.txt',true);
/*
* open方法->就像在地址栏输入地址
*
* 1.打开方式
* 2.地址
* 3.是否异步
* 异步:非阻塞 [setTimeout就是非阻塞模式]
* 非异步:阻塞
* */
//当后续代码需要用到前面代码的时候使用同步，
xhr.open('get','1.txt',true);//true就是异步模式.[true表示ajax代码没有执行完毕，后续代码就开始执行]
'get'是通过URL?进行提交的
'post'是通过表头进行提交的
什么时候同步与异步?
- 当后续代码需要用到前面代码的时候，使用同步，一般情况下都是使用异步。
//通过表单来理解前后端如何进行交互
<!--
表单：数据的提交
action：数据提交的地址，默认是当前界面
method：数据提交的方式，默认是get方式
1.get
2.post
enctype:提交数据格式，默认是application/x-www-form-urlencoded"
-------------------------------------------------------------------------------------
get：根据数据的名称与数据的值，做串联进行提交 ?username=aaa&age=18
只能够传递字符串格式的数据，而且会暴露用户的隐私，会存储缓存，造成数据更新，而页面无更新的状态[解决办法是加入一个随机数或者时间戳]
post可以传递的数据很多[比如说文本和二进制]
由于url长度限制的原因，不要通过get方式传递过多的数据
post理论上无限制，post是通过表头进行提交的。
------------------------------------------------------
值得注意的前后端的提交方式要一样。
-->
<form action="1.php" enctype="application/x-www-form-urlencoded">
<input type="text" name="username">
<input type="text" name="age">
<input type="submit"value="提交">
</form>
ajax流程-数据的获取
getInput.onclick = function(){
var xhr = new XMLHttpRequest();//创建对象
xhr.open('get','1.txt',true);//调用方法
xhr.send();
//等待服务器返回内容
/*
*内容返回之后，就会存储到一个属性里面
* responseText->ajax请求返回的内容。返回的类型是字符串
*
* readyState：表示ajax工作状态[5个值]
* 0:[初始化]初始化未调用
* 1:[载入]已调用send()方法，正在发送请求
* 2:[载入完成]send()方法完成，已收到全部响应内容[收到的内容并不是能直接看的懂的内容]
* 3:[解析]正在解析响应内容
* 4:[完成]服务器内容解析完成，可以在客户端调用了
*
*
* onreadystatechange：每当readyState发生改变时，就会触发onreadystatechange事件
*
* readyState是服务器状态
* status是HTTP状态码
* */
xhr.onreadystatechange = function (){//每次改变就触发一次，可能会触发很多次
if(xhr.readyState == 4){
if(xhr.status==200){
alert(xhr.responseText);
}else{
alert('出错了，err'+xhr.status);
}
}
}
}
应用中get与post的区别处理
//使用前端获取静态文件与直接打开php文件是一样的
//前端这，每次使用get方法打开之后都会生成缓存，下次读取的时候还会是缓存里面的内容。解决办法是加入一个时间戳或者随机数。[[在IE出现此问题，chrome中现在无，FF无]]
如下：
xhr.open('get','2.get.php?username=leo&age=18&'+new Date().getTime(),'true');
//由于get方式传递可能会造成乱码问题，解决办法如下。[实测在IE下产生此问题]
xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&'+new Date().getTime(),true);//调用方法
//post中是不存在缓存问题的[post本来是要提交数据的，而提交数据没有缓存问题的，这与web机制有关系]
//中文也没有问题，不用进行编码
getInput.onclick = function(){
var xhr = new XMLHttpRequest();//创建对象
xhr.open('post','2.post.php?',true);//调用方法
//post方式，数据放在send()里面作为参数传递
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型,不声明会造成无法读取
xhr.send('username=leo&age=30');
xhr.onreadystatechange = function (){//每次改变就触发一次，可能会触发很多次
if(xhr.readyState == 4){
if(xhr.status==200){
alert(xhr.responseText);
}else{
alert('出错了，err'+xhr.status);
}
}
}
}
ajax获取数据的处理和实例
start-node-13
if(xhr.status==200){
// alert( typeof xhr.responseText);[输出的是一个类数组，但是类型实际上是String]
alert( xhr.responseText);
}
/*
* JSON是一个对象[object JSON]
* IE7-不支持。json.org
*
* stringify：把一个对象转换为字符串 [JSON对字符串转换为对象的key值的要求是很严格的，必须要使用双引号。在对象转换为string的时候，自动会加上双引号]
* parse：把字符串转成相对应的对象
* */
//stringify的实例
var arr = [1,23,4,4,5];
var obj = {left:100};
alert(typeof JSON.stringify(arr));
alert( JSON.stringify(obj));
//parse的实例
var str1 = '[100,200,300]';
var arr1 = JSON.parse(str1);
//alert(arr1[0]);
var str2 = '{"left":100}';
var obj1 = JSON.parse(str2);
alert(obj1.left);
AJAX获取数据的处理和实例
/*
* 数据格式是数组和json嵌套的
* */
/*
* ajax做的事情就是去拿数据。其他就和ajax无关了。
* */
var getInput = document.getElementById('btn');
var getUl = document.getElementById('ul1');
getInput.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open('get','getNews.php',true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status==200){
var data = JSON.parse(xhr.responseText);
var html = '';
for(var i=0;i<data.length;i++){
html+='<li><a href="#">'+data[i].title+'</a>'+'[<span>'+data[i].date+'</span>]'+'</li>';
}
getUl.innerHTML = html;
}else{
alert('出错了,err'+xhr.status);
}
}
}
}
/*
* ajax做的事情就是去拿数据。其他就和ajax无关了。
*
*这属于ajax的一个轮循[轮番查询]
* */
/*
*
* 定时刷新的原理是使用定时器来定时执行ajax获取数据
* */
function thisAjax(method,url,data,success){//method表示提交方式,url表示后端的地址，data表示发送过去的用户数据，success表示执行的函数
var xhr = new XMLHttpRequest();
if(method=='get'&&data){
url+='?'+data;
}
xhr.open(method,url,true);
if(method=='get'){
xhr.send();
}else{
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function(){
if(xhr.readyState ==4){
if(xhr.status==200){
success&&success(xhr.responseText);
}else{
alert('出错了，错误代码'+xhr.status);
}
}
}
}
var getInput = document.getElementById('btn');
getInput.onclick = function(){
thisAjax('get','getNews.php','',function(data){//最后一个是回调函数
var data = JSON.parse(data);
var getUl = document.getElementById('ul1');
var html = '';
for(var i=0;i<data.length;i++){
html+='<li><a href="#">'+data[i].title+'</a>'+'[<span>'+data[i].date+'</span>]'+'</li>';
}
getUl.innerHTML = html;
});
setInterval(function(){
thisAjax('get','getNews.php','',function(data){
var data = JSON.parse(data);
var getUl = document.getElementById('ul1');
var html = '';
for(var i=0;i<data.length;i++){
html+='<li><a href="#">'+data[i].title+'</a>'+'[<span>'+data[i].date+'</span>]'+'</li>';
}
getUl.innerHTML = html;
});
},1000);
}
瀑布流布局原理
/*
* 瀑布流就是拉到下面自动加载。宽度是一致的
* - 固定列
* - 动态列[可视区/宽度]
*
* 数据是分批加载进来的，当满足某个条件进行加载
*
* 数据填充会导致高度不等的情况，所以并不是随便来点[元素往总高度最高的列去添加]
*
* 原理：四个高度不限制，宽度限制的div
* */
<li>
<div>
<img src="http://s3.mogucdn.com/mlcdn/c45406/180303_50chhg7gf0gggi29d8c2jhkfe0ajl_302x604.jpg_300x9999.v1c7E.70.webp" alt="">
<p>初春的午后，阳光的温暖一泻千里，喜欢这样的简单，一眼望去满身的青春活力，这样的一件风衣外套，中长款的款型，腰部的心机小松绳设计，风风种种穿出高挑的身材，像风一样的女子</p>
</div>
<div>
<img src="https://s3.mogucdn.com/mlcdn/c45406/180307_6192bkgef1h3l0ccff2ghga8hadih_483x964.jpg_400x9999.v1c7E.70.webp" alt="">
<p>初春的午后，阳光的温暖一泻千里，喜欢这样的简单，一眼望去满身的青春活力，这样的一件风衣外套，中长款的款型，腰部的心机小松绳设计，风风种种穿出高挑的身材，像风一样的女子</p>
</div>
</li>
网友评论