Ajax的基本认知

发送http请求的过程

如何发生的HTTP请求？

浏览器中输入网址
点击超级链接
提交表单

上面的三种请求的情况，都是让页面全部刷新，页面会进行重绘。Ajax技术会让页面局部更新，也就是HTTP请求偷偷的发出，服务器给出的响应偷偷的返回，页面局部属性

在不刷新页面的情况下，浏览器悄悄地、异步的向服务器发送HTTP请求。服务器接收到响应后，传回数据（一般是JSON数据）。浏览器接收到数据后，通过DOM进行页面的呈现

Ajax的使用场景

手机话费充值页面

当手机号码为11位之后，会发生http请求，通过视图展示手机号的状态

Ajax请求的机理

Ajax的简介

Ajax全称： Asynchronous JavaScript and XML （异步的JavaScript和XML）

XML实时老的标准，服务器在之前会返回XML，在2010年后，大家发现JSON使用更方便，所以异步返回的是JSON数据，而不是XML数据

Ajax不是一门新的语言，而是一种使用已有标准的新概念

Ajax对智能手机支持性非常好

Ajax的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 id="headline"></h1>
    <button id="btn">点击读取文本文件</button>
    <script>
        headLine = document.getElementById("headline");
        btn = document.getElementById("btn");
        // 点击事件
        btn.onclick = function() {
            // 创建一个XMLHttpRequest对象
            // 是能力检测，如果支持XMLHttpRequest就使用XMLHttpRequest否则就使用ActiveXObject
            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 配置这个xhr对象，告诉这个对象要干什么
            xhr.onreadystatechange = function() {
                // 当xhr对象状态为4的时候
                if (xhr.readyState == 4) {
                    // 让h1里面的文本为接收到的文本
                    headLine.innerHTML = xhr.responseText;
                }
            };
            // 告诉这个对象要用什么请求，请求哪个文件，是否是异步状态
            xhr.open("get", "text.txt", true);
            // 发送请求
            xhr.send(null)
        }
    </script>
</body>

</html>

此时点击读取文本文件就回获取text文件中的内容

XMLHttpRequest对象

XMLHttpRequest对象是系统内置的对象，用系统内置的构造函数new XMLHttpRequest() ,返回的对象中封装了所有的Ajax的功能

Ajax请求的第一步就是

var xhr = new XMLHttpRequest();

这个构造函数IE6不兼容，IE6使用的是：

var xhr = new ActiveXObject("Microsoft.XMLHTTP")

所以我们为了避免小众情况，做一个能力检测能力检测

// 是能力检测，如果支持XMLHttpRequest就使用XMLHttpRequest否则使用ActiveXObject
if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

此时对象创建完毕后，所有的Ajax业务都是由xhr对象来完成的

readyState状态

readyState状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤

我们看一下所有的关于readyState的状态

0 －（未初始化）还没有调用send()方法

1 －（载入）已调用send()方法，正在发送请求

2 －（载入完成）send()方法执行完成，已经接收到全部响应内容

3 －（交互）正在解析响应内容

4 －（完成）响应内容解析完成，可以在客户端调用了

当xhr.readyState发送改变的时候，会触发onreadystatechange事件。

如果readyState为4的时候，所有的解析都已经完成了，所以我们只关心readyState它为4的时候

xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            headLine.innerHTML = xhr.responseText;
        }
}

open方法

使用xhr.open()，作用是配置一个请求。一共有三个参数

第一个参数是请求的类型，值为“get”或者“post”；

第二个参数表示的请求的文件路径，我们一般写的是相对路径，为什么是相对路径？因为Ajax不能跨域，Ajax只能请求同服务器上的文件，后面我们会讲什么是跨域

第三个参数是布尔值，表示是否使用异步。如果为true，表示异步读取这个文件false表示同步读取这个文件

xhr.open("get", "text.txt", true);

send方法

使用send()方法来发出请求

send内部的参数是上行报文内容。因为get请求是没有报文，所以我们写null

xhr.send(null)

posted @ 2021-10-22 16:09 keyeking 阅读(40) 评论(0) 编辑收藏举报

刷新页面返回顶部

keyeking