在线客服
扫描二维码
下载博学谷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爬虫应用场景:Web开发、网络编程、爬虫开发、云计算开发、人工智能、自动化运维、金融分析、科学运算、游戏开发、桌面软件。Python语言较其他语言相对简单被称为胶水语言,Python免费开源且兼容众多平台,具有非常丰富的Python库,接下来我们一起来看看Python的应用领域。
12068
2019-10-24 10:44:24
适合新手练习的Python项目有哪些?
适合新手练习简单易上手的Python项目汇总:Web 项目设计:内容聚合器、正则表达式查询工具、网址缩短、便利贴、功能、测验、GUI 项目设计:MP3 播放器、闹铃提醒工具、文件管理器、记账功能、命令行项目设计:通讯录、网站连接检查、批量文件重命名工具、目录树生成器。
5224
2020-03-10 10:53:51
Tableau实战项目教程推荐
Tableau作为从事数据分析工作的必备技能,以其简单易操作和强大的数据分析功能,连续蝉联Gartner商务智能软件魔力象限第一位。本文将为大家推荐Tableau实战项目教程,以此帮助全面掌握Tableau Public数据分析工具的使用。感兴趣的小伙伴就赶紧来了解一下相关教程的详情吧~
5156
2020-04-30 17:56:30
什么是Python?Python有什么特性?
Python就是一种计算机编程语言。通过大量的代码组合实现计算机程序的各种功能。属于高级编程语言,相对于C语言、C++、Java等编程语言,具有简单易学易用等特性。这里我们需要特别的关注Python的特性。
6104
2020-05-15 17:33:42
数据库设计之三范式是什么?有什么作用?
数据库设计之三范式是什么?有什么作用?范式:是对设计数据库提出的一些规范,设计数据库时遵循一定的规则,建立冗余较小、结构合理的数据库更便于查找数据。
4930
2022-01-20 14:07:26
热门文章
- 前端是什么
- 前端开发的工作职责
- 前端开发需要会什么?先掌握这三大核心关键技术
- 前端开发的工作方向有哪些?
- 简历加分-4步写出HR想要的简历
- 程序员如何突击面试?两大招带你拿下面试官
- 程序员面试技巧
- 架构师的厉害之处竟然是这……
- 架构师书籍推荐
- 懂了这些,才能成为架构师 查看更多
扫描二维码,了解更多信息
