首页 > 代码库 > (二)关于ajax那些事

(二)关于ajax那些事

哈哈,今天突然兴起,想了想自己对ajax的了解,来这里叙述下。心情好,嘿嘿嘿

 

ajax是一种创建交互式网页应用的网页开发技术。就是在不重新加载页面的情况下,更新部分网页。

ajax原理:ajax就是相当于在用户和服务器之间加了一个中间层,是用户操作与服务器操作相应异步化。并不是所有的用户请求都提交给服务器,像一些数据验证和数据处理等都交给了ajax引擎自己来做,只有确定需要从数据库读取数据的时候,再由ajax引擎代为向服务器提交请求。

ajax核心:通过XMLHttpRequest获取非本页内容。

ajax优势:

    1、通过异步处理的模式提升用户体验  

    2、优化浏览器与服务器之间的传输,减少不必要数据的往返,减少带宽(单位时间内通过的数据量)占用

    3、ajax引擎在客户端运行,承担一部分本来有服务器承担的任务,从而减少负载

ajax缺点:

    1、不能实时请求和响应服务器数据

    2、不支持浏览器回退功能

    3、不能提交媒体数据,图片和文件

 

原生写的ajax五部曲,必不能忘记:

    function ajax(){
      // 1.创建异步对象
      var ajaxObj = new XMLHttpRequest();

      // 2.设置url 方法
      ajaxObj.open(‘get‘,‘xxx.php‘);

      // 3.发送请求
      ajaxObj.send();

      // 4.为状态改变事件 绑定 对应的代码
      ajaxObj.onreadystatechange = function () {
        if (ajaxObj.readyState == 4 && ajaxObj.status==200) {
            // 5.在数据回来之后,修改界面的内容
            // 创建元素,添加到界面上,或者 其他的操作
            console.log(ajaxObj.responseText);
          }

      }
    }

关于readyState共有五个状态(友好网址:http://www.educity.cn/wenda/64512.html):

  0 - (未初始化)已经创建对象,还没有调用send方法

  1 - (加载)准备开始发送数据

  2 - (加载完成)已发送数据,正在等待响应返回

  3 - (交互)正在接受响应,但是接受不完整

  4 - (完成)接受响应完毕

(2、3、4都与响应挂钩,开始、过度、完成)

 

关于status :200,请求成功(友好网址:http://hibeary.iteye.com/blog/697997):

  其他:

  1xx - 信息提示 

  2xx - 成功 

  3xx - 重定向 

  4xx - 客户端错误 

  5xx - 服务器错误 

 

(二)关于ajax那些事