330 Ajax引言，异步 与 同步，XMLHttpRequest对象

Ajax引言

之前前端向后发送请求：
（1）form表单： action
（2）a标签： href
（3）地址栏直接输入网址
（4）【script】
（5）【link】

以上几种方式，请求发送后，页面会刷新跳转，会出现一个新页面

新的请求方式ajax： 
作用：ajax可以在不刷新页面的情况下，请求服务器，可以局部更新页面的数据；
本质： ajax 本质是是利用js中 XMLHttpRequest对象请求服务器。

Date 操作日期
document 操作dom
Math 操作数据函数 
XMLHttpRequest对象 具备和服务器通信的能力。

AJAX技术

即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。

  • 本质：是在HTTP协议的基础上，通过js的XMLHttpRequest对象与服务器进行通信。

  • 作用：可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；

异步 与 同步

指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。

同步：同一时刻只能做一件事，上一步完成才能开始下一步

异步：同时做多件事，效率更高,做一件事情时，不影响另一件事情的进行。

XMLHttpRequest可以以异步方式的处理程序。

补充：
1、同步交互
 客户端向服务器端发送请求, 到服务器端进行响应, 这个过程中, 用户是不能做任何其他事情(等)。

2、异步交互
 客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情(不等)。

3、同步与异步的区别
同步交互
  执行速度相对比较慢
  响应的是完整的HTML页面
异步交互
  执行速度相对比较快
  响应的是部分数据

ajax请求服务器的步骤

1-创建XMLHttpRequest实例
2-设置请求报文
请求行
请求头
请求主体
3-接收服务器响应内容，用事件监听 onreadystatechange

ajax调试

​ 1- 监视网络，请求没有发送， 代码send()之前有问题；
​ 2- 如果请求和数据正常发送， 但是后台没有返回需要的数据， 是后台代码有问题；
​ 3- 如果后台已经成功返回了数据， 问题是在前端接收是错了， 代码应该在onreadystatechange 事件中出错了

XMLHttpRequest对象

浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }

        .info {
            width: 500px;
            height: 200px;
            border: 1px solid red;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <h1>ajax</h1>
    <p>可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；</p>
    <input type="text"> <button>发送请求</button>
    <div class="info"></div>
    <script>
        //本质: 是在HTTP协议的基础上通过js的XMLHttpRequest对象与服务器进行通信。

        document.querySelector('button').onclick = function () {
            // 1-创建一个XMLhttpRequest实例
            // var date = new Date();
            var xhr = new XMLHttpRequest();

            // 2-把请求报文设置好
            // 2-1 请求行
            xhr.open('get', './01-ajax.php');
            // 2-2 请求头
            xhr.setRequestHeader('content-type', 'text/html');
            // 2-3 请求主体
            // get请求报文没有请求主体 ,发送null
            xhr.send(null);

            // 3-接受服务器响应内容
            // 服务器何时响应，是不确定，会受到各种外界因素影响， 所有以一直等待服务器响应，用事件监听
            // 监听XMLHttpRequest的状态 变化
            // readyState == 4 表示服务器响应完成
            xhr.onreadystatechange = function () {
                // 如果服务器响应完成 并且 成功处理请求，则获取数据
                if (xhr.readyState === 4 && xhr.status === 200) {
                    //获取服务器响应的结果（获取响应主体中的数据）
                    var r = xhr.responseText;
                    console.log(r);
                    document.querySelector('.info').innerHTML = r;
                }
            }
        }
    </script>
</body>
</html>

posted on 2020-02-26 14:27  冲啊！  阅读(152)  评论(0)  编辑  收藏  举报

导航