乐趣区

关于前端:Ajax初步学习01

jiezi

本文用于记录关与 ajax 这项技术的学习过程.

Ajax

Ajax (Asynchronous JavaScript and XML) 是一种 Web 利用技术, 能够借助客户端脚本(javascript) 与服务端利用进行 异步通信 ，获取服务端数据当前, 能够进行 部分刷新 。进而 进步 数据的响应和渲染 速度.

这就是 Ajax 的一个简略介绍, 其特点与劣势也都曾经用加粗示意.

其中异步通信, 绝对于同步通信来说,
同步通信就是当服务端正在解决一个申请时, 若客户端有其余申请要提交也只能期待;
而基于 Ajax 的异步通信就是在客户端与服务端中退出一层 Ajax 引擎(相似于池), 能够帮忙咱们实现异步的作用, 不必再是解决就期待, 会有新的申请开启一个新的线程来进行解决.

劣势:
底层异步 / 部分刷新 / 进步响应速度
劣势:
不能跨域进行拜访

利用场景:
例如: 商品零碎(淘宝京东显示商品)/ 评估零碎 / 地图零碎 …

入门实际

首先要理解 所有的 Ajax 申请都会基于 DOM(HTML 元素)事件，通过 XHR（XMLHttpRequest）对象实现与服务端异步通信部分更新

先将整体代码放在这里, 前面按步骤介绍:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 01 Page</h1>
<div>
    <!-- Ajax 形式异步申请 -->
    <fieldset>    <!-- 分组设置 -->
        <legend> 异步申请 </legend>
        <button onclick="doAjaxGet()">GET Request</button>
        <span id="ajaxResultId">loading data...</span>
    </fieldset>
</div>
<script type="text/javascript">
    function doAjaxGet(){
        //1. 创立 XHR 对象
        var xhr=new XMLHttpRequest();
        //2. 设置状态监听(将服务端响应的后果更新在 ajaxResultId 地位)
        xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){console.log(xhr.responseText);
                document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
            }
        }
        //3. 建设连贯
        xhr.open("GET","http://localhost/doGet",true);//true 示意异步(底层会启动新的线程和服务端通信)
        //4. 发送申请
        xhr.send();
        console.log("==================");
    }
</script>
</body>
</html>

1. 基于 dom 事件创立 XHR 对象(XMLHttpRequest 对象)

//1. 创立 XHR 对象
var xhr=new XMLHttpRequest();

new XMLHttpRequest()是利用 Ajax 技术的入口, 通过这个对象能够向服务端发送异步申请.

2. 注册 XHR 对象状态监听，通过回调函数 (callback) 解决状态信息

//2. 设置状态监听(将服务端响应的后果更新在 ajaxResultId 地位)
xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){console.log(xhr.responseText);
    document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
    }
}

这是在注册状态监听, 就是监听客户端和服务端通信的状态,
if 判断 –
readyState== 4 示意客户端与服务端通信完结 (0: 未初始化, 尚未调用 open() 办法;1: 启动, 曾经调用 open()办法, 但尚未调用 send()办法;2: 发送, 曾经调用 send()办法, 但尚未接管到响应;3: 接管, 曾经接管到局部响应;4: 实现, 曾经接管到全副响应数据, 而且曾经能够在客户端应用了)

status==200 示意服务端处理过程失常(500 示意服务端出错了)

responseText 示意服务端响应的文本内容

3. 创立与服务端的连贯

//3. 建设连贯
xhr.open("GET","http://localhost/doGet",true);

open()办法用于与服务端建设连贯, 并指定申请类型为 GET,true 示意异步申请(false 示意同步申请, 然而 Ajax 都是用异步)

4. 发送异步申请实现与服务端的通信

//4. 发送申请
xhr.send();

send()办法发送申请, 退出申请类型为 GET,send 办法中不传数据

以上就是 Ajax 根本应用的四个步骤, 之后就是能够对于这个步骤进行一些简化和更高阶的应用.

退出移动版