[妙味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 :异步，非阻塞（一般使用此方法）,setTimeout也是异步的

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

 

3、发送请求（＝回车）

　　// 如果要向表单post那样提交，需要使用setRequestHeader()添加HTTP表头，然后在 send() 方法中规定您希望发送的数据

　　// xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

　　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);
         }
    }  
}

 

　　reposeText是string类型，如果数据是类似json和数组的样子，则需要转换将string-->json/数组

　　　　alert(JSON)  //注意：全是大写，ie7和ie6不支持JSON这个对象，解决方法:访问json官网json.org,下载javscript-->json2.js，把json2.js链接到页面

　　　　json2.js提供两个方法：

　　　　　　stringify：json/数组-->string,使用JSON.stringify()

　　　　　　parse：string-->json/数组,使用JSON.parse(),如是json，名称需要用“”括起来（严格模式），即json = '{"age",10}'

 

post和get需要的注意事项

　　get:

　　1 、在IE中有缓存问题，因此需要在后面加上一个随机数/时间戳，即Math.random()/new Date().getTime()

　　　　例如:'test.php?username=joya&age=10&' + newDate().getTime(),注:时间戳前面必须加上&

　　2、如果有中文，存在编码问题，需要转码，即:encodeURI()

　　　　例如:'test.php?username='+encodeURI('叶子')+'&age=10&' + newDate().getTime()

 

　　post：

　　1、不存在缓存和编码问题

　　2、发送请求头，申请发送的数据类型

　　　　xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

　　　　数据是放在send()中作为参数传递,即：send('username=joya&age=10')