[妙味Ajax]第一课：原理和封装

知识点总结：

 ajax是异步的javascrip和xml,用异步的形式去操作xml

访问的是服务端，即https://127.0.0.1/ 或者 https://localhost

1、创建一个ajax对象（＝打开浏览器）

　　存在兼容性方面的问题

　　var xhr = new XMLHttpRequest();

　　var xhr = new ActiveXObject(‘Microsoft.XMLHTTP);   IE6

方法一：
var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}   

方法二：
var xhr = null;
try{
    //如果出错，则执行catch下的，并传入错误参数e
    xhr = new XMLHttpRequest();
    //  throw new Error(‘错误‘)，为手动报错，使用较少
} catch(e) {
    xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);  //IE6      
}

2、open方法（=在地址栏输入地址）

　　xhr.open(‘post‘,‘1.txt‘,true)

　　参数：

　　1、打开方式  

　　　　get :

　　　　　　通过url?名称=值&名称=值的方式进行传递,即url?username=joya&sex=female

　　　　　　url长度有限制，因此对传输的数据有大小限制

　　　　　　安全性问题，因为在url?后面，所以数据会被浏览器缓存起来，可以通过历史记录读取到数据

　　　　post :

　　　　　　通过表头的形式来传递，chrome需要审查元素-->network下查看,格式也是 => 名称=值&名称=值

　　　　　　长度没有限制

　　　　在php中，post方式可以用$_POST[]获取，get方式可以用$_GET[]获取，两种方式都可以获取，使用$_REQUEST[]

　　2、地址URL

　　3、是否同步  

　　　　true :异步，非阻塞（一般使用此方法）

　　　　false :同步，阻塞，前面的代码后面需要用到，此时使用同步方式

3、发送请求（＝回车）

　　xhr.send();

4、等待服务器返回内容（＝等待浏览器显示数据）

　　onreadystatechange 当readyState改变的时候触发

　　readyState 请求状态(ajax的工作状态):

　　　　0：（未初始化）还没有调用open()方法

　　　　1：（载入）已调用send()方法，正在发送请求

　　　　2：（载入完成）send()方法完成，已收到全部响应内容

　　　　3：（解析）正在解析内容

　　　　4：（完成）响应内容解析完成，可以在客户端调用

　　responseText :ajax请求返回的内容被存放在这个属性下

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4) {
        //status进行查错处理，即查服务器状态，为http状态码  
         if (xhr.status == 200 ) {
             alert(xhr.responseText);
         } else {
             alert(‘出错了，error：‘+xhr.status);
         }
    }  
}

[妙味Ajax]第一课：原理和封装,布布扣,bubuko.com

[妙味Ajax]第一课：原理和封装

原文：http://www.cnblogs.com/joya0411/p/3591505.html