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基本使用的四个步骤,之后就是可以对于这个步骤进行一些简化和更高阶的使用.

阅读 586

一步一步学技术,踏踏实实涨经验,兴趣广泛,广交好友,希望大家多多指正/批评.

71 声望
5 粉丝
0 条评论

一步一步学技术,踏踏实实涨经验,兴趣广泛,广交好友,希望大家多多指正/批评.

71 声望
5 粉丝
文章目录
宣传栏