AJAX的基本概念和实现
编辑时间:2019-03-09 14:51:19 作者:666666

A. AJAX是什么?

英文: Asynchronous Javascript And XML
简写: AJAX(异步无刷新技术)

描述:
   通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

作用:
    1. 异步与服务器通信
        减少不必要的数据传输、时间及降低网络上数据流量
    2. 无刷新更新数据
    3. 按需请求
        AJAX 并不适合大量的数据交互
        建议: 保持小量传输

B. 页面

每一次HTTP请求,我们都从服务器获取了整个页面的数据。

假设我们做个体育网站,通常需要经常更新比分,比如勇士VS骑士。按照以前的方式,就是不断地刷新页面,不断地请求服务器,比分才得以更新,而通常我们需要更新的仅仅是比分数据,其他的数据压根不需要改变。不断地刷新页面,不断地请求服务器带来的就是对人力财力资源的严重资源浪费。

于是机智的人类,就想,能不能通过一种方式,在不刷新页面的情况下,数据也能得到更新呢?此时AJAX就诞生了。

AJAX的本质,就是在同一个页面,发起多个HTTP请求,只不过就是由开发者通过代码去实现。

C. 实现步骤

1. 实例化对象
    `var ajax = new XMLHttpRequest();`

2. 建立连接
    * 调用open()方法并不会真正发送请求,而只是启动一个请求准备发送

    ajax.open(method,url,async)

        method: 请求的类型;GET 或 POST
        url: 文件在服务器上的位置
        async: true(异步) 或 false(同步)

3. 发送请求
    ajax.send([string])
    string: string 参数仅用于 POST 请求

4. 准备事件
    ajax.onreadystatechange
        每当 readyState 改变时,就会触发 onreadystatechange 事件。

    监听状态
        status
            200: "OK"
            404: 未找到页面
            http请求状态码
                2xx - 成功
                304
                    状态代码为304表示请求的资源并没有被修改,可以直接使用浏览器缓存的数据
                4xx - 错误
        readyState
            0: 请求未初始化
            1: 服务器连接已建立
            2: 请求已接收
            3: 请求处理中
            4: 请求已完成,且响应已就绪

        `把请求比喻"打电话",status 就相当于你拨打的电话号码是否正确,号码正确时,对方是否直接挂掉你的电话,200就是一切正常,电话拨通了,404就是你的电话号码错误,403就是对方直接拒绝接听。`

5. 响应
    响应主体内容会保存到 ajax.responseText 中

D. 摸清 ajax.open 中的参数

ajax.open(method,url,async)
    1. async: 是否启用异步
        true
            表示异步,发生请求后,无需等到服务器执行完毕,可以继续执行当前代码
        false
            表示同步,发生请求后,要等待服务器执行完毕才继续执行当前代码。

    2. method: 设置请求方式
        1. post
            * 告诉浏览器,使用 urlencoded 格式发送数据
            ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            * urlencoded 格式
            ajax.send('key1=val1&key2=val2');

        2. get
            * get 方式是通常URL将数据传递

            ajax.send();

    3. url: 请求地址


* ajax函数
    自定义成函数,方便不同请求执行不同操作

 点赞 4
 收藏 0
 分享
来说两句吧
最新评论
    暂无评论
天气预报
万年历
2015年
7月
返回今天

博客声明

本博客属个人所有,不涉及商业目的。遵守中华人民共和国法律法规、中华民族基本道德和基本网络道德规范,尊重有节制的言论自由和意识形态自由,反对激进、破坏、低俗、广告、投机等不负责任的言行。所有转载的文撰写页面章、图片仅用于说明性目的,被要求或认为适当时,将标注署名与来源。避免转载有明确“不予转载”声明的作品。若不愿某一作品被转用,请及时通知本人。对于无版权或自由版权作品,本博客有权进行修改和传播,一旦涉及实质性修改,本博客将对修改后的作品享有相当的版权。二次转载者请再次确认原作者所给予的权力范围。

本博客所有原创作品,包括文字、资料、图片、网页格式,转载时请标注作者与来源。非经允许,不得用于赢利目的。本博客受中国知识产权、互联网法规和知识共享条例保护和保障,任何人不得进行旨在破坏或牟取私利的行为。本博客声明以简体中文版为准,不对其他语言版本负责。

如有侵权请及时联系我进行处理。邮箱youseeim666@163.com