温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js中Ajax的作用、优缺点以及实例用法

发布时间:2021-09-09 09:09:45 来源:亿速云 阅读:384 作者:chen 栏目:web开发

本篇内容主要讲解“js中Ajax的作用、优缺点以及实例用法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“js中Ajax的作用、优缺点以及实例用法”吧!

js中的Ajax总结.
一.ajax的作用:
1.就是让js去读服务器上面的数据.
2.无刷新的情况下读取服务器上面的数据,例如:验证账号和密码是否正确等.
(1)ajax的优点:
1.减少冗余请求和响应对服务造成的负担.
2.无刷新更新页面,带来更好的用户体验.
3.减轻服务器速写的负担,节约空间和宽带租用成本。
4.采用异步提交,读写速度更快.
(2)ajax的缺点:
1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性

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

  2. 对流媒体还有移动设备的支持不是太好等.
    二. 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      (完成)响应内容解析完成,可以客户调用了
同步请求:发生请求后,要等待服务器执行完毕才继续执行当前代码。

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

到此,相信大家对“js中Ajax的作用、优缺点以及实例用法”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI