码迷,mamicode.com
首页 > Web开发 > 详细

(二)关于ajax那些事

时间:2016-11-23 07:57:38      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:提交   var   数据处理   发送请求   response   读取   服务器错误   网址   应用   

哈哈,今天突然兴起,想了想自己对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那些事

标签:提交   var   数据处理   发送请求   response   读取   服务器错误   网址   应用   

原文地址:http://www.cnblogs.com/Brookeshan/p/6091620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!