Ajax的基本使用

什么是Ajax

Ajax的全称是Asynchronous JavaScript And XML（异步的JavaScript和XML），是客户端与服务器之间进行数据交互的技术之一。网页中数据的增删改查以及获取、提交数据都可以通过Ajax的形式来实现数据交互。
通俗的理解：在原生JS中使用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax。

接口

当使用Ajax请求数据时所填写的url地址就是接口，每一个接口必须要有对应的请求方式。

收集一些接口

因为本人还不了解接口里面是咋实现的，所以先收集一些拿来用一用，嘿嘿

相关信息	GET	POST
简单的书籍信息	http://www.liulongbin.top:3006/api/getbooks	http://www.liulongbin.top:3006/api/addbook
智能聊天机器人	http://www.liulongbin.top:3006/api/robot	暂无
智能文字转语音	http://www.liulongbin.top:3006/api/synthesize	暂无

Postman接口测试工具

为了验证接口能否被访问，我们需要使用接口测试工具对数据接口进行检测，接口测试工具可以让我们在不写任何代码的情况下对接口进行调用和调试。点击这里下载Postman

JQuery中的Ajax

jQuery中对原生的XMLHttpRequest对象进行了封装，提供了一系列Ajax相关的函数，极大降低了Ajax的使用难度。

JQuery中常用的Ajax方法

$.get()函数

$.get()函数专门用来发起get请求，从服务器中的资源请求到客户端来进行使用。
语法如下：

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

参数名	参数类型	说明
url	string	要请求的资源地址
data	object	请求资源期间要携带的参数
callback	function	请求成功时的回调函数

示例：

//从接口中获取id为1的数据，用res接收服务器相应的数据
$.get("http://www.liulongbin.top:3006/api/getbooks",{
   id: 1},function(res){
   
	console.log(res);//res是指服务器返回的数据
})

效果如下：

$.post()函数

$.post()函数专门用来发起post请求，将网页中的数据提交到服务器。语法与$.get()类似。

$.post(url, [data], [callback]);

$.ajax()函数

jQuery中提供的$.ajax()函数，是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。
基本语法如下：

$.ajax({
   
	type: "", //请求的方式，例如GET和POST
	url: "", //请求的URL地址
	data: {
   }, //这次请求要携带的数据
	success: function(){
   } //请求成功后的回调函数
});

示例：

$.ajax({
   
	type: "GET", //把type换成method也行
	url: "http://www.liulongbin.top:3006/api/getbooks",
	data: {
   
		id: 1,
	},
	success: function (res) {
   
		console.log(res);
	},
});

效果如图所示：

JQuery高级用法

Ajax进阶

XMLHttpRequest的基本使用

什么是XMLHttpRequest

XMLHttpRequest（xhr）是浏览器提供的一个JavaScript对象，通过这个对象可以请求服务器上的资源，上面所讲的JQuery中的Ajax函数就是基于XMLHttpRequest封装的。
用一张图理清楚关系：

使用xhr对象发起GET请求

//第一步：实例化一个xhr对象
var xhr = new XMLHttpRequest();
//第二步：调用open函数  指定‘请求方式’与‘URL地址’
xhr.open("GET","http://www.liulongbin.top:3006/api/getbooks");
//第三步：调用send函数  发起Ajax请求
xhr.send();
//第四步：监听onreadystatechange事件
xhr.onreadystatechange = function (){
   
	//监听请求对象的readyState状态和服务器响应状态status
	if(xhr.readyState === 4 && xhr.status === 200){
   
		//如果判断成功
		//获取服务器响应回来的数据
		console.log(xhr.responseText);
	}
}

查询字符串

查询字符串定义：查询字符串是指在URL的末尾加上用于向服务器发送信息的字符串。
格式：将英文的?放在U