Ajax笔记速览 & json介绍

一、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秒操作