AJAX笔记

AJAX: Asynchronous JavaScript And XML

ajax的最大优点:再不需要重新加载整个页面的情况下，可以和服务器交换数据更新部分页面内容

ajax不是新的语言 只是一种标准的新方法.ajax使用与浏览器平台无关.

XMLHttpRequest 是AJAX的基础

1、创建XMLHttpRequest对象 

var xmlReq = new XMLHttpRequest();

使用的如果是老版的IE浏览器 创建ActiveX():   var xmlReq = new ActiveXObject("Microsoft.XMLHTTP");

使用ajax之前判断是支持XMLHttpRequest对象

var resReq;
if(window.XMLHttpRequest){
 //IE7+, current popular browser
 resReq = new XMLHttpRequest();
}else{
 resReq = new ActiveXObject();//IE5 IE6
}

2、向server发送请求 open() 和 send() 方法

resReq.open("GET|POST","url",isAsynchronous)  参数:  请求方式  请求资源的url  是否是异步

resReq.send(["data"]) 将请求发送给服务器  参数data仅适用于post请求   data如:   fname=mill&lname=dock[&]* 

get请求和post请求-->选取

• 在jQuery笔记讲过 post使用 无法使用缓存文件
• get发送的数据有数据量限制  所以当数据量大的时候 使用post请求
• 用户输入如果有未知字符的时候  使用post比get更可靠和稳定

resReq.open("get","url",true);简单的get请求  resReq.send();

使用post方法，可以添加http头部在send之前调用  resReq.setRequestHeader("headerName","value");

如果isAsynchronous == true  则说明要异步加载  否则 说明要同步加载

3、服务器响应

获取响应  从请求对象中获取  

resReq.responseText  获取文本格式(字符串)的响应数据 -->可以直接使用 输出嵌入HTML文档内

resReq.responseXML 以XML格式的响应数据 --->需要对XML对象解析再嵌入

var xmlContent = resReq.responseXML;
var content = '';
var x = xmlContent.getElementByTagName("tagName");//tagName 是XML文件内部自定义的标签
 for(var i=0;i<x.length;i++){
 content += x[i].childNodes[0].nodeValue;
}//code to use content

4、onreadystagechange事件

当请求发送到服务器，获取响应 readyState就会改变 触发该事件

XMLHttpRequest对象属性: 

onreadystatechange()函数  

readyState 存储请求对象的状态  0:请求未初始化 1:服务器连接建立 2:请求已被接受 3:请求正在被处理 4:请求完成相应就绪

status 响应状态  200: 表示成功   404:表示页面没有被找到

服务器常用状态码:   

200:响应正常

304 资源在上次请求之后没有被修改(用于浏览器缓存机制)

400 无法找到请求的资源

401 访问资源权限不够

403 没有权限访问资源

404 没有找到要找的资源

405 请求的资源被禁止

407 访问的资源需要代理身份验证

414 请求URL太长

500 服务器内部错误

故而一般都是 readyState为 4 且 status 为200 的时候 表示相应已经就绪

如果网站上有多个ajax任务 ，可为 XMLHttpRequest分配回调函数