Ajax的意思是:异步JavaScript和XML。
通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax。
Ajax能让我们轻松实现网页与服务器之间的数据交互。
Ajax的底层实现主要是用到浏览器中提供的XMLHttpRequest对象用法比较复杂,所以jQuery对XMLHttpRequest进行了封装提供了一系列Ajax相关的函数,极大降低了Ajax的使用难度。
Ajax最常用的请求服务器方式有GET和POST两种。
GET 请求服务器方式常用于获取服务器数据,而 POST 请求服务器方式常用于向服务器发送数据,可携带参数量较大。本文主要介绍Ajax中的GET数据请求的原生底层写法和jQuery封装后的用法。
使用XMLHttpRequest发起GET请求
使用XMLHttpRequest(简称:xhr)发起GET请求主要分四步:
1.创建XMLHttpRequest对象;
2.调用open函数,指定请求方式与URL地址;
3.调用send函数,发起Ajax请求;
4.监听 onreadystatechange 事件。
<script>
// 1.创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 2.调用open函数,指定请求方式与URL地址
xhr.open('GET', 'http://XXX');
// 3.调用send函数,发起Ajax请求
xhr.send();
// 4.监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
// 4.1监听xhr对象的请求状态readyState与服务器响应的状态status
if(xhr.readyState === 4 && xhr.status === 200) { // if里面的判断条件是固定写法
// 4.2打印服务器响应回来的数据
console.log(xhr.responseText);
}
}
</script>
注意:GET请求也分带参数和不带参数的请求方式(以上代码示例为不带参数),若需要携带参数则将参数使用 ?参数属性1=参数值&参数属性2=参数值2... 的方式拼接到open函数中的URL地址值后即可。如:
// 第二步调用open函数,指定请求方式和URL地址并在URL地址用?后跟键值对形式携带参数多个参数间用&隔开
xhr.open('GET','http://xxx?id=1&name=zhangsan');
监听 onreadystatechange 事件时函数中的if判断是固定写法,而返回值xhr.responseText是JSON字符串格式的,所以一般为了方便后续对返回的数据进行处理,这里可以使用JSON.parse()进行反序列化操作将字符串转换为对象格式。
ps:将对象转换为JSON字符串——JSON.stringify()-这个把对象转换为字符串的操作也叫序列化操作
使用jQuery发起GET请求
1.发起不带参数的GET请求
<script>
// 入口函数
$(function () {
// 直接调用$.get(URL, [data], [callback])发起GET请求
$.get('http://XXX', function(res) {
console.log(res);
})
})
</script>
2.发起带参数的GET请求
<script>
// 入口函数
$(function () {
// 直接调用$.get(URL, [data], [callback])发起GET请求
$.get('http://XXX',{id: 1}, function(res) {
console.log(res);
})
})
</script>
带参数的数据请求就是将参数以对象形式写到 $.get(URL, [data], [callback]) [data]的位置,多个参数之间用英文逗号分隔即可。注意$.get()中的三个参数只有URL是必选的,data和callback都是可选的。而回调函数中返回的res是对象类型的数据,很方便后续的处理。
下一篇:Ajax-POST请求
更多推荐
Ajax-GET请求
发布评论