ajax简介

2018-06-24 00:50:57来源：未知阅读 ()

刚好遇到ajax方面的问题，所以写点简单的感悟，内容可能比较基础，高手越过,以下都是手打，如果有讲错的地方欢迎指正

1.AJAX简介

在传统的客户端服务器模式中，比如一个登录或注册的场景，我们在客户端输入了用户名和密码，浏览器会将这些信息提交给服务器，然后等着服务器端响应完成，才会给我们返回，客户端在这个过程中，只能等着，不能去做其他，这就是传统的同步模式。

显然，这种模式下，用户的体验度不会很好，而且js的资源浪费了，所以我们考虑能不能让浏览器在用户不知情的情况下，偷偷的将数据传输给服务器，然后去做别的，等服务器的数据过来后，再来做相应的处理，这样就不会打断其他业务，同时给用户以更好的体验。所以，这个时候ajax出来了，ajax一出来就收到业界的追捧，几乎现在的网站中随处可见ajax的声影,现在自己的网站中没有ajax都好像自己不是做前端开发的(hahahaha)

2.AJAX 个人见解（代码层面）

关于定义什么的，我这里就不多说了，百度百科里面有，而且比我说的更专业，我这里主要谈下我对ajax的简单认识，我觉得ajax在代码上的实现，最主要的一块就是关于如何实现异步的，这里我觉得是通过事件监听来实现的，主要是onreadystatechange来实现的，客服端给服务器发送消息后，服务器状态改变是，会触发onreadystatechange 方法，

所以当readystate改变的时候，就会触发该事件，换句话说当服务器那边状态没改变的时候，不触发该事件，我们就可以正常执行其他业务，一旦该事件触发，我们这时才需对状态吗解析，在这里我们更关心readystate=4 和status=200的情况，这表示服务器响应并且成功处理了我们发送的数据，这个时候我们就可以对返回的数据进行解析，做我们要做的事情，比如绑定DOM，构建对象等，，，，

3.AJAX代码（原生js）

ajax实现代码
var xhr = null;  //申明一个变量，用来存储xhr对象
if(XMLHttpRequest){
       xhr = new XMLHttpRequest();
}else{
     xhr = new ActiveXObject('Microsoft.XMLHTTP)
}
//开始想服务器发数据
//get
xhr.open('GET','test.php?txt=123',true);
xhr.send(null);
//Post
xhr.open('POST','tset.php',true);
xhr.setRequestHeader('Content-type','application/..');
xhr.send('txt=123&v=2');



//监听事件
xhr.onreadystatechange = function(){
  //服务器
     if(xhr.readystate == 4){
           if(xhr.status == 200){
              //服务器端处理成功
               var data = xhr.responseText;//接受服务器发送过来的数据
              }
           else{
              //服务器端处理失败或其他原因导致失败
             }
     }
}