深入浅出AJAX

2017-09-13  本文已影响0人  __马帅傅__

一、什么是AJAX:

        Asynchronous JavaScript And XML (异步 JavaScript 和 XML)。

        原理: AJAX通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据。然后用   JavaScript来操作DOM更新页面。

二、基础知识回顾:

    1.表单:数据的提交

       action: 数据提交的地址,默认是当前页面;

       method: 数据提交的方式,默认是get方式;

          get: 把数据名称和数据值用=连接,如果有多个用&连接,把数据放在url?后面传到指定页面。

          post: 理论上对数据长度无限制。

        enctype: 提交的数据格式,默认为 application/x-www-form-urlencoded。

      2.请求状态监控:

        onreadystatechange事件:

         (1)readyState属性:请求状态

              0: (初始化)还没有调用open()方法;

              1: (载入)已调用send()方法,正在发送请求;

              2: (载入完成)send()方法完成,已收到全部响应内容;

              3: (解析)正在解析响应内容;

              4: (完成)响应内容解析完成,可以在客户端调用了。

          (2)status属性: 服务器(请求资源)的状态。

          (3)返回的内容:

              responseText : 返回以文本形式的内容;

              responseXML : 返回以XML形式的内容。

三、使用AJAX获取某一文本文件的内容,模拟打开浏览器浏览网页过程:

     1.打开浏览器:

     2.在地址栏输入地址:

     3.提交,发送请求:

      4.等待服务器返回内容:

四、在AJAX中get 与 post 的使用区别:

       1.get方式:

          xhr.open('get','2.get.php?username=leo&age=30&'+new Date().getTime(),true);

          缓存: 在url?后面连接一个随机数,事件戳。

          乱码: 编码 encodeURI , 如encodeURI('刘伟')。

       2.post方式:

          xhr.open('post','2.post.php',true);

          post方式,数据放在send()里面作为参数传递。

         设置申请发送的数据类型:

          xhr.setRequestHeader('content-type','application-x-www-form-urlencoded');

          post没有缓存问题,无需编码:

          xhr.send('username=刘伟&age=30');

五、AJAX方法的封装:

    1.创建一个AJAX对象,ie6以下new ActiveXObject('Microsoft.XMLHTTP')。

     2.open()方法: 参数:1.打开方式 2.地址 3.是否异步

     3.提交,发送请求 send()。

     4.等待响应。

六、AJAX的优缺点:

       优点:

               1.无刷新更新数据;

               2.异步方式与服务器通信,不需要打断用户操作,响应更加迅速;

               3.前端与后端负载平衡;

               4.基于标准被广泛支持;

               5.AJAX使web中界面与应用分离,有利于分工合作。

        缺点:

               1.AJAX干掉了Back和History功能,即对浏览器机制的破坏;

               2.AJAX不能很好地支持移动设备;

               3.客户端过肥,太多客户端代码造成开发上的成本;

               4.AJAX技术就如同对企业数据建立了一个直接通道,使得开发者在不经意间会暴露比以前 更多的数据和服务器逻辑;

               5.对搜索引擎支持较弱,如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统 的性能;

               6.违背了URL和资源定位的初衷。

上一篇下一篇

猜你喜欢

热点阅读