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的末尾加上用于向服务器发送信息的字符串。
格式：将英文的?放在URL的末尾，然后再加上参数=值，多个键值对用&分隔开，以这个形式可以将想要发送给服务器的数据添加到URL中。
示例：

//不带参数的URL地址
var url1 = "http://www.resource.top:3006/book";
//带一个参数的URL地址
var url2 = "http://www.resource.top:3006/book?author=施耐庵";
//带多个参数的URL地址
var url3 = "http://www.resource.top:3006/book?author=施耐庵&id=1";

URL编码

因为URL地址中只允许出现英文相关的字符、数字和标点符号，不允许出现中文字符，如果需要出现中文字符，则必须对中文字符进行编码。
URL编码的原则：使用安全的字符去表示非安全的字符。通俗的理解就是使用英文字符去表示非英文字符。
示例：

var url = "http://www.resource.top:3006/book?author=施耐庵";
//经过编码之后，最后的‘施耐庵’三个字被转义为%E6%96%BD%E8%80%90%E5%BA%B5
//被转义后的编码中每三个百分号为一组表示一个中文字符
var url2 = "http://www.resource.top:3006/book?author=%E6%96%BD%E8%80%90%E5%BA%B5";

浏览器为URL地址的编码和解码提供了相应的API

对URL地址进行编码：encodeURI()

var word = "汉字";
console.log(encodeURI(word));
//输出结果为：%E6%B1%89%E5%AD%97

对URL地址进行解码：decodeURI()

var word = "%E6%B1%89%E5%AD%97"