关于前端:Ajax初步学习01

本文用于记录关与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根本应用的四个步骤,之后就是能够对于这个步骤进行一些简化和更高阶的应用.

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据