文章目录
一、Ajax是什么?
Ajax的全称是Asynchronous Javascript And XML(异步JavaScript和XML)。
通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax。能让我们轻松实现网页与服务器之间的数据交互。
二、URL地址组成
URL(UniformResourceLocator)中文叫统一资源定位符,用于标识互联网上每个资源的唯一存放位置,浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。
三、jQuery发起Ajax
1.$.get
$.get() 专门发起get请求
$.get(url,[data],[callback])
url 必填 string类 要请求的资源地址
data 非必填 object类 请求资源期间要携带的参数
callback 非必填 function类 请求成功时的回调函数
2.$.post
$.post() 专门发起post请求
$.post(url,[data],[callback])
url 必填 string类 提交数据的地址
data 非必填 object类 要提交的数据
callback 非必填 function类 数据提交成功时的回调函数
3.$.ajax
$.ajax({
type:' ', //请求方式 如get或post
url:' ', //请求地址
data:{} //请求携带的数据
success:function(res) { } //请求成功之后的回调函数
})
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<button id="btn">发起不带参数的get请求</button>
<button id="btn1">发起带参数的get请求</button>
<script>
$(function() {
$('#btn').on('click', function() {
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
console.log(res);
})
});
$('#btn1').on('click', function() {
$.get('http://www.liulongbin.top:3006/api/getbooks', {
id: 1
}, function(res) {
console.log(res);
})
})
})
</script>
</body>
</html>
四、XMLHttpRequest
1.readyState属性
值 状态 描述
0 UNSENT xhr对象已被创建,但尚未调用open方法
1 OPENED open()方法已经被调用
2 HEADERS_RECEIVED send()方法已被调用,响应头也已经被接收
3 LOADING 数据接收中,此时response属性中已经包含部分数据
4 DONE Ajax请求完成,这意味着数据传输已经彻底完成或失败
2.查询字符串
定义:查询字符串是指在URL的末尾加上用于向服务器发送信息的字符串(变量).
格式:将英文的?放在URL的末尾,然后再加上参数=值,项加上多个参数的话,使用&符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到URL中
无论使用$.ajax(),还是使用$.get(),又或者直接使用xhr对象发起GET请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器。
3.GET和POST
GET请求:
1、创建xhr对象
2、调用xhr.open()函数
3、调用xhr.send()函数
4、监听xhr.onreadystatechange事件
POST请求:
1、创建xhr对象
2、调用xhr.open()函数
3、设置Content-Type属性(固定写法)
4、调用xhr.send()函数,同时指定要发送的数据
5、监听xhr.onreadystatechange事件
4.XMLHttpRequest Level2新功能
1、可以设置HTTP请求的时限 timeout
2、可以使用FormData对象管理表单数据
3、可以上传文件 files
4、可以获得数据传输的进度信息(xhr.upload.onprogress显示文件上传进度)
五、封装Ajax函数
itheima()函数是我们自定义的Ajax函数,它接收一个配置对象作为参数,配置对象中可以配置如下属性:
method 请求的类型
url 请求的URL地址
data 请求携带的数据
success 请求成功之后的回调函数
总结
本文简单的介绍了一下Ajax的基本功能,之后还有许多功能需要不断探索。