Ajax语法

2017-11-19

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

工作原理

创建

<script>
//1创建ajax对象
if(window.XMLHttpRequest){
	var xhr = new XMLHttpRequest;
}else{
	var xhr = new ActiveXObject('Microsoft.XMLHTTP');//兼容IE6以下版本的浏览器
};
//2链接 open()接受三个参数 请求方式 请求地址 是否是异步（同步几乎不用）
//get是把请求的数据放到地址栏上 
//post是把数据放到send上
xhr.open('get','http://test.jgw.com/ajax/test.txt');

//3发送
xhr.send();
			
//4接收
xhr.onreadystatechange=function(){
	if(xhr.readyState==4){//XHR对象的readyState属性表示请求/响应过程的当前活动阶段
//1-启动，调用了open()方法，未调用send()方法；
//2-发送，已经调用了send()方法，未接收到响应；
//3-接收，已经接收到部分响应数据；
//4-完成，已经接收到全部响应数据；

//readyState的值发生变化就会调用onreadystatechange 事件
					
        if(xhr.status==200){
	//status是状态码 200是成功 404是错误
        	alert(xhr.responseText)//responseText：响应返回的主体内容，为字符串类型
		//responseXML
	    }else{
			alert('错误'+xhr.status)
		}
	}
}
			
</script>

GET和POST

get

1、会把数据放在地址栏上 发送  
2、get的安全性能底   
3、get的大小是有限制的  
PS:get多用于获取数据

post

1、不会把数据放在地址里上  
2、安全性能高   
3、post是没有限制的  
PS:多用于发送数据的

GET—-用于获取数据（如：浏览帖子）
POST—用于上传数据（如：用户注册

封装ajax

<script>
function ajax(url, fncus, fner) {
	var xhr = new XMLHttpRequest;
	xhr.open('get', url, true); //true代表异步
	xhr.send();

	xhr.onreadystatechange = function () {
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				fncus(xhr.responseText)
			} else {
				if (fner) {
					fner('请求失败，状态码' + xhr.status)
				}
			}
		}
	}
};
ajax('http://test.jgw.com/ajax/data/0.txt', function (data) {
	console.log(data) //获取成功后打印出data 
});
</script>