基础学习路径
AJAX是Asynchronous javascript and xml 的缩写,表示异步javascript 和 xml ,是一种交互式网页应用开发技术。
AJAX是一些老技术的新应用, 应用到了html css javascript dom , 以XMLHttpRequest为技术核心实现网页异步数据传输。
最大特点就是:网页不用刷新进行数据传输
用户注册
AJAX分页效果
图片加载瀑布流效果
传统的数据提交方式
AJAX数据提交方式
通过上述对比,客户端用户部分减少了2个流程,交给了ajax去处理,那么就减少了用户的等待时间,用户体验大大的提升
减少服务器带宽,按需获得数据
注意:在一些有列表展示功能的地方优势特别突出
无刷新更新页面,减少用户的实际和心理等待时间
注:用户注册,用户登录。多数据信息的展示
更好的用户体验,传统数据提交会刷新页面,易丢失用户填写数据
主浏览器都支持
XHR = new XMLHttpRequest();
创建请求头使用OPEN,主要实现(请求类型,请求地址)
对象.open(请求类型GET/POST,请求地址,[同步true/异步false]);
默认:同步 True
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET','demo.php');
主要实现请求服务器操作
对象.send(POST请求则填写POST的数据/GET请求可以不用写);
【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,不能直接用浏览器浏览该文件
对象.responseText (获取服务器响应的字符串数据)
对象.responseXML(获取服务器响应的xml数据)
<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请求完成
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>
判断用户名admin是否存在,当存在的时候返回【不可用】,当不存在的时候返回【可用】
明确需求:
第一步:给按钮增加点击事件
第二步:获取用户输入的值username
第三步:使用AJAX将内容发送给服务器端PHP文件
第四步:编写PHP文件checkuser.php 判断用户是否存在,返回结果
第五步:将PHP返回的结果弹出来
<!--
第一步:给按钮增加点击事件
第二步:获取用户输入的值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>
<?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 原则上是不受限制的,可以通过PHP配置POST_MAX_SIZE进行更改
安全方面:POST比GET要安全
文件上传:GET不能进行文件上传
说明:在请求地址后面增加参数,例如:demo.php?a=111&b=222&c=333
【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);
Open(‘POST’,请求地址);
设置发送的数据格式,采用URL编码格式
对象.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);
对象.send(发送的数据);
<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.练习:表单无刷新数据录入
同步:等待服务器响应完成在执行下一段JS代码 (阻塞模式)
异步:不等服务器响应完成直接执行下一段JS代码(非阻塞模式)
设置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';
【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';
我们再浏览一些网站的时候浏览器为了方便用户再次访问的时候增加用户访问体验会将一些静态资源文件缓存到本地
缓存的位置在:
选中IE浏览器右键
打开
静态缓存目录就出现再这里面了
说明:IE存在缓存
代码设置:?t=Math.random()
缺点:
1.不能保证URL绝对唯一
2.产生大量缓存文件
代码设置:?t=new Date().getTime(); //取得毫秒时间戳
优点:保证URL绝对唯一
缺点:依然产生大量缓存文件
代码设置:对象.setRequestHeader("If-Modified-Since","0");
原理分析:
If-Modified-Since是标准的HTTP请求头标签,在发送HTTP请求时,把浏览器端缓存页面的最后修改时间一起发到服务器去,服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。
如果时间一致,那么返回HTTP状态码304(不返回文件内容),客户端接到之后,就直接把本地缓存文件显示到浏览器中。
如果时间不一致,就返回HTTP状态码200和新的文件内容,客户端接到之后,会丢弃旧文件,把新文件缓存起来,并显示到浏览器中。
代码设置:header("Cache-Control: no-cache, must-revalidate");
原理分析:
利用php的header函数向响应头中写数据,写的是告诉客户端:不要对本次的结果进行缓存。
这种做法,可以从根本上解决缓存问题,不产生任何缓存文件。
普通字符串文本格式:responseText
XML数据格式:responseXML
JSON 字符串数据格式:responseText (在实际工作中用到最多,最广泛的格式)
<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>
<?php
echo '<h1>返回的文本</h1>';
最终效果
<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>
';
JSON(javascript Object Notation js 对象标记) 是一种轻量级的数据交换格式。
数据格式比较简单,易于读写, 格式都是压缩的,占用带宽小
易于解析这种语言,客户端JavaScript可以简单的通过eval()进行JSON数据的读取
因为JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护
PHP端生成JSON数据使用:json_encode(数组数据格式);
PHP端解析JSON数据使用:json_decode(待解码数据,true/false);
说明:false 解码出来的数据是一个对象,true,解码出来的是一个数组
由于我们返回值的处理使用的是responseText 格式
语法格式:JSON.parse(字符串);
作用:从一个字符串中解析出json数据对象
前提:字符串必须是json格式的字符串
用户会员注册功能,用户填写好根据规则进行验证,如果验证成功提示用户注册成功。
验证规则:
1.用户名不能为空
2.用户名必须是由数字和字母组成,而且是在6~8位之间
<!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>
什么会出现跨域
如何解决跨域问题
Demo1(添加允许跨域请求的响应头)
现在用添加响应头的方式
Demo2(jsonp的callback方式)
这里演示的是jquery的ajax,后台采用的是webservice接口形式
注意此时的dataType为jsonp格式,看看后台的接收
,
我们返回的其实就是一个函数的调用文本,这里注意,callback的名称,由于前台没有指定callback函数,所以这里自动生成了,如果想自定义回调函数名称如下操作,添加一行请求参数
这样后台的回调函数名就变成了mytest
浏览器发出的请求格式和响应数据如下,其实就是返回函数的调用,而需要返回的数据则以函数参数值的形式填入
此时控制台就能够获取到“hello world”
)url:
要求为String类型的参数,(默认为当前页地址)发送请求的地址。
2)type:
要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
3)timeout:
要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。
4)async:
要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。
注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
5)cache:
要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。
6)data:
要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看 processData(防止自动转换)选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7)dataType:
要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
● xml:返回XML文档,可用JQuery处理。
● html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
● script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
● json:返回JSON数据。
● jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
● text:返回纯文本字符串。
8)beforeSend:
这个参数主要是为了在向服务器发送请求前,执行一些操作。要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
9)complete:
要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
10)success:
要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
11)error:
要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
12)contentType:
要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13)dataFilter:
要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
14)dataFilter:
要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
15)global:
要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
16)ifModified:
要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。
17)jsonp:
要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18)username:
要求为String类型的参数,用于响应HTTP访问认证请求的用户名。
19)password:
要求为String类型的参数,用于响应HTTP访问认证请求的密码。
20)processData:
要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
21)scriptCharset:
要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
*请认真填写需求信息,我们会在24小时内与您取得联系。