Ajax 初探

245 阅读7分钟

前言

AJAX:Asynchronous Javascript And XML(异步JavaScript和XML)

  • AJAX 就是浏览器提供的一套 API,可以通过 JavaScript 调用,从而实现通过代码控制请求与响应。实现通过 JavaScript 进行网络编程。
  • XML:最早在客户端与服务端之间传递数据时所采用的数据格式

MND 对 Ajax 的解释:

其本身不是一种新技术,而是一个在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。

尽管X在Ajax中代表XML, 但由于JSON的许多优势,比如更加轻量以及作为Javascript的一部分,目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。


工作原理

1. 包含的技术

AJAX是基于现有的Internet标准,并且联合使用它们:

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

2. 工作原理

通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。

16eef6e36c1ae4ee

Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。
并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎,用户操作起来也就感觉更加流畅了。

16eef6e36c1ae4ee

3. 浏览器普通的交互方式:

16eef6e36c1ae4ee

4. 浏览器通过Ajax的交互方式:

16eef6e36c1ae4ee

5. 同步与异步

异步传输是面向字符的传输,它的单位是字符;

同步传输是面向比特的传输,它的单位是帧,它传输的时候要求接受方和发送方的时钟是保持一致的。

16eef6e36c1ae4ee

同步的话,必须这个操作完了才会执行下一步,在等待期间浏览器会挂起不能执行任何接下来的js代码

异步则是 “告诉” 浏览器去做, “告诉” 是一瞬间的事情,然后就继续执行下一步了,等到结果返回来了,浏览器会通知js执行相应的回调。

Ajax初体验

在 jQuery 中封装了一套 Ajax 方法

jQuery 中使用 Ajax:直接用 $ 打点调用 ajax 方法,Ajax方法中的数据是对象格式,写在花括号内部

语法

$.Ajax({});

示例

    <script type="text/javascript">
    //  jQuery中调用 Ajax 方法
    $.ajax({
        // 请求的数据接口
        url: "https://jsonplaceholder.typicode.com/users",
        // 向服务器开启请求的方式
        type: "GET",
        // 定义获取到的数据类型:json 数据格式
        dataType: "json",
        // data: 获取到的数据,可以对其进行数据过滤,只拿自己想要的某条数据
        data: { "id": 1 },
        // 请求成功之后的操作:执行回调函数。函数可以传参:data:获取到的数据 
        success: function (data) {
            console.log(data);
        }
    });
    </script>

原生 JS 实现 Ajax 请求

实现步骤

  • 第一步,创建 XMLHttpRequest 对象(浏览器兼容性)
  • 第二步,注册回调函数
  • 第三步,创建请求,指定请求类型、地址、异步/同步
  • 第四步,发送请求
  • 第五步,异步获取响应数据
  • 第六步,利用js与DOM进行页面局部刷新

示例(不兼容 IE6)

<script type="text/javascript">
    //  创建 XMLHttpRequest 类型的请求对象
    let xhr = new XMLHttpRequest();
    // 打开一个与请求网址之间的连接
    xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
    // 项服务器发送请求
    xhr.send(null);
    // 指定 xhr 状态变化事件 处理函数
    xhr.onreadystatechange = function () {
        // 通过 xhr 状态码返回值 判断是否请求成功
        if (xhr.readyState === 4) {
            // responseText 获得字符串形式的响应数据
            console.log(this.responseText);
        }
    }
</script>

示例(浏览器兼容写法)

<script type="text/javascript">
    // 创建一个空对象
    var xhr = null;
    // 浏览器能力检测
    // 判断 window 对象中是否有 XMLHttpRequest 对象
    if (window.XMLHttpRequest) {
        // 兼容标准浏览器
        xhr = new XMLHttpRequest();
    } else {
        // 兼容 IE6 
        xhr = new ActiveXObject("Microsoft.XMLTHTTP");
    }


    // 打开一个与请求网址之间的连接
    xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
    // 向服务器发送请求
    xhr.send(null);
    // 指定 xhr 状态变化事件 处理函数
    xhr.onreadystatechange = function () {
        // 通过 xhr 状态码返回值 判断是否请求成功
        if (xhr.readyState === 4) {
            // responseText 获得字符串形式的响应数据
            console.log(this.responseText);
        }
    }
</script>

xhr对象(XMLHttpRequest)

XMLHttpRequest 是 Ajax 的核心对象,向服务器发送请求和解析服务器响应提供了流畅的接口;一个 XMLHttpRequest 类型,所有的Ajax操作都用到这个类型。

XMLHttpRequest 对象中包含了属性和方法。

方法

1. open() 方法

作用:请求初始化

本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段,所以我 们发送出去的请求仍然是 HTTP 请求,同样符合 HTTP 约定的格式。

语法

xhr.open(method, url, async, user, assword)

参数属性

method:要使用的HTTP的请求方法:GET、POST、PUT、DELETE

