Jquery基础11_Ajax简介
1.什么是Ajax?
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
2、为什么要使用Ajax?
这儿我们可以说到Ajax的优点之一:它可以在不刷新整个页面的情况下与服务器通信保持原有页面状态,说的简单易懂一点。举个例子:在我们浏览网页的时候会有两种情况
1.点击链接,页面白屏,等待跳转到另一个页面。
2.页面不刷新,局部出现新内容获得更好的用户体验。
3.工作原理:
所谓的“XHR”(浏览器内置对象”XMLHttpRequest ”),也就是Ajax功能实现所依赖的对象,AJAX就是通过浏览器的内置对象XHMHttpResquest来发送异步请求的,异步请求不会妨碍客户端的任何操作。
4. ajax技术
的目的是让javascript发送http请求,与后台通信,获取数据和信息。**ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。
-
同步和异步 现实生活中,同步指的是同时做几件事情,异步指的是做完一件事后再做另外一件事,程序中的同步和异步是把现实生活中的概念对调,也就是程序中的异步指的是现实生活中的同步,程序中的同步指的是现实生活中的异步。
-
局部刷新和无刷新 ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。
同源策略 ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全的考虑。特征报错提示:
5. $.ajax使用方法 常用参数:
- url 请求地址
- type 请求方式,默认是’GET’,常用的还有’POST’
- dataType 设置返回的数据格式,常用的是’json’格式,也可以设置为’html’
- data 设置发送给服务器的数据
- success 设置请求成功后的回调函数
- error 设置请求失败后的回调函数
- async 设置是否异步,默认值是’true’,表示异步
以前的写法:
$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
success:function(data){
alert(data.name);
},
error:function(){
alert('服务器超时,请重试!');
}
});
6. jsonp
jsonp ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,只需要将dataType:设置为jsonp,就可以跨域请求数据(前提是服务器允许跨域请求)
// 跨域请求
$('#dl').click(function () {
//获取账号密码
var user = $('#username').val();
var pwd = $('#password').val();
$.ajax({
url: 'http://test.lemonban.com/futureloan/mvc/api/member/login',
dataType: 'jsonp',
method: 'POST',
data: {"mobilephone": user, "pwd": pwd},
}).done(function (data) {
console.log(data);
alert('登录成功')
}).fail(function () {
alert('登录失败')
})
})
上一篇: python中的高级特性
下一篇: python的高级特性