Ajax全称:Asynchronous JavaScript and XML 异步的JS与XML
同步与异步:
这里通俗的理解就是:
同步的时候,做某件事的时候必须专心,不能干别的事情.
异步的时候,做某件事的同时你也可以做别的事情.什么时候去做那件事,都行.
Ajax的原理:
打个比方,就是代理的意思.本来某件事由你自己去做,现在你把事情交给另一个人,让他帮你完成,这期间你可以完成别的事情.
本来我们提交一个表单,,访问一个网站,传送一些数据,都是直接让我们的客户端去做这件事情,现在我们把这个事情交给Ajax去做,然后等着回信就行.
原始的Ajax:
步骤有五步;
1.获得ajax引擎对象:XMLHttpRequest
2.绑定监听:当事情做完了后就触发这个方法
3.绑定地址url:发送到那里,发送的方法,是否异步
4.发送请求
5.接收数据
<script type="text/javascript">
function fn1(){
//1.建立ajax引擎对象
var httpx = new XMLHttpRequest();
//2.绑定监听
httpx.onreadystatechange = function() {
if (httpx.readyState == 4 && httpx.status == 200) {
//5.接收数据
var text = httpx.responseText;
document.getElementById("span1").innerHTML = text;
}
}
//3.绑定地址 发送方法post 发送的服务器地址 是否异步
httpx.open("get", "${pageContext.request.contextPath}/ajax?name=zhangsan", true);
//4.发送请求
httpx.send();
}
</script>
这里的第二步绑定监听中,还使用了状态值判断,其实在文档中有
JQ的AJAX:
注意:要先导入JQ需要的js文件
三个方法:get/post/ajax
get(url,[data],[fn],[type])
function fn1(){
var value = {
"key":"cat and mouse",
}
$.get("${pageContext.request.contextPath}/jqAjax",value,function(data){
alert(data);
},"text");
}
post(url,[data],[fn],[type])
这里的post与get其实很相同
function fn2(){
var value = {
"key":"cat and mouse",
}
$.post("${pageContext.request.contextPath}/jqAjax",value,function(data){
alert(data);
},"text");
}
本来在地址栏中,get是可以显示数据传送的,但是,现在把访问服务器交给了ajax引擎,导致地址栏上都不显示了.所以post与get差不多了
而这也正是ajax的一个缺点吧,违背的url资源定位的初衷了.
使用JSON对象接受数据
Type不同导致接受的类型不同
function fn1(){
var value = {
"key":"cat and mouse",
}
$.get("${pageContext.request.contextPath}/jqAjax",value,function(data){
alert(data);
},"text");
}
function fn2(){
var value = {
"key":"cat and mouse",
}
$.post("${pageContext.request.contextPath}/jqAjax",value,function(data){
alert(data);
},"JSON");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
String value = request.getParameter("key");
System.out.println(value);
//不可以使用'来代替",必须使用转义\
response.getWriter().write("{\"name\":\"Tom\",\"age\":20}");
}
这里的fn1方法接收到的是一个字符串,而fn2接收到的是一个JSON对象,我们可以通过data.name获取到Tom.
到现在,我们可以向JSP中传递一个对象了.
ajax([options])
前边的get与post的方法多少还有一些约束,比如无法修改同步异步,必须使用异步.
而这个ajax方法就是自己自定义的方法了.
这里只写几个常用的属性,其他请查文档
url:发送到哪里
type:post/get(default) 发送方法
dataType:xml/html/script/json/jsonp/text 接收数据的类型
success:请求成功后的回调函数
error:请求失败后的回调参数
async:同步还是异步(default true)
data:发送到服务器的数据,建议使用JSON格式
function fn3(){
var value = {
"key":"cat"
}
$.ajax({
url:"${pageContext.request.contextPath}/jqAjax",
data:value,
async:true,
success:function(data){
alert(data.name);
},
erroe:function(data){
alert("失败的请求");
},
dataType:"json"
});
}