在线客服
扫描二维码
下载博学谷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方法来完成。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
从零开始学Python必看入门指导
Python是初学者的语言,对于初级程序员而言,Python是一种伟大的语言,它支持广泛的应用程序开发,从简单的文字处理到浏览器再到游戏,无不有Python的身影。Python语言自身的优点吸引者初学者,然而不少从零开始时学Python的小伙伴难免在入门时产生迷茫感,这里小编整理了一份从零开始学Python必看入门指导。
6009
2019-07-22 15:10:47
Python课程培训值得去学习吗?
Python课程培训值得去学习吗?这个问题不能一概而论,要具体问题具体分析。Python作为一门被广泛应用,简单易上手的编程语言,吸引了很多想要进入IT行业的学员。而对于绝大对数Python的初学者来说,报培训课程绝对是最好的学习方式。当然啦,也并不是所有的Python课程培训都值得去学习,大家在选择Python培训机构的时候,还需要下一番功夫,详细考察各个教学环节。
5388
2019-10-22 19:00:34
学习Python基础知识难不难?零基础可以学吗?
学习Python基础知识难不难?零基础可以学吗?Python是公认的新手友好语言,如果零基础的小伙伴想学习编程语言,那么Python绝对是最好的选择。至于学习难度,就需要看个人的学习能力了。对于零基础的学习者来说,最重要的就是有一个合理的学习规划和资深老师的引导。本文将给大家介绍博学谷的零基础Python课程,即使是零基础也可以轻松入门Python。
4682
2019-10-29 15:01:04
Python中闭包的概念实例解读
好多人遇到Python中的闭包,都不能很好的理解概念和原理。随着大家学习Python的深入,还会常常遇到闭包。因此本文将用实例为大家全面解读Python中闭包的概念,相信大家看完全文,对闭包的概念会有一个全新而又详细的认识。现在我们一起来看看吧!
4538
2019-11-20 15:31:46
Python开发难学吗?适合初学者吗?
Python开发难学吗?Python入门阶段零基础学员打好基础是非常重要的。在非常高的抽象计算中,高级的Python程序设计非常难学,高级程序语言不等于简单,但对于初学者和完成普通任务Python语言是非常简单易用的。
2879
2021-02-04 11:01:50