Ajax的基础知识

 

req 请求对象，res响应对象
Ajax的实现步骤
1.创建Ajax对象
var xhr = new XMLHttpRequest();
2.告诉Ajax请求地址以及请求方式
xhr.open('get','http://www.example.com')；
3.发送请求
xhr.send();
4.获取服务器端给与客户端的响应数据
xhr.onload = function () {
    console.log(xhr.responseText);
}

2.1 ajax中的方法

JSON.parse();//将json字符串转换为json数据

2.2 jQuery中的Ajax

$.get()函数的语法：

$.get(Url,[data],[callback])

Url 是邀请球的资源地址

data 是请求资源期间要携带的参数

callback 请求成功厚的回调函数

$.post()函数的语法：

$.post(Url,[data],[callback])

Url 提交数据的地址

data 要提交的数据

callback 数据提交成功时的回调函数

$.ajax()函数的语法：

$.ajax({
    type:'',//请求的方式 GET 或POST
    url：'',//请求的url地址
    data:{ },//这次请求携带的数据
    success: function(res){ } //请求成功之后的回调函数
})

2.3 接口的概念

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口）。同时每个数据都必须有请求方式（get，post）

2.4 接口的测试工具

为了验证接口能否被正常访问，我们常常需要使用接口测试工具，求对数据接口进行检测。

好处：接口的是工具能让我们再不写任何代码的情况下，对接口进行调用和测试。PostManDownload Postman | Get Started for Free

2.5 接口文档

接口的说明书 最少包含6项内容

1.接口名称：名来标识各个接口的简单说明，如登录接口，获取图书列表接口等。

2.接口URL：接口的调用地址。

3.调用方式：接口的调用方式，如GET或POST。

4.参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。

5.响应格式：接口的返回值的详细描述，一半包含数据名称、数据类型、说明3项内容。

6、返回实例（可选）：通过对象的形式，例句服务器返回数据的结构。

2.6 BootstrapCDN

StackPath 的小伙伴为 Bootstrap 的 CSS 和 JavaScript 文件提供了 CDN 的支持。直接使用这些 BootstrapCDN 提供的链接即可。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

3. XMLHttpRequest的基本使用

3.1使用xhr发起GET请求

步骤

//1.创建 xhr 对象
var xhr = new XMLHttpRequest()
//2.调用 xhr.open()函数    指定请求方式与URL地址
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
//3.调用xhr.send()函数  发起 Ajax 请求
xhr.send()
//4.监听xhr.onreadystatechange 事件
xhr.onreadystatechange = function() {
// 4.1监听xhr对象的请求状态readyState与服务器响应的状态status
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

3.2 了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：

0 ：XMLHttpRequest 对象已被创建，但尚未调用 open方法。

1：open() 方法已经被调用

2：send() 方法已经被调用，响应头也已经被接收。

3：数据接收中，此时 response 属性中已经包含部分数据。

4：Ajax 请求完成，这意味着数据传输已经彻底完成或失败。

3.3 使用xhr发起带参数的GET请求

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
//这种在 URL 地址后面拼接的参数，叫做   查询字符串

3.4 什么是查询字符串

定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。 格式：将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。

// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

4.URL编码与解码

4.1 什么是URL编码

URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。 如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。 URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去