Ajax初识和工作流程

最新推荐文章于 2024-07-25 12:41:07 发布

鹏zxp

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量622

点赞数 1

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/m0_74229555/article/details/128590647

版权

Ajax初识和工作流程

Ajax是什么？

Ajax就是让浏览器跟服务器交互的一套API。它的作用就是可以让浏览器和服务器进行交互。
- 大白话： ajax 是一种用于向服务器请求数据的技术

学习Ajax的目标是什么

学会使用ajax 根据 接口文档 和服务器 交互
- 目前，我们网页所有的数据都是写死的。实际开发中，网页的数据需要从服务器获取。而ajax技术就是来实现这一功能的。

服务器介绍

什么是服务器

1.服务器 就是提供某种服务的 电脑(机器)
2.如何让电脑提供某种服务呢？安装软件
- 想让你的电脑提供 听歌 服务，需要装什么软件呢？
  - 网易云、qq音乐
- 想让你的电脑提供 视频 服务，需要装什么软件呢？
  - 爱奇艺，优酷
- 想让你的电脑提供 聊天 服务，需要装什么软件呢？
  - qq，微信
3.综上所述，服务器就是某些安装了特殊软件，可以提供某些服务的电脑。常见的服务器有以下几种
- 数据库服务
- 文件服务
- 多媒体服务(音视频)
- 邮件服务
- Web服务
4.要想让你的电脑成为一台Web服务器，我们只需要安装对应的软件即可。
- 由于这些软件涉及的专业知识属于后台开发领域，我们的重点是了解什么是服务器，并且我们是前端开发，所以我们主要学习如何使用前端中的软件来和服务器进行交互

服务器交互流程

为什么刚刚我们只需要在浏览器输入一个网址点击回车之后就可以看到网页呢？
为什么我们修改了网页之后，需要在浏览器刷新以下才能看到最新的内容呢？
为什么在浏览器输入 http://www.baidu.com就可以看到百度网页呢？
为什么在浏览器输入 http://www.jd.com就可以看到京东网页呢？
其实，浏览器和服务器之间的每一次交互，都是由三个部分组成
- 请求(浏览器发起请求，服务器接收)
- 处理（服务器处理这个请求）
- 响应（服务器响应数据给浏览器）

浏览器访问服务器的几种方式

</head>
<a href="http://192.168.137.1">点我跳转</a>
<button id="btn">点我也可以跳转哟</button>

<body>
    <script>
        /*几种访问服务器的方式
        1.直接在浏览器地址栏输入网址
        2.使用a标签的href属性
        3.使用window.location.href 
         */

        document.getElementById('btn').onclick = function(){
            window.location.href = 'http://192.168.137.1';
        };
    </script>
</body>
</html>

ajax工作流程

什么是ajax

ajax：在不刷新页面的情况下向服务器请求数据

为什么需要ajax

1.以前我的写的页面全部都是固定的假数据，其实网页的数据都是从服务器获取的，一旦服务器数据变化，网页上的内容也会发生变化
2.虽然可以通过在浏览器地址栏直接输入网址（url）的方式向服务器获取数据，但是我们的网页会刷新
3.学会ajax：就可以做到在不刷新网页的情况下向服务器请求数据，让网站数据内容动态变化。

ajax的工作流程

1.创建XMLHttpRequest对象
- let xhr = new XMLHttpRequest();
2.设置请求
- xhr.open('get', 'https://autumnfish.cn/api/joke');
3.发送请求
- xhr.send();
4.注册回调函数
- 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢）
  - xhr.onload = function () {console.log(xhr.responseText);}

    <script src="./jquery-1.12.4.min.js"></script>
<body>
    <script>
      
        /* 1.ajax： 在页面不刷新的情况下向服务器请求数据
           2.XMLHttpRequest ： http请求对象，负责实现ajax技术（小黄人）
                （1）创建XMLHttpRequest对象
                （2）设置请求
                （3）发送请求
                （4）注册回调函数
         */

        //1.创建对象XMLHTTPRequest
        let xhr = new XMLHttpRequest();
        //2.设置请求
        xhr.open('get', 'https://autumnfish.cn/api/joke');
        //3.发送请求
        xhr.send();
        //4.注册回调函数
        /* 这个函数不是立即执行的，而是等服务器把数据响应返回才会执
        xhr.onload = function () {
            console.log(xhr.responseText);
            document.body.innerText = xhr.responseText;
        };
    </script>
</body>

名词解释

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
说人话：ajax就是一套可以让网站跟服务器交互的一种技术，能在我们需要时，不用再刷新网页就能去服务器要一些数据回来
例：http://www.smzdm.com 里只要网站往下滚动，就能不用刷新页面跟服务器要数据

鹏zxp

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax初识和工作流程

1.服务器就是提供某种服务的电脑(机器)2.如何让电脑提供某种服务呢？安装软件想让你的电脑提供听歌服务，需要装什么软件呢？网易云、qq音乐想让你的电脑提供视频服务，需要装什么软件呢？爱奇艺，优酷想让你的电脑提供聊天服务，需要装什么软件呢？qq，微信3.综上所述，服务器就是某些安装了特殊软件，可以提供某些服务的电脑。常见的服务器有以下几种数据库服务文件服务多媒体服务(音视频)邮件服务Web服务。
复制链接

扫一扫