JavaWeb学习笔记(二十)—— Ajax
一、Ajax概述
1.1 什么是Ajax
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。而传统的页面(不使用Ajax)如果需要更新内容,必须重载整个网页页面。
1.2 Ajax常见的应用场景
百度的搜索框:
用户注册时:
1.3 同步交互与异步交互
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求。刷新的是整个页面
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。可以使用js接收服务器的响应,然后使用js来局部刷新
1.4 AJAX的运行原理
页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎就会提交请求到服务器端。在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面的功能。
如图:
1.1 使用JavaScript获得浏览器内置的Ajax引擎(XMLHttpRequest对象)
1.2 通过Ajax引擎确定请求路径和请求参数
1.3 通知Ajax引擎发送请求
Ajax引擎会在不刷新浏览器地址栏的情况下,发送请求
2.1 服务器获得请求参数
2.2 服务器处理请求参数(添加、查询等操作)
2.3 服务器响应数据给浏览器
Ajax引擎获得服务器响应的数据,通过执行JavaScript的回调函数将数据传递给浏览器页面
3.1 通过设置给Ajax引擎的回调函数获得服务器响应的数据
3.2 通过JavaScript在指定的位置,显示响应数据,从而局部修改页面的数据,达到局部刷新的目的。
1.5 AJAX的优缺点
优点:
- AJAX使用Javascript技术向服务器发送异步请求,增强了用户的体验;
- AJAX无须刷新整个页面;
- 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高,减小了服务器的压力;
缺点:
- AJAX并不适合所有场景,很多时候还是要使用同步交互;
- AJAX虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大;
- 因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题;
二、JavaScript的Ajax技术(了解)
创建Ajax引擎对象:var xmlHttp = new XMLHttpRequest();
为Ajax引擎对象绑定监听:xmlHttp.onreadystatechange = function(){}
绑定提交地址:xmlHttp.open(method, url, async)
method:请求方式,通常为GET或POST
url:请求的服务器地址
async:默认值为true,表示异步请求发送请求
POST请求:xmlHttp.send("username=zhangSan&password=123")
GET请求:xmlHttp.send()
注意:如果是POST请求,在发送请求前设置请求头:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
如果是GET请求,可以不用设置请求头。接收响应数据
var content = xmlHttp.responseText——得到服务器响应的文本格式内容
var content = xmlHttp.responseXML——得到服务器响应的xml响应内容,它是Document对象
【测试】
<script type="text/javascript"> function fn1(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span1").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
//4、发送请求
xmlHttp.send(); }
function fn2(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span2").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("POST","/WEB22/ajaxServlet",false);
//4、发送请求
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=wangwu"); } </script> </head>
<body>
<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
<br>
<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
<br>
<input type="button" value="测试按钮" onclick="alert()">
</body>
三、Jquery的Ajax技术(重点)
- $.get(url, [data], [callback], [type])
url:代表请求的服务器端地址
data:代表请求服务器端的数据
callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)function fn1(){
//get异步访问
$.get(
"/WEB22/ajaxServlet2", //url地址
{"name":"张三","age":25}, //请求参数
function(data){ //执行成功后的回调函数
//{\"name\":\"tom\",\"age\":21}
alert(data.name);
},
"json"
);
}public class AjaxServlet2 extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String name = request.getParameter("name");
String age = request.getParameter("age"); System.out.println(name+" "+age); //java代码只能返回一个json格式的字符串
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}"); } protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
} - $.post(url, [data], [callback], [type])
function fn2(){
//post异步访问
$.post(
"/WEB22/ajaxServlet2", //url地址
{"name":"李四","age":25}, //请求参数
function(data){ //执行成功后的回调函数
alert(data.name);
},
"json"
);
} - $.ajax( { option1:value1,option2:value2... } );
function fn3(){
$.ajax({
url:"/WEB22/ajaxServlet2",
async:true,
type:"POST",
data:{"name":"lucy","age":18},
success:function(data){
alert(data.name);
},
error:function(){
alert("请求失败");
},
dataType:"json"
});
}
最新文章
- caffe的python接口学习(7):绘制loss和accuracy曲线
- 【转】漫谈iOS程序的证书和签名机制
- 【leetcode】First Missing Positive
- 二、JavaScript语言--JS实践--倒计时效果
- Visual Studio 2015里面汇编工具Asm Dude的配置!
- windows下Nginx配置与测试
- JAVA 反射特性
- linux系统删除空间后系统分区空间仍不释放问题
- javascript 简单工厂
- JavaScript中的数据结构及实战系列(1):队列
- TCP/UDP客户端
- javaScript高级程序设计笔记 1
- OpenCV学习1-----打开摄像头并在画面上添加水印
- react系列从零开始-react介绍
- Carries SCU - 4437
- objective-c如何在linux下进入Modern模式
- Java HashMap 使用了未经检查或不安全的操作
- docker-compose模板文件参数说明
- php如何控制用户对图片的访问 PHP禁止图片盗链
- 039 hive中关于数据库与表等的基本操作