ajax

01.ajax简介

AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

02.ajax的优点

• 通过异步模式，提升了用户体验
• 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
• Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载

03.ajax的缺点

• ajax不支持浏览器back按钮。
• 安全问题 AJAX暴露了与服务器交互的细节。
• 对搜索引擎的支持比较弱。
• 破坏了程序的异常机制。
• 不容易调试。

04.原生js实现ajax步骤

• 1.根据浏览器创建ajax对象
  IE浏览器(IE5和IE6):var xhr=new ActiveXObject('Microsoft.XMLHTTP')
  其他浏览器:var xhr=new XMLHttpRequest()
• 2.规定请求的类型、URL 以及是否异步处理请求 xhr.open(请求方法,请求地址,异步/同步)
• 3.将请求发送到服务器
  get请求:xhr.send()
  post请求: 需要设置请求头再发生
  xhr.setRequestHeader('Content-type','application/x-www-form/urlencoded')
xhr.send(数据)
• 4.通过onreadystatechange事件监听readyState和status
  每当 readyState 改变时，就会触发 onreadystatechange 事
  xhr.onreadystatechange=function(){}
readyState:
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成，且响应已就绪
  status:
  200: “OK”
  404: 未找到页面
• 5.readyState 等于 4 且状态为 200 时，表示响应已就绪，执行回调函数
  if(xhr.readyState==4&&status==200){执行回调函数}

05.使用原生js实现ajax

var obj={
	url:'',
	type:'',
	data:,
	success:function(data){
		
	},
	error:function(){
	
	}
}
function ajax(obj){
	//创建ajax对象
    var myajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
    //get请求
    if(obj.type.toLowerCase()=='get'){
    	//如果有数据就拼接url
        var url=obj.data?obj.url+'?'+obj.data:obj.url;
        myajax.open('get',url);
        myajax.send();
    }
    //post请求
    if(obj.type.toLowerCase()=='post'){
        myajax.open('post',obj.url);
        //设置请求头
        myajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        obj.data?myajax.send(obj.data):myajax.send()
    }
    myajax.onreadystatechange=function(){
        if(myajax.readyState==4&&myajax.status==200){
        	//请求成功执行成功回调函数
            obj.success(myajax.response);
        }else{
        	//请求失败，如果有error函数就执行，没有就不执行
            obj.error&&obj.error();
        }
    }
}

部分内容参考自：参考