前端ajax开发的逻辑（web前端ajax笔记之一）
前端ajax开发的逻辑（web前端ajax笔记之一）AJAX数据提交方式传统的数据提交方式用户注册AJAX分页效果图片加载瀑布流效果
学习大纲
基础学习路径
1.什么是AJAX1.1概念AJAX是Asynchronous javascript and xml 的缩写，表示异步javascript 和 xml 是一种交互式网页应用开发技术。
AJAX是一些老技术的新应用， 应用到了HTML css javascript dom 以XMLHttpRequest为技术核心实现网页异步数据传输。
1.2特点最大特点就是：网页不用刷新进行数据传输
1.3应用场景用户注册
AJAX分页效果
图片加载瀑布流效果
2.AJAX工作流程传统的数据提交方式
AJAX数据提交方式
通过上述对比，客户端用户部分减少了2个流程，交给了ajax去处理，那么就减少了用户的等待时间，用户体验大大的提升
3.AJAX的优点 减少服务器带宽，按需获得数据
注意：在一些有列表展示功能的地方优势特别突出
无刷新更新页面，减少用户的实际和心理等待时间
注：用户注册，用户登录。多数据信息的展示
更好的用户体验，传统数据提交会刷新页面，易丢失用户填写数据
主浏览器都支持
二、AJAX使用1.创建ajax对象XHR = new XMLHttpRequest();
2.建立链接1.1语法创建请求头使用OPEN 主要实现（请求类型，请求地址）
对象.open(请求类型GET/POST 请求地址 [同步true/异步false]);
默认：同步 True
1.2代码//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET' 'demo.php');3.发送请求1.1语法
主要实现请求服务器操作
对象.send(POST请求则填写POST的数据/GET请求可以不用写);
1.2代码【HTML代码】
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET' 'demo.php');
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
</script>
【PHP代码】
<?php
echo 'test';
脚下留心：
一定要在服务器目录下面运行AJAX-发送请求.html 不能直接用浏览器浏览该文件
4.响应请求（接受服务器返回的信息）1.1语法对象.responseText (获取服务器响应的字符串数据)
对象.responseXML(获取服务器响应的xml数据)
1.2代码<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET' 'demo.php');
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
//alert返回的数据
alert(XHRObj.responseText);
</script>
案例运行结果
脚下留心：无法响应数据
原因：在AJAX没有完成请求这个时候是没有返回值的，所以获取数据是没有结果的。
解决方法：通过判断reaystate == 4 是否AJAX请求完成
1.3判断服务器是否响应成功Onreadystatechange 作用：ajax在请求的过程中发生任何状态的变化都会调用该方法
Readystate 作用：返回ajax的请求状态
状态说明：
最终代码：以及结果
思考：为什么没有打印0~4
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET' 'demo.php');
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
console.log(XHRObj.readyState);
//发送请求
XHRObj.send();
//当请求状态发送变化时ajax会自动调用该方法onreadystatechange
XHRObj.onreadystatechange=function(){
console.log(XHRObj.readyState);
if(XHRObj.readyState==4){
console.log(XHRObj.responseText);
}
}
console.log(XHRObj.readyState 'sdf');
</script>
说明：
程序是从上往下进行的， 里面的代码是等发送异步请求完了才去执行的。
状态0是无法获取的，因为实例化AJAX的对象，然而监听需要对象对象里面的属性来完成，所以0装就是实例化对象的时候。
思考：避免接口写错
例如：
在实际使用中，我们为了只有在请求的接口正确的时候获取相应的数据，一般我们要判断返回的HTTP状态是否正确，
使用：
对象.status == 200
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET' 'demo1.php');
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
// console.log(XHRObj.readyState);
//发送请求
XHRObj.send();
//当请求状态发送变化时ajax会自动调用该方法onreadystatechange
XHRObj.onreadystatechange=function(){
// console.log(XHRObj.readyState);
if(XHRObj.readyState == 4 && XHRObj.status == 200){
console.log(XHRObj.responseText);
}
// else{
// //以邮件或者短信的形式发送通网站管理员
// alert('服务器错误，很忙......');
// }
}
// console.log(XHRObj.readyState 'sdf');
</script>5.案例联系-检查用户名是否存在1.1案例需求
判断用户名admin是否存在，当存在的时候返回【不可用】，当不存在的时候返回【可用】
1.2完成思路明确需求：
第一步：给按钮增加点击事件
第二步：获取用户输入的值username
第三步：使用AJAX将内容发送给服务器端PHP文件
第四步：编写PHP文件checkuser.php 判断用户是否存在，返回结果
第五步：将PHP返回的结果弹出来
1.3HTML代码<!--
第一步：给按钮增加点击事件
第二步：获取用户输入的值username
第三步：使用AJAX将内容发送给服务器端PHP文件
第四步：编写PHP文件checkuser.php 接受参数，并且判断用户是否存在，返回结果
第五步：将PHP返回的结果弹出来
-->
<script type="Text/javascript">
//按钮绑定事件，给input增加ID属性
var checkObj = document.getElementById('check');
checkObj.onclick = function(){
var username = document.getElementById('username').value;
//创建ajax对象
var XHRObj = new XMLHttpRequest();
//创建请求头，设置请求发送的地址和类型，并且将参数传递给服务端
XHRObj.open('get' 'check.php?username=' username);
//获取服务器端返回的数据
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
alert(XHRObj.responseText);
}
}
//发送请求
XHRObj.send();
}
</script>1.4PHP代码
<?php
//定义一个用户数组
$user = array('admin' 'xiaoming' 'xiaohong' 'xiaoqiang');
//获取传递的参数
$username = $_GET['username'];
//判断用户是否存在在数组中
if(in_array($username $user)){
echo '不可用';
}else{
echo '可用';
}
进化版本
1)进化要求
当用户名可用的时候后面增加√说可用，当用户名不可用的时候出现一个×提示当前用户名太火，请换一个
HTML代码
<style>
.error{
color: red;
font-size: 14px;
}
.green{
color: green;
font-size: 14px;
}
</style>
<body>
<!-- <span class="error">×此用户名太首欢迎，请换一个</span>-->
<!-- <span class="green">√恭喜你，该用户可用</span>-->
<table border="1">
<th colspan="2">用户注册</th>
<tr>
<td><input id="username" name="username" type="text"/><div id='error'></div></td>
<td><input id="check" type="button" value="检测用户"/></td>
</tr>
</table>
</body>
<!--
第一步：给按钮增加点击事件
第二步：获取用户输入的值username
第三步：使用AJAX将内容发送给服务器端PHP文件
第四步：编写PHP文件checkuser.php 接受参数，并且判断用户是否存在，返回结果
第五步：将PHP返回的结果弹出来
-->
<script type="text/javascript">
//按钮绑定事件，给input增加ID属性
var checkObj = document.getElementById('check');
checkObj.onclick = function(){
var username = document.getElementById('username').value;
//创建ajax对象
var XHRObj = new XMLHttpRequest();
//创建请求头，设置请求发送的地址和类型，并且将参数传递给服务端
XHRObj.open('get' 'check.php?username=' username);
//获取服务器端返回的数据
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
// alert(XHRObj.responseText);
if(XHRObj.responseText =='可用'){
document.getElementById('error').innerHTML='<span class="green">√恭喜你，该用户没有被注册</span>';
}else{
document.getElementById('error').innerHTML=' <span class="error">×此用户名太首欢迎，请换一个</span>';
}
}
}
//发送请求
XHRObj.send();
}
</script>三、发送GET/POST请求1.POST和GET的区别
数据方面：GET受浏览器的影响
POST 原则上是不受限制的，可以通过PHP配置POST_MAX_SIZE进行更改
安全方面：POST比GET要安全
文件上传：GET不能进行文件上传
2.Ajax之GET请求（加参数）1.1实现方式说明：在请求地址后面增加参数 例如：demo.php?a=111&b=222&c=333
1.2代码【HTML代码】
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头，请求方式，请求链接
XHRObj.open('get' 'test.php?a=111&b=222&c=333');
//发送请求
XHRObj.send();
</script>
【PHP代码】
<?php
var_dump($_GET);3.AJAX之POST请求1.1实现方式
open(‘POST’ 请求地址);
设置发送的数据格式，采用URL编码格式
对象.setRequestHeader(‘content-type’ ’application/x-www-form-urlencoded’);
对象.send(发送的数据);
1.2代码<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
XHRObj.onreadystatechange = function() {
if (XHRObj.readyState == 4) {
alert(XHRObj.responseText);
}
}
//创建请求头，请求方式，请求链接
XHRObj.open('post' 'test.php');
//发送post的数据
var postData = 'name=123123&age=rrr';
//设置数据编码格式 使用URL编码格式
XHRObj.setRequestHeader('content-type' 'application/x-www-form-urlencoded');
//发送请求
XHRObj.send(postData);
</script>
【PHP代码】
<?php
var_dump($_POST);
效果
4.练习：表单无刷新数据录入
四、AJAX同步异步请求1.概念同步：等待服务器响应完成在执行下一段JS代码 （阻塞模式）
异步：不等服务器响应完成直接执行下一段JS代码（非阻塞模式）
2.验证同步设置open(方式，请求地址 false/同步);
HTML【代码】
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET' 'demo.php' false);
//时时监控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4){
console.log('111');
}
}
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
console.log('js执行完成');
</script>
【PHP代码】
为了增加延迟效果使用sleep
<?php
sleep(8);
echo 'test';3.验证异步
【HTML代码】
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET' 'demo.php');
//时时监控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4){
console.log('111');
}
}
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
console.log('js执行完成');
</script>
【PHP代码】
<?php
sleep(8);
echo 'test';五、解决缓存问题1.缓存分析
我们再浏览一些网站的时候浏览器为了方便用户再次访问的时候增加用户访问体验会将一些静态资源文件缓存到本地
缓存的位置在：
选中IE浏览器右键
打开
静态缓存目录就出现再这里面了
说明：IE存在缓存
2.解决方案1.1随机数代码设置：?t=Math.random()
缺点：
1.不能保证URL绝对唯一
2.产生大量缓存文件
1.2时间代码设置：?t=new Date().getTime(); //取得毫秒时间戳
优点：保证URL绝对唯一
缺点：依然产生大量缓存文件
1.3设置请求头代码设置：对象.setRequestHeader("If-Modified-Since" "0");
原理分析：
If-Modified-Since是标准的HTTP请求头标签，在发送HTTP请求时，把浏览器端缓存页面的最后修改时间一起发到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。
如果时间一致，那么返回HTTP状态码304（不返回文件内容），客户端接到之后，就直接把本地缓存文件显示到浏览器中。
如果时间不一致，就返回HTTP状态码200和新的文件内容，客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示到浏览器中。
1.4设置相应头代码设置：header("Cache-Control: no-cache must-revalidate");
原理分析：
利用php的header函数向响应头中写数据，写的是告诉客户端：不要对本次的结果进行缓存。
这种做法，可以从根本上解决缓存问题，不产生任何缓存文件。
六、返回数据格式1.数据格式分类普通字符串文本格式：responseText
XML数据格式:responseXML
JSON 字符串数据格式：responseText (在实际工作中用到最多，最广泛的格式)
2.返回Text数据处理1.1HTML代码<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET' 'text.php');
//时时监控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
document.getElementById('content').innerHTML=XHRObj.responseText;
}
}
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
</script>
<body>
<div id="content"></div>
</body>1.2PHP代码
<?php
echo '<h1>返回的文本</h1>';
最终效果
3.返回XML数据处理1.1HTML代码<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET' 'xml.php');
//时时监控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
var xmlObj = XHRObj.responseXML;
//以前获取html文档我们使用 document.getElementByTagName()
books = xmlObj.getElementsByTagName('book');
for(i=0;i<books.length;i ){
//获取第二级的值我们使用childen 方法
for(j=0;j<books[i].children.length;j ){
console.log(books[i].children[j].innerHTML);
}
}
}
}
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
</script>
1.2PHP代码
首先确保PHP写的xml文件能再浏览器端访问
<?php
header('Content-Type:text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8"?>
<books>
<book>
<name>西游记</name>
<price>50.12</price>
</book>
<book>
<name>三国演义</name>
<price>876.12</price>
</book>
</books>
';4.返回JSON数据处理1.1什么是JSON数据
JSON(javascript Object Notation js 对象标记) 是一种轻量级的数据交换格式。
1.2JSON数据优势数据格式比较简单，易于读写， 格式都是压缩的，占用带宽小
易于解析这种语言，客户端JavaScript可以简单的通过eval()进行JSON数据的读取
因为JSON格式能够直接为服务器端代码使用 大大简化了服务器端和客户端的代码开发量 但是完成的任务不变 且易于维护
1.3服务器端JSON生成和解析PHP端生成JSON数据使用：json_encode(数组数据格式);
PHP端解析JSON数据使用：json_decode(待解码数据，true/false);
说明：false 解码出来的数据是一个对象，true 解码出来的是一个数组
1.4客户端解析JSON数据由于我们返回值的处理使用的是responseText 格式
JSON.parse()语法格式：JSON.parse(字符串);
作用：从一个字符串中解析出json数据对象
前提：字符串必须是json格式的字符串
Eval七、综合案例-用户注册1.需求用户会员注册功能，用户填写好根据规则进行验证，如果验证成功提示用户注册成功。
验证规则：
1.用户名不能为空
2.用户名必须是由数字和字母组成，而且是在6~8位之间
2.HTML代码<!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>
<style>
dd{float: left;}
</style>
<body>
<div>
<dl>
<dd>用户名</dd>
<dd><input type="text" name="username" id="username"></dd>
<dd><input type="button" id="regbtn" value="注册"></dd>
</dl>
</div>
</body>
<script type="text/javascript">
//给注册按钮增加click事件
var regbtn = document.getElementById('regbtn');
regbtn.onclick = function(){
//获取用户输入的值
var username = document.getElementById('username').value;
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//打开对象
XHRObj.open('get' 'reg.php?username=' username);
//实时监控AJAX运行状态
XHRObj.onreadystatechange = function(){
//判断服务器是否响应成功
if(XHRObj.readyState==4 && XHRObj.status == 200){
//将json数据转换成对象
jsonObj = JSON.parse(XHRObj.responseText);
//判断用户是否操作成功进行页面跳转
if(jsonObj.state ==1){
location.href='success.html';
}else{
alert(jsonObj.msg);
}
}
}
//发送请求
XHRObj.send();
}
</script>
</html>3.PHP代码
<?php
//判断用户是否传递数据
$username = empty($_GET['username'])?'':$_GET['username'];
//判断用户输入的是否为空
if($username==''){
echo json_encode(array('state'=>0 'msg'=>'用户名不能为空!'));exit;
}
//使用正则验证用户名是否符合格式
$preg = '/^[a-zA-z][a-zA-Z0-9]{6 8}$/';
$res = preg_match($preg $username);
if(!$res){
echo json_encode(array('state'=>0 'msg'=>'格式错误！请输入6-8位英文字符'));exit;
}
//注册成功后输出json_格式
echo json_encode(array('state'=>1 'msg'=>'注册成功!'));
