ajax

Ajax:asynchronous javascript and xml,是可以与服务器进行(异步/同步)交互的技术之一

最大特点:页面不刷新

(一)ajax是xhtml css javascript xml XMLHttpRequest对象(ajax对象)其中XMLHttpRequest是ajax的官方名称

(二)使用ajax:

1.创建ajax对象

1.1 主流(火狐 谷歌)等浏览器,包括IE7以上版本的浏览器

方式：

var xhr=new XMLHttpRequest;

1.2 IE(6/7/8)版本

方式：

var xhr=new ActiveXObject("Msxml2.XMLHTTP.6.0");

1.3 区别浏览器

if(typeof XMLHttpRequest != 'undefined')
var xhr = new XMLHttpRequest;
else
var xhr = new ActiveXObject('Msxml2.XMLHTTP6.0');

2.发送对服务器的请求

//创建一个新的http请求
xhr.open(请求方式get/post,请求地址(url),异步/同步(true/false));
//发送请求
xhr.send(post请求输入要传递的数据/get请求设置null);

3.接收服务器返回的信息

3.1 浏览器可以接受的信息ajax都可以接受

3.2 ajax(XMLHttpRequest)对象的成员:

属性:

responseText 以字符串的形式接收服务器端返回的信息

readyState 表示ajax的状态值

onreadystatechange 事件,该事件可以感知ajax状态的变化

方法:

abort 取消当前请求

getAllResponseHeaders 获取响应的所有Http头

getResponseHeader 从响应信息中获取指定的Http头

open 创建一个新的http请求，并指定请求的方法和url

send 发送请求到http服务器并接收回应

setRequestHeader 单独指定请求的某个http头

3.3 ajax的五种状态(readyState)

0: 创建ajax对象完毕，但未调用open方法

1: 请求已经创建，但未调用send方法

2: 请求已经发送完成

3: 服务器的数据返回了一部分

4: 服务器的数据返回完毕，并且连接已关闭

4.get/post方式的ajax请求:

4.1 get和post的主要区别:

一.get方式给服务器传递的数据量有大小限制，在2k左右，post方式传送的数据量没有大小限制，但是在php.ini中默认上限是8M

二.post传送数据更安全

三.传送数据的方式不一样，get方式在url后以请求字符串形式传递参数，post方式是把数据以xml形式传递给服务器

4.2 ajax的get请求:

一.在url地址后以请求字符串形式处理数据，比如:

xhr.open('get','test.php?action=login');

二. 对 中文 = &等特殊字符进行处理:

在php中可以用函数urlencode()/urldecode()对特殊符号进行编码和反编码处理

在javascript中使用encodeURIComponent()对特殊符号进行编码

4.3 ajax的post请求:

一.给服务器传递数据需要调用send(请求字符串数据)

二.post模仿form表单把数据传递给服务器(设置表头)

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//写在open之后,send之前

5.同步/异步

异步:同一时间点允许执行多个进程 true(open方法中默认是true)

同步:同一时间点只允许执行一个进程 false

举例说明:当html页面中有图片进行加载时，如果ajax是异步请求，那么浏览器可以一边执行ajax一边加载图片；如果是同步请求，浏览器就必须先执行ajax之后再接着加载图片