Ajax02-Ajax基础+HTTP+运行原理+函数封装

1 、URL地址的概念

URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

常见的URL举例：

http://www.baidu.com

http://www.taobao.com

http://www.cnblogs.com/liulongbinblogs/p/11649393.html

2、URL地址的组成部分

URL地址一般由三部组成：

客户端与服务器之间的通信协议

存有该资源的服务器名称

资源在服务器上具体的存放位置

四、客户端与服务器的通信过程

1 图解客户端与服务器的通信过程

注意：

客户端与服务器之间的通信过程，分为请求 – 处理 – 响应三个步骤。

网页中的每一个资源，都是通过请求 – 处理 – 响应的方式从服务器获取回来的。

2 基于浏览器的开发者工具分析通信过程

五、服务器对外提供了哪些资源

1 例举网页中常见的资源

2 数据也是资源

网页中的数据，也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等。

3 数据是网页的灵魂

4 网页中如何请求数据

如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。

XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。

最简单的用法 var xhrObj = new XMLHttpRequest()

5 资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。

get 请求通常用于获取服务端资源（向服务器要资源）

例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等

post 请求通常用于向服务器提交数据（往服务器发送资源）

例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

六、了解Ajax

1 什么是Ajax

Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。

通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。

2 为什么要学Ajax

之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但是，Ajax能让我们轻松实现网页与服务器之间的数据交互。

3 Ajax的典型应用场景

用户名检测：注册用户时，通过 ajax 的形式，动态检测用户名是否被占用

搜索提示：当输入搜索关键字时，通过 ajax 的形式，动态加载搜索提示列表

数据分页显示：当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据

数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互

七、Ajax运行原理及实现

1、搭建Ajax运行环境

Ajax--详细的环境搭建 - 路上code - 博客园1、首先下载安装node： https://www.cnblogs.com/technicist/p/12683787.html 2、新建文件夹（重命名为“server”,，命名随意），并进https://www.cnblogs.com/technicist/p/12730501.html

注意：package.json中的main字段入口文件可能会默认是index.js，需要手动修改成自己创建的搭建ajax环境的js文件名

2.概述：

ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高浏览体验

3.运行原理

Ajax相当于浏览器发送请求与接受响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验

4.实现步骤

第一步：创建Ajax对象
 var xhr = new XMLHttpRequest();
第二步：告诉Ajax请求方式以及请求地址
xhr.open('get', 'http://www.example.com');
第三步：发送请求
xhr.send();
第四步：获取服务器端给予客户端的响应数据
 xhr.onload = function(){
            console.log(xhr.responseText);
        }

代码验证：

<script>
        //1.创建ajax对象
        var xhr = new XMLHttpRequest();
        //2.告诉ajax对象要向哪发送请求，以什么方式发送请求
        //1)请求方式  2）请求地址
        xhr.open('get', 'http://localhost:3000/first');
        //3.发送请求
        xhr.send();
        //4.获取服务器端响应到客户端的数据
        xhr.onload = function() {
            console.log(xhr.responseText);
        }
    </script>

app.js文件中，"静态资源访问服务器功能" 下方添加代码（可以不管，这是后端做的）

//静态资源访问服务器功能
app.use(express.static(path.join(__dirname, 'public')))

app.get('/first', (req, res) => {
    res.send('Hello Ajax');
});

//监听端口
app.listen(3000);

5、服务器端响应的数据格式

5.1 json对象

在真实项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。
<script>
        //1.创建ajax对象
        var xhr = new XMLHttpRequest();
        //2.告诉ajax对象要向哪发送请求，以什么方式发送请求
        //1)请求方式  2）请求地址
        xhr.open('get', 'http://localhost:3000/responseData');
        //3.发送请求
        xhr.send();
        //4.获取服务器端响应到客户端的数据
        xhr.onload = function() {
            console.log(xhr.responseText);
        }
    </script>
//创建路由，对应本文件
app.get('/responseData', (req, res) => {
    res.send({ 'name': '张好好' });
});
//得到的自动转换成字符串

在http请求与响应的过程中,无论是请求参数还是响应内容，如果是对象类型,最终都会被转换为对象字符串进行传输。

5.2 JSON.parse(）

JSON.parse() //将json字符串转换为json对象

<script>
        //1.创建ajax对象
        var xhr = new XMLHttpRequest();
        //2.告诉ajax对象要向哪发送请求，以什么方式发送请求
        //1)请求方式  2）请求地址
        xhr.open('get', 'http://localhost:3000/responseData');
        //3.发送请求
        xhr.send();
        //4.获取服务器端响应到客户端的数据
        xhr.onload = function() {
            var responseText = JSON.parse(xhr.responseText) //将JSON字符串转换为JSON对象
            console.log(responseText);
            var str = '<h2> ' + responseText.name + '</h2>'; //将JSON对象和html进行拼接
            document.body.innerHTML = str; //使用dom方法把拼接好的字符串追加到页面中
        }
    </script>