URL:要向其发送请求的 URL 地址,字符串格式

async:是否异步请求 传布尔值,默认 true 异步如果采用同步方式执行,则代码会卡死在 xhr.send() 这一步

user: 用户名,可选参数,为授权使用;默认参数为空string

password: 密码,可选参数,为授权使用;默认参数为空string

====================================

请求方式: 常用请求方式 GETPOST

a. 使用 GET 请求

open() 方法使用 GET 方法请求时,不需要设置请求头 setRequestHeader()方法;如果传参,直接写在网址中,如果不需要传参,可以在 send() 方法中传 null

示例

    // 2. 初始化请求
    xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
     // 3. 发送请求
    xhr.send(null);

b. 使用 POST 请求

使用 GET 方法请求时,需要通过 setRequestHeader() 方法设置请求头(setRequestHeader 请求头需要设置在 open 方法和 send 方法之间

语法

xhr.setRequestHeader(header, value);

参数

header: 一般设置 “Content-Type”,传输数据类型,即服务器需要我们传送的数据类 型

value: 具体的数据类型,常用 "application/x-www-form-urlencoded" 和 "application/json"。

示例

    
    // 2. 初始化请求
    xhr.open("POST", "https://jsonplaceholder.typicode.com/users");
    // POST 请求必须设置请求头
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    // 3. 发送请求
    // POST 请求需要使用 send 方法传参
    xhr.send("name=tom&age=19");

2. send() 方法

作用:用于发送 HTTP 请求

语法

xhr.send(body);

参数

body: 在 XHR 请求中要发送的数据体,根据请求头中的类型进行传参。

参数为发送的请求体,不传请求体的话最好传个null

属性

  • readyState 属性

readyState 是 XMLHttpRequest 对象的一个属性,用来标识当前 XMLHttpRequest 对象代理当前处于什么状态。 readyState 属性总共有5个状态值,分别为0~4,每个值代表了不同的含义:

readyState状态描述
0UNSENT(未打开)open()方法还未被调用
1OPENED(未发送)open()方法已经被调用
2HEADERS_RECEIVED(已获取响应头)send()方法已经被调用,响应头和响应状态已经返回
3LOADING(正在下载响应体)响应体下载中;responseText中已经获取了部分数据
4DONE(请求完成)整个请求过程已经完毕

回调函数

XMLHttpRequest 代理在每个状态发生改变时都会触发 onreadystatechange 事件,监听 readystate 的变化,用一个函数来处理这个变化。

数据处理格式 JSON

处理数据的数据格式有 XMLJSON

  • XML

是一种数据描述手段, 基本已经被淘汰。

原因:
1.数据冗余太多,元数据占用的数据量比较大,不利于大量的数据传输
2.解析比较复杂,在其他语言中解析内部数据时方法比较复杂

  • JSON

工作中使用的较多的就是 json

JOSN: JavaScript Object Notation,JavaScript 对象表示法

json 也是一种数据描述手段,类似于 JavaScript 字面量方式

服务端采用 JSON 格式返回数据,客户端按照 JSON 格式解析数据

SJON 数据格式和 JS 对象字面量书写格式相似,但是有所区别

  1. JSON 数据不需要存到变量中
  2. JSON 数据存放在.json文件中,数据书写在花括号内部,结束时不需要加 ; 分号
  3. JSON 数据中的属性名必须用引号 "" 包裹起来,属性值可以根据数据类型自定义

方法

原生 JS 封装中了 JSON 对象,用力来处理数据格式,其中有两个方法:stringifyparse

1. stringify() 方法

将 js 对象字面量 转换 为 字符串

语法

JSON.stringify(obj);

示例

    // 创建 js 对象字面量
    var obj = {
        name: "tom",
        age: 19,
        friend: {
            name: "jack"
        }
    };
    // 创建字符串
    var str = '{ "name": "lili", "age": 18 }';

    // 使用 JSON 方法对数据进行格式转换
    // 将 js 对象字面量 转换 为 字符串
    var objtoStr = JSON.stringify(obj);
    console.log(objtoStr); // {"name":"tom","age":19,"friend":{"name":"jack"}}
    console.log(objtoStr.name); // undefined

2. parse() 方法

将一个对象格式的字符串转换成了 对象,就可以操作其中的属性

语法

JSON.parse(str);

示例

    // 创建 js 对象字面量
    var obj = {
        name: "tom",
        age: 19,
        friend: {
            name: "jack"
        }
    };
    // 创建字符串
    var str = '{ "name": "lili", "age": 18 }';

    // 使用 JSON 方法对数据进行格式转换
    // 将一个对象格式的字符串转换成了 对象,就可以操作其中的属性
    var strtoObj = JSON.parse(str);
    console.log(strtoObj); // obj 对象
    console.log(strtoObj.name); // lili

借鉴 K_ON