12.1、AJAX相关详情

一、介绍

1、什么是ajax
Asynchronous
Javascript
And
Xml
利用javascript和xml实现异步传输的技术

二、ajax对象

1、创建ajax对象
如果写开发ajax程序，必须 首先创建一个ajax对象，创建方式：
1)基于IE内核系列
var xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
Alert(xhr.readyState);
2）基于W3C标准
Var xhr = new XMLHttpRequest();
Alert(xhr.readyState);

解决兼容
方法一：If(window.navigator.userAgent == ‘’) {} else {}
方法二：如果是IE高版本或w3c浏览器，会直接创建Ajax对象并返回；否则会向下执行第二个try语句
function createXhr()
{
Try {
Return new XMLHttpRequest();
} catch(e) {}
Try{
Return new ActiveXObject();
} catch(e) {}
Alert(‘请更换浏览器’);
}

2、Ajax对象的相关属性和方法

1）方法
i. xhr.open(method,url) 初始化Ajax对象
Method 请求方式（get post）
Url 请求页面地址
ii. Xhr.setRequestHeader(header,value)设置请求头（post方式需要）
header 头名
Value 值
例如：
Xhr.open(‘post’,’.php’);
xhr.setRequestHeader(‘Content-Type’,’Application/x-www-form-urlencoded’);
iii. Xhr.send(content)发送Ajax请求
Content 请求时传递的参数

2）属性

i. onreadystatechange 当ajax对象的状态码发生改变时所触发的回调函数
ii. readyState ajax对象的状态码
0表示创建xhr（ajax对象）成功，但是没有初始化 new XMLHttpRequest()
1表示对象已经初始化，但未发送请求 open
2表示对象已经发送请求 send
3表示对象已经接收部分服务器返回的数据
4表示接收数据完毕 （常用）
iii. status ajax对象的响应状态码（http响应状态码）
200表示请求成功（OK）
304表示从缓存中读取（Not Modified文档的内容）
400表示语义有错
403表示拒绝提供些服务，forbidden
404表示请求资源不存在
408表示请求超时
iv. statusText ajax对象的响应状态文本 OK NOTFOUND
v. responseText ajax对象的响应内容（文本）
vi. responseXML ajax对象的响应内容（XML对象）

三、发送GET请求

语法
Var xhr = createXhr();
Xhr.open(get’,url);
xhr.onreadystatechange=function() {
If(xhr.readyState == 4 && xhr.status == 200) {
xhr.responseText;
}
};
Xhr.send(null);

四、发送POST请求

1、语法
Var xhr = createXhr();
Xhr.open(‘post’,url);
var str = ‘s1=’+1+’&s2=’+2;
xhr.setRequestHeader(‘Content-Type’,’Application/x-www-form-urlencoded’);
Xhr.onreadystatechange=function() {
If(xhr.readyState == 4 && xhr.status == 200) {
Xhr.responseText;
}
};
Xhr.send(str);

2、get与post的区别
a) get传递的数据不超过2kb post传递的数据理论上没有限制
b) get传递的参数附加在url地址后面 post传递的参数附加在请求空白行的下面
c) get传递的数据类型为文本类型 post传递的数据类型为文本或二进制数据

五、解决ajax缓存问题

1、GET方式在IE会发生缓存问题，如果url相同，会自动使用缓存结果
2、以下四种方法，前三种属于客户端解决缓存问题，第四种是服务器解决缓存问题。
解决方法一：?&=Math.random();
弊端—会产生大量缓存文件，有随机值重复的可能
解决方法二：?=new Date().getTime();
注意—会产生大量缓存文件，但永远不可能重复，js里的时间戳是毫秒，
解决方法三： 设置请求头 setRequestHeader(‘If-Modified-Since’,’0’);
每次发送ajax请求时，设置请求头，表示当前被缓存的资源的最后修改时间为0，服务器会用这个‘0’与被请求资源的最后修改时间进行比较，因为是不同的，所以会将最新的结果返回
只产生一个缓存文件。一直是最新的缓存文件
解决方法四： 设置响应头 header(‘Cache-Control:no-cache,must-revalidate’);(header放在输出前)
在php服务器端禁用缓存的方式，请求一次后，会自动在客户端生成一个过期缓存文件，所有下次访问时，这个缓存文件过期了，必须重新发送请求。
扩展知识
Return 表示将结果返回给PHP程序本身
Echo 输出语句，利用http响应(利用http机制)将数据写在响应空白行的下面
六、JSON的使用（是在PHP中使用的）（ajax中数据信息交换只有JSON和XML两种方式）
1、什么是JSON：在JSON中，对象是属性的无序集合（对象由属性构成，这些属性是无序的）
基于JavaScript语言的轻量级的数据交换格式(JavaScript Object Notiation)
2、语法：var obj={属性名：值，…}; obj则称为JSON对象；
a) JSON对象的本质其实是Object系统类的一个实例
b) 补充：属性名的定义时，可以使用单引、双引、或不用引，三种格式；
3、JSON的使用
a) 使用JSON表示一个人的信息
i. 例：var obj = {name:’mark’,age:21};
b) JSON数组
i. var obj = [{‘name’:’lily’,’age’:21},{‘name’:’mark’,’age’:21},{‘name’:’ton’,’age’:21}]
每一个数组元素都是一个JSON对象
4、在PHP中使用JSON
a) 生成JSON：首先要有一个数组或对象。
i. json_encode($arr);把数组变成JSON对象
ii. 补充：JSON中的中文只能保存utf-8编码格式
b) 解析JSON：首先有一个json字符串。
i. json_decode($json，true);将JSON字符串解析成数组格式
ii. true表示解析到一个数组中；false表示将数据解析到一个对象中（默认）

六、JSON的使用（是在PHP中使用的）（ajax中数据信息交换只有JSON和XML两种方式）

1、什么是JSON：在JSON中，对象是属性的无序集合（对象由属性构成，这些属性是无序的）
基于JavaScript语言的轻量级的数据交换格式(JavaScript Object Notiation)
2、语法：var obj={属性名：值，…}; obj则称为JSON对象；
a) JSON对象的本质其实是Object系统类的一个实例
b) 补充：属性名的定义时，可以使用单引、双引、或不用引，三种格式；
3、JSON的使用
a) 使用JSON表示一个人的信息
i. 例：var obj = {name:’mark’,age:21};
b) JSON数组
i. var obj = [{‘name’:’lily’,’age’:21},{‘name’:’mark’,’age’:21},{‘name’:’ton’,’age’:21}]
每一个数组元素都是一个JSON对象
4、在PHP中使用JSON
a) 生成JSON：首先要有一个数组或对象。
i. json_encode($arr);把数组变成JSON对象
ii. 补充：JSON中的中文只能保存utf-8编码格式
b) 解析JSON：首先有一个json字符串。
i. json_decode($json，true);将JSON字符串解析成数组格式
ii. true表示解析到一个数组中；false表示将数据解析到一个对象中（默认）

七、利用JSON传递数据

a) 在程序中，php服务器向客户端返回多个数据，可以使用JSON
b) 语法：var json = eval(‘(‘+xhr.responseText+’)’);将Ajax对象的返回值包装成一个json对象