一,ajax到底是什么?
通过AJAX Asynchronous JavaScript And XML 实现异步刷新
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
比较高大上的说法:一种创建交互式网页应用的网页开发技术。
个人理解的说法:其实就是为了减少资源的浪费,页面上少部分刷新的网页技术(一般叫异步刷新),使网页的以小部分区域的内容发生改变,
二,ajax 的优点:它可以在不加载整个页面的基础上,对页面的某个部分进行更新。
三,如何使用ajax?
基本步骤:
1.创建XMLhttpRequest对象
2.设置响应函数onreadystatechange;
3.打开网页(也可以说是设置网页的地址);open(“GET”,url,true);
4.发送请求;send(null);
5.服务器的响应返回后,响应函数被调用
6.处理响应,判断响应是否成功,如果成功获取服务端返回的文本,在div或span上显示出来。
四,ajax原理
分析1 创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象,它可以在用户没有感觉的情况下,就像背后运行的一根小线程一般,悄悄的和服务器进行数据交互
AJAX就是通过它做到无刷新效果的
分析2 设置响应函数
XHR对象的作用是和服务器进行交互,所以既会发消息给服务器,也能接受服务器返回的响应。
当服务器响应回来的时候,调用怎么处理呢?
通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
分析3 设置并发出请求
通过open函数设置背后的这个小线程,将要访问的页面url ,
xmlhttp.open("GET",url,true);
通过send函数进行实际的访问
xmlhttp.send(null);
null表示没有参数,因为参数已经通过“GET" 方式,放在url里了。
只有在用"POST",并且需要发送参数的时候,才会使用到send。
类似这样:
xmlhttp.send("user="+username+"&password="+password)
分析4 处理响应信息
xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
四种请求方法
1>提交AJAX请求
参考 使用AJAX 通过无刷新验证账号是否存在 这个例子,服务端使用JSP进行验证,当用户输入值的时候提示"已经存在"
完整的 $.ajax 参数 比较复杂,这里采用了常见的调用方式。
$.ajax({
url: page,
type:'get',
data:{"name":value},
dataType:'jsonp',
scrossDomain:true,
success: function(result){
$("#选择器").html(result);
}
});
$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数
2> get
$.get 是 $.ajax的简化版,专门用于发送GET请求
$.get(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
$.get 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的,其他参数都是可选
3> post
$.post 是 $.ajax的简化版,专门用于发送POST请求
$.post(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
$.post 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的,其他参数都是可选
4> load
$("#id").load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据,可选。 在本例中,直接在page里加上了参数列表