在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
Ajax Web数据交互方式有什么作用?怎么用?Ajax 技术发送http请求获取后台服务器数据,Ajax的简写方式可以使用$.get和$.post方法来完成。AJAX 是开发者利器:不刷新页面更新网页;在页面加载后从服务器请求数据;在页面加载后从服务器接收数据;在后台向服务器发送数据。
学习目标:能够知道Ajax的作用
1. Ajax是什么?
Ajax 是Asynchronous JavaScript and XML的简写,Ajax一个前后台配合的技术,它可以让 javascript 发送异步的 http 请求,与后台通信进行数据的获取,Ajax 最大的优点是实现局部刷新,Ajax可以发送http请求,当获取到后台数据的时候更新页面显示数据实现局部刷新,在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用Ajax了。
这里提示一下大家, 在html页面使用Ajax需要在web服务器环境下运行, 一般向自己的web服务器发送Ajax请求。
2. Ajax的使用方法介绍
jquery将它封装成了一个方法$.Ajax(),我们可以直接用这个方法来执行Ajax请求。
示例代码:
<script>
$.ajax({
// 1.url 请求地址
url:'http://t.weather.sojson.com/api/weather/city/101010100',
// 2.type 请求方式,默认是'GET',常用的还有'POST'
type:'GET',
// 3.dataType 设置返回的数据格式,常用的是'json'格式
dataType:'JSON',
// 4.data 设置发送给服务器的数据, 没有参数不需要设置
// 5.success 设置请求成功后的回调函数
success:function (response) {
console.log(response);
},
// 6.error 设置请求失败后的回调函数
error:function () {
alert("请求失败,请稍后再试!");
},
// 7.async 设置是否异步,默认值是'true',表示异步,一般不用写
async:true
});
</script>
Ajax方法的参数说明:
1.url 请求地址
2.type 请求方式,默认是'GET',常用的还有'POST'
3.dataType 设置返回的数据格式,常用的是'json'格式
4.data 设置发送给服务器的数据,没有参数不需要设置
5.success 设置请求成功后的回调函数
6.error 设置请求失败后的回调函数
7.async 设置是否异步,默认值是'true',表示异步,一般不用写
8.同步和异步说明
同步是一个Ajax请求完成另外一个才可以请求,需要等待上一个Ajax请求完成,好比线程同步。
异步是多个Ajax同时请求,不需要等待其它Ajax请求完成, 好比线程异步。
Ajax的简写方式:
$.Ajax按照请求方式可以简写成$.get或者$.post方式
Ajax简写方式的示例代码:
<script>
$(function(){
/*
1. url 请求地址
2. data 设置发送给服务器的数据, 没有参数不需要设置
3. success 设置请求成功后的回调函数
4. dataType 设置返回的数据格式,常用的是'json'格式, 默认智能判断数据格式
*/
$.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
console.log(dat);
console.log(status);
alert(dat);
}).error(function(){
alert("网络异常");
});
/*
1. url 请求地址
2. data 设置发送给服务器的数据, 没有参数不需要设置
3. success 设置请求成功后的回调函数
4. dataType 设置返回的数据格式,常用的是'json'格式, 默认智能判断数据格式
*/
$.post("test.php", {"func": "getNameAndTime"}, function(data){
alert(data.name);
console.log(data.time);
}, "json").error(function(){
alert("网络异常");
});
});
</script>
$.get和$.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
1.url 请求地址
2.data 设置发送给服务器的数据,没有参数不需要设置
3.success 设置请求成功后的回调函数
data 请求的结果数据
status 请求的状态信息, 比如: "success"
xhr 底层发送http请求XMLHttpRequest对象
4.dataType 设置返回的数据格式
"xml"
"html"
"text"
"json"
5.error 表示错误异常处理
func 错误异常回调函数
3. 小结
Ajax是发送http请求获取后台服务器数据的技术;Ajax的简写方式可以使用$.get和$.post方法来完成。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
0基础Python数据分析入门学习
对于0基础的同学来说,想要学习Python,数据分析是必须掌握的一个知识要点。本文就专门针对0基础的同学,整理了数据分析入门的基础知识点,分别从是什么,为什么,有什么用三大问题着手带大家了解数据分析。
6157
2019-08-02 11:19:23
Python从入门到精通要掌握哪些基础知识?
Python作为一门编程语言,已经发展了近三十年,近几年,随着人工智能时代的来临分不开,python人才已经成为一线互联网企业的青睐的对象,Python爬虫也由此成为编程语言中的“网红”。
4004
2020-06-01 10:40:36
在线学习Python的网站有哪些值得推荐?
近些年来,Python在编程学习者中的热度一直居高不下,现在无论是金融、财务还是运营领域的从业者都需要学习并掌握Python。本文将为广大的编程学习者推荐一些在线学习Python的网站,无论你是零基础的初学者,还是有一定开发经验的程序员都可以在这里找到适合你学习的教程。下面一起来看看值得推荐的哪些在线学习网站吧!
5942
2020-07-02 10:51:27
多任务并发编程需要学习的内容有哪些?
并发编程的目的是为了让程序运行得更快,分工,高效地拆解任务并分配给线程;同步,线程之间如何协作; 互斥,保证同一时刻只允许一个线程访问共享资源。需要学习多线程、多进程的创建,互斥锁,死锁,集全局变量等问题的解决方案。
4100
2020-12-10 10:41:52
小白如何搭建Python自带静态Web服务器?
小白如何搭建Python自带静态Web服务器?利用Python自带的包可以建立简单的web服务器,静态Web服务器是为发出请求的浏览器提供静态文档的程序。
3311
2021-12-20 14:37:27