一、AJAX基础
1. 创建ajax对象
主流浏览器:var xhr = new XMLHttpRequest();
IE(6/7/8)浏览器:var xhr = new ActiveXObject(“Msxml2.XMLHTTP.6.0”);
2. ajax对象成员属性和方法
属性:readyState responseText responseXML onreadystatechange
方法:open() send() setRequestHeader()
3. get请求和post请求注意项
get请求注意
function ajax(url){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange() = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.open('get',url);
xhr.send(null);
}
①在url地址后边通过请求字符串传递get参数信息
②对于特殊符号、中文需要编码encodeURIComponent()
post请求注意
function ajax(url){
var xhr = new XMLHttpRequest();
var info ='hh';
xhr.onreadystatechange() = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.open('post',url);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded
xhr.send(info);
}
①在send()方法里边传递参数
②需要在open()方法之后调用setRequestHeader方法[把传递信息组织为xml格式]
③特殊符号需要编码
④可以同时传递get参数信息,并使用$_GET接收
4. 异步和同步请求
ajax 对象.open(get,url,true异步/false同步);
异步:在同一个时间点允许执行多个进程
同步:在同一个时间点允许执行一个进程
5. 对xml的接收和处理
ajax负责去服务器请求xml信息,使用responseXML属性接收
js里边的DOM技术负责处理xml信息(与处理html方式一致)
document/普通元素对象.getElementsByTagName();
6. 缓存处理
①给请求地址设置随机数
url?+Math.random()
②给动态程序文件设置header头避免浏览器缓存
header("Cache-Control:no-cache");
header("Pragma:no-cache");
header("Expires:-1");
二、AJAX的搭配
1、JSON的基础
1)什么是JSON
json:JavaScript object notation(JavaScript对象符号)
其是我们之前学过js的“字面量对象”
其是一种数据交换格式(之前的xml也是数据交换格式)
json在JavaScript里边就是字面量对象
var obj = {名称:值,名称:值,名称:function(){} }
2)通过php生成json信息
json_encode(数组/对象)—–》生成json信息
json_encode(关联数组)—–》json对象
json_encode(索引数组)—–》js数组
json_encode(索引关联数组)—–》json对象
json_encode(对象)—–》json对象
3)通过php处理json信息
json_decode(json信息); 反编码json信息
对json字符串信息串信息进行反编码,变为当前语言可以识别的信息。
json_decode(json,true)—>array
json_decode(json,false)—>object
javascript接收处理json信息
ajax获得接口信息,JavaScript本身处理json信息,通过eval()把接收的json字符串变成真实的对象信息。
2、无刷新表单信息提交
收集表单信息 — FormData
利用新技术FormData表单数据对象,可以实现快速收集表单信息。
FormData是html5的新技术,在主流浏览器都可以正常使用。
FormData使用注意:
- ① 每个表单域必须有name属性
- ② ajax通过post方式传递FormData的数据不需要设置 setRequestHeader()方法
- ③ 在form标签里边无需设置enctype=”multipart/form-data”属性(即使有上传文件域也不需要设置)
- ④ 普通表单域的特殊符号无需编码
<script>
window.onload = function(){
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function(evt){
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
var url = './test.php';
xhr.onreadystatechange() = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.open('post',url);
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded
xhr.send(fd);
//阻止浏览器默认动作
evt.preventDefault();//事件对象阻止
//return false;
}
}
</script>
3、ajax无刷新附近上传
<form enctype="multipart/form-data">
<input type="file">
服务器端:$_FILES接收附件信息(name/error/size/type/tmp_name)
error:
0---->ok
1---->大小超出php.ini限制
2---->大小超出MAX_FILE_SIZE表单域限制
3---->附件只上传了一部分
4---->没有上传附件
move_uploaded_file(附件临时路径名,真实附件路径名);
收集附件信息:
dom方式只可以收集普通的表单域信息,并且浏览器由于安全方面的限制也禁止通过javascript语言操作本地文件。
通过formdata操作时,form标签里边无需设置enctype="multipart/form-data"属性。
4、AJAX补充
1)上传大附件进度条设置
php.ini 开放大附件上传限制:
文件上传进度属性:
2)ajax的轮询操作
setInterval("fun()",2000);//制作轮询(推技术)
setTimeout("fun()",3000);//延时3秒操作