ajax学习笔记

一、创建对象

       在IE6版本及以下IE版本不存在XMLHttpRequest（），但是内置有处理ajax的插件，使用ActiveXObject('Microsoft.XMLHTTP')即可，括号里的内容为调用插件的名称。

       必须做以下处理才能兼容

      方法1、判断语句

           if(window.XMLHttpRequest){

                xhr=new XMLHttpRequest();
            }else{
               xhr=new ActiveXObject('Microsoft.XMLHTTP');
            }

         (注意：由于在IE6中不存在XMLHttpRequest（），所以if语句后面不能直接判断XMLHttpRequest（），不然会报错，前面加上window，返回的是一个空的对象)

方法2、try{}catch{}捕获错误

          try{
               xhr=new XMLHttpRequest();
            }catch(e){
               xhr=new ActiveXObject('Microsoft.XMLHTTP');
            }

其中chtch（e）中的e返回的是错误类型

二、请求数据

      open（）的两个参数解析

     ⒈get与post的区别

            get： ⑴数据与数据名称串联跟在url？后面传到指定页面

                       ⑵造成的缓存问题，解决办法：在url？后面加上时间戳

                       ⑶乱码，解决办法，encodeURI();

                       ⑷url长度限制的原因，不要用get传递过多的数据

           post：⑴以请求头的方式获取数据

                       ⑵数据在send（）里发送，在发送前申明发送的数据类型

                       ⑶不缓存

     ⒉true与false

           true:异步（前面的代码不会影响到后面代码的执行）

          false:同步（后面代码必须要等前面代码运行结束才能运行）

三、返回内容

readyState：ajax工作状态（5个）

        0：请求未初始化

        1：服务器连接已建立

        2：请求已接受

        3：请求处理中

        4：请求已完成，响应已就绪

responseText：ajax请求的内容就放在这个属性下面

status：服务器返回状态，http状态码

       1开头：消息类

      2开头：成功类

      3开头：重定向（缓存也包括在内）

      4开头：错误

      5开头：服务器，错误

四、数据处理

     JSON里的stringify方法和parse方法可完成对象和字符串的互相转换，但在IE7及以下没有JSON对象可以下载JSON2.js并引入使用

       stringify方法：将对象转换为字符串

       例如：var arr=[1,2,3]；
                  alert(JSON.stringify(arr));

                 输出：[1,,2,3];

      parse方法： 将字符串转换为对象
                var json='{"left":100}';
                var a=JSON.parse(json);
               alert(a.left);

输出：100；

五、ajax函数的封装及调用

封装：

function ajax(method,url,date,success){
			var xhr=null;
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
               xhr=new ActiveXObject('Microsoft.XMLHTTP');
			}
			if(method=='get'&&date){
                 url+='?'+date;
			}
			xhr.open(method,url,true);
			if (method=='get') {
				xhr.send();
			}else{
                xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
				xhr.send(date);
			}
			xhr.onreadystatechange=function(){
                	if(xhr.readyState==4&&xhr.status==200){
                		
                		success&&success(xhr.responseText);
                	}else{
                		alert("出错了，错误："+xhr.status)
                	}
			}

		}

调用：

ajax('get','text.php','',function(date){
				var data=JSON.parse(date);
                		var oUl=document.getElementById('uli');
                		var html="";
                		for(var i=0;i<data.length;i++){
                			html+='<li><a href="">'+data[i].keai+'</a>[<span>'+data[i].date+'</span>]</li>';
                		}
                		oUl.innerHTML=html;
			})