快速入门Ajax基础

Ajax

Ajax就是让浏览器跟服务器交互的一套API，通过它咱们就可以跟服务器进行交互，那么服务器是什么呢？

服务器

什么是服务器

服务器就是提供了某种服务的公共计算机。

至于具体提供什么服务，就要看你安装了什么软件，举个栗子，咱们新买了一台计算机，

1. 为了听歌要装什么软件呀？
2. 为了看视频要装什么软件呀？
3. 为了聊天要装什么软件呀？

那当我们安装了这些软件之后咱们的这台计算机是不是就可以提供这些服务了呢，比如听歌服务，看视频服务，聊天服务？

但是咱们常说的服务器一般不提供这些服务，常见的服务有

1. 数据库服务
2. web服务
3. 文件服务
4. 多媒体服务
5. 邮件服务
6. 等

为了能够提供这些服务咱们只需要安装对应的软件即可，但是这里软件咱们平时并不常用，需要一定的专业知识，因为咱们的目的是了解什么是服务器，并且咱们是前端，所以接下来就演示跟咱们前端开发息息相关的一种服务器软件，那么大伙觉得是哪个呀？

web服务器

web服务器就是提供web服务的计算机

**通俗来说：**就是让你可以访问在其内部的资源(比如网页)。之前咱们自己写好的网页如果让别人访问要怎么做呢？

web服务器访问流程

咱们在访问web服务器时其实经历了:

1. 浏览器(客户端) 通过 请求 向服务器发送数据
2. 服务端通过 响应 向浏览器(客户端)响应数据

这么一个 请求 - 响应 的流程

那么刚刚咱们在浏览器中输入了地址点击回车之后为什么可以看到网页？

在我修改了网页内容之后为什么需要刷新才能看到最新的内容呢？

那么在浏览器地址栏中输入 www.baidu.com又是如何看到百度的？

他们其实都经历了发送请求到接收响应这么一个过程

请求响应流程

1. 用户在浏览器地址栏输入我们需要访问的网站网址（URL）
2. 浏览器向服务器发送请求(HTTP 请求)，告知服务器要获取的内容(请求)
3. 服务端处理浏览器发送的请求，并把处理的结果返回(HTTP 响应)给浏览器(响应)
4. 浏览器将服务端返回的结果呈现到界面上

凝练一点就是:浏览器发送请求并接收服务器的响应

请求方式

除了直接输入url以外我们还学过哪些可以改变url的方法呀？

1. 浏览器地址栏输入URL，按回车
2. 点击a标签，跳转到另一个页面
3. 使用JS修改URL

这三种方式本质都是一样的，通过修改浏览器的URL向服务器发送请求，但同时这种方式也有一个缺点就是页面会刷新，或者说重新加载，亦或者"白一下"。

那么有没有不刷新页面就可以和服务器交互的方式呢？

这种方式就是AJAX，大伙应该见过，甚至经常使用，比如在线聊天，微博滚动查看新内容，用户注册输入用户名即可知道该名字是否可用 等等

Ajax基本概念

为什么需要ajax

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

• 之前我们写的页面都是固定的假数据
• 真实网站的数据都是从服务器读取出来，服务器数据一旦改变，网站上显示的内容就发生改变
• 虽然可以通过直接输入URL的方式向服务器获取数据，但是页面会刷新
• 学会ajax就可以在不刷新页面的情况下向服务器请求数据，让网站内容动态改变

直白地说，就是没用AJAX的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷。AJAX只是一种技术，不是某种具体的东西。不同的浏览器有自己实现AJAX的组件。

名词解释（了解）

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

Ajax基本使用

基本使用-get请求

ajax使用步骤一共就4大步：

1. 创建xhr对象
2. 初始化请求
3. 发送请求
4. 注册onload事件，拿到服务器给你的结果

代码如下：

//1. 创建xhr对象
var xhr = new XMLHttpRequest();
//2. 初始化请求
xhr.open('get',服务器地址);
//3. 发送请求
xhr.send();
//4. 注册onload事件，拿到服务器给你的结果
xhr.onload = function(){
    console.log(xhr.responseText); 
}

