ajax学习笔记

对象的创建：

var xhr = null;
if(window.XMLHttpRequest){//必须要有window，对象不存在时会出错，但是属性不存在时，不会出错
   xhr=new XMLHttpRequest();
}else{
  xhr=new ActiveXObject('Microsoft.XMLHTTP');//兼容IE7以下
     }

或者使用try  catch语句

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

responseText中的内容格式是字符串

window.onload = function(){
	var oBtn = document.getElementById('btn');
	oBtn.onclick = function(){
		    var xhr = null;
//                  if(window.XMLHttpRequest){
//                  	xhr=new XMLHttpRequest();
//                  }else{
//                  	xhr=new ActiveXObject('Microsoft.XMLHTTP');
//                  }
                    
                    try{
                    	xhr=new XMLHttpRequest();
                    }catch(e){
                    	xhr=new ActiveXObject('Microsoft.XMLHTTP');
                    }
		   xhr.open('get','1.txt',true);//1.txt中的内容是[1,2,3,4,5]
		   xhr.send();
		   xhr.onreadystatechange = function(){
		           if(xhr.readyState==4){
		               alert(xhr.responseText);//[1,2,3,4,5]
		               alert(xhr.responseText[0]);//[
		               alert(typeof xhr.responseText);//string
		               alert(eval(xhr.responseText)[0]);1
			    }
			}
		}
	}

post方式:

window.onload = function() {
	
	var oBtn = document.getElementById('btn');
	
	
	oBtn.onclick = function() {
		
		var xhr = null;
		try {
			xhr = new XMLHttpRequest();
		} catch (e) {
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}
		
		xhr.open('post','2.post.php',true);
		//post方式，数据放在send()里面作为参数传递
		xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
		//post没有缓存问题
		//无需编码
		xhr.send('username=刘伟&age=30');
		
		xhr.onreadystatechange = function() {
			
			if ( xhr.readyState == 4 ) {
				if ( xhr.status == 200 ) {
					alert( xhr.responseText );
				} else {
					alert('出错了,Err：' + xhr.status);
				}
			}
			
		}
		
	}
}

get方式：

window.onload = function() {
	
	var oBtn = document.getElementById('btn');
	
	
	oBtn.onclick = function() {
		
		var xhr = null;
		try {
			xhr = new XMLHttpRequest();
		} catch (e) {
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}
		/*
			1.缓存 在url？后面连接一个随机数，时间戳
			2.乱码 编码encodeURI
		*/
		xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
		xhr.send();
		
		xhr.onreadystatechange = function() {
			
			if ( xhr.readyState == 4 ) {
				if ( xhr.status == 200 ) {
					alert( xhr.responseText );
				} else {
					alert('出错了,Err：' + xhr.status);
				}
			}
			
		}
		
	}
}

get和post方式区别：

get有缓存，post没有；

get参数放在地址栏，post参数放在send()函数中；

get存在编码问题，post要设置请求头