js中的Ajax总结.

Posted 2020-06-17

一.ajax的作用:

    1.就是让js去读服务器上面的数据.

    2.无刷新的情况下读取服务器上面的数据,例如:验证账号和密码是否正确等.

   (1)ajax的优点:

    1.减少冗余请求和响应对服务造成的负担.

    2.无刷新更新页面,带来更好的用户体验.

    3.减轻服务器速写的负担，节约空间和宽带租用成本。

    4.采用异步提交,读写速度更快.

   (2)ajax的缺点：

   1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性

   2. AJAX只是局部刷新,所以页面的后退按钮是没有用的.

   3. 对流媒体还有移动设备的支持不是太好等.

二. Get 和Post的区别:

     get方式:常见的表单提交方式:将值在url后面提交;?名字=值&名字=值格.

      提交表单例子:

     <form  action="www.baidu.com " method="get" (默认是get方式)>

      姓名:<input type="text" name="userName"></br>

      密码:<input type="password" name="password">

     <input type="submit" value="提交">

      </from>

     区别: 

     1.get方式是通过网址进行传递数据的,post是通过http中Content进行传递的.

     2.get容量小,不适合传递大数据,(一般4k-10k),post方式容量相对大很多,一般服务器可以达到2G容量.

     3.对于太大的文件,就不会走post,走控件.

     4.get方式安全性差,post相对来说会好一点,一帮安全只能走https.

     5.get方式是有缓存的,post没有缓存. get更适合向服务器获取数据,post更适合向服务器传递数据,

三:编写一个Ajax:

   1.创建一个ajax对象, 2.链接到服务器, 3.发送请求 , 4.接收返回值,

   (1)  创建一个ajax对象

         var  oAjax  = new  XMLHttpRequest()//不支持IE6

          var  oAjax  = new  ActiveXObject ("microsoft.XMLHTTP");//支持IE6

     解决兼容性:

            if(window.XMLHttpRequest)

             {

             var  oAjax   = new XMLHttpRequest();

              }else{

              var  oAjax   = new  ActivexObject("Microsoft.XMLHTTP"):

               }

         为什么要用window.XMLHttpRequest作为参数,应为直接XMLHttpRequest做条件,IE6会直接报错,

         但是把XMLHttpRequest作为属性,IE只会报undefined刚好满足我们的条件.

     (2)链接服务器

      oAjax.open(‘Get‘,url,true)

      同步:一步步来.

      异步:多件事一起来.

    (3)发送请求

      oAjax.send();

    (4)接受返回

       oAjax.onreadystatechange = function()

      { 

                 //浏览器和服务器进行到哪一步了.

           if(oAjax.readyState==4)//读取完成

            { 

                 if(oAjax.status==200)//读取成功

                 {

                       fnSuccess(oAjax.responseText)

                 }else

                     if( fnfaild)

                      {

                         fnfaild(oAjax.status);

                       }

                        

                 }

             } 

      }

    

readystatus	描述
0	(未初始化)还没有调用open()方法
1	(载入)一调用send()方法,怎在发送请求
2	(载入完成)send()方法完成,已收到全部响应内容
3	(解析)正在解析响应内容
4	(完成)响应内容解析完成,可以客户调用了

        同步请求：发生请求后，要等待服务器执行完毕才继续执行当前代码。

        异步请求：发生请求后，无需等到服务器执行完毕，可以继续执行当前代码。