Ajax(Asynchronous JavaScript and XML) 异步的 JavaScript 和 XML
什么是异步呢?
异步和同步往往是同时被提到的两个概念,这两者都是基于客户端和服务器端相互通信的基础上
简单概述流程:
同步:发送请求 → 等待服务器处理 → 返回
异步:事件触发 → 服务器处理 (不等待)→ 处理结束
Ajax 就是一种可以在无需重新加载整个网页的情况下 就可以实现与客户端与服务器的异步通讯
往简单了说就是:不用刷新整个网页,就能修改网页局部内容
在之前的开发中,如果每一次局部的小修改都进行页面刷新,这显然对性能会有所降低,而且用户正在执行的操作也会中断
上面图片中基本上所有内容我们都是有一定认识的,只有 XMLHttpRequest 我们似乎是第一次见,那么这又是什么呢?
XMLHttpRequest 是Ajax的核心,是一个非常重要的对象,我们下面的程序中会反复的用到
Ajax中最大的特点 就是请求会被异步对象XMLHttpRequest进行封装,然后再发送到服务器,接着服务器以流的形式将数据返回给浏览器
也正是因为服务器返回的数据是通过流的形式发送的,XMLHttpRequest对象会不停的监听服务器,且得到服务器数据,所以浏览器不需要刷新就可以获取服务器端的数据
1、创建核心对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2、建立连接
xmlhttp.open("GET","ajaxServlet?username=tom",true);
xmlhttp.send();
4、获取并处理服务器的响应结果
//方式:xmlhttp.responseText
//时间:响应成功后
//onreadystatechange 对象就绪状态改变
xmlhttp.onreadystatechange=function() {
//判断readyState就绪状态是否为4,判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
$.ajax({
url:"ajaxServlet1111" ,
type:"POST" ,
data:{"username":"admin","age":20},
success:function (data) {
alert(data);
},
error:function () {
alert("出错啦...")
},
dataType:"text"
});
data: "username=admin&age=20"
语法:$.get(url, [data], [callback], [type])
语法:$.post(url, [data], [callback], [type])
如果文章中有什么不足,或者错误的地方,欢迎大家留言分享想法,感谢朋友们的支持!
邮箱:ideal_bwh@163.com
如果能帮到你的话,那就来关注我吧!
如果您更喜欢微信文章的阅读方式,可以关注我的公众号
如果您更加喜欢PC端的阅读方式,可以访问我的个人博客
域名:www.ideal-20.cn
在这里的我们素不相识,却都在为了自己的梦而努力 ❤ 一个坚持推送原创Java技术的公众号:理想二旬不止