步骤说明

1. xhr对象即XMLHttpRequest，这是ajax里的核心对象，xhr取自每个单词首字母
2. 初始化请求，我们用open方法，参数1现在就写死get，他叫做请求方法，后面再解释是什么意思，参数2代表你要请求的服务器路径（网络上那么多资源，你得给个路径告诉它找哪个对不？）
3. 发送请求，字面意思
4. 我们发请求就是为了拿到服务器给我们的结果，因此这一步就是做这个事

简单来说：第二步初始化请求你可以理解为是打电话中的输入号码那一步，第三步发送请求你可以理解为就相当于是按下了拨号键

基本使用-post请求

上图中的第二个接口文档截图并没有get关键字出现，他使用的是另外一种请求方式post,那么Ajax如何发送post请求呢？

跟get请求步骤都是一样的，但是在初始化请求完成后（也即open方法后）要多设置一行请求头：

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

完整请求代码如下：

//1. 创建xhr对象
var xhr = new XMLHttpRequest();
//2. 初始化请求
xhr.open('post',服务器地址);
//3. 设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//4. 发送请求
xhr.send('提交给服务器数据');
//5. 监听响应的回调函数
xhr.onload = function(){
    console.log(xhr.responseText);
}

注：如果不需要给服务器提交数据，则send方法里什么都不写，或者写null或者写undefined都可以

如果需要给服务器提交数据，依然是用 key=value 的格式 代码如下

数据格式

// 一条数据
xhr.send('key=value')
// 多条数据
xhr.send('key1=value1&key2=value2')
// 没有数据 下面三种都可以
xhr.send()
xhr.send(null)
xhr.send(undefined)

数据传递

Ajax中向服务器传递数据的格式是:key1=value1&key2=value2&key3=value3多条数据以此类推

在问服务器要数据时，有一部分需要咱们告诉服务器,比如:

1. 信息搜索
2. 用户名是否可用
3. …

对于不同的请求方式数据传递的方式不同:

1. get请求直接拼接在url的后面:

url?key=value&key2=value2

2. post请求(后文中会讲到),通过send方法传递

xhr.send('key1=value2&key2=value2')

Ajax接口调用

之前给大伙演示了两种请求网络数据的方法，对比可以发现在使用步骤上大部分代码是相同的，但是有几个地方的内容替换了，重点的位置有

1. open后面的2个参数，方法和地址
2. send中的值

为什么方法和地址不同，甚至还需要传递数据过去呢？这是因为我们在请求不同的接口

什么是接口

我们在使用Ajax请求数据时，请求的地址不是税收写的，是对应的服务器地址。服务器提供给我们请求的这个地址，我们可以把它叫做接口，向接口对应的地址发请求获取数据，可以称为调用接口

我们在调用接口时，必须得知道的内容有3个

1. 接口地址
2. 请求方法
3. 参数

那么谁来告诉我们这些东西呢？毕竟服务器是别人提供给我们的

看接口文档开发

既然服务器代码不是我们写的， 是后端开发人员写的。那么我们怎么知道请求的地址、方式、参数是什么呢？

实际开发中，会提供一个接口文档，接口文档是一个最起码包含了请求方式、请求路径、请求参数的接口使用说明书

在接口文档中明确告诉了我们

1. 请求地址
2. 请求方法
3. 请求参数

甚至返回的数据格式以及示例都有，那么换句话来说：

只要有了接口文档，咱们就可以按照文档内部的信息来调用接口啦，至于接口的实现方式咱们可以先不用关心，毕竟给你了说明书正确的用法是先学会使用再考虑原理嘛^_。

免费接口

这里搜集了一些网络上免费可用的接口，因为实现者不同接口文档的风格也不尽相同，大伙可以尝试调用看看

testApi都是可用的接口

随机获取acg图片 可以获取精美的acg图片

开源社区接口可以获取很多的测试用数据，服务器偶尔会失联，隔一段时间再使用即可

网易云音乐接口基本上实现了网易云的所有功能