ajax简介

刚好遇到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{
              //服务器端处理失败或其他原因导致失败
             }
     }
}

 手打太累了,我要去喝杯奶茶了,就爱原味的(hahaha),之后再来讲ajax的缺点及跨域

posted @ 2017-11-21 12:52  fandaxia  阅读(278)  评论(1)    收藏  举报