Day10JavaWeb【Jquery进阶】Ajax***


学习目标

如果提交表单 给服务器,当服务器处理完成之后,响应给浏览器,你发现浏览器显示页面时,闪烁了一下。
这种方式不是异步提交,而是同步提交,该闪烁是页面整体刷新了。

1.能够理解异步的概念
2.能够了解原生js的ajax
3.能够使用jQuery的$.get()进行访问
4.能够使用jQuery的$.post()进行访问
5.能够使用jQuery的$.ajax()进行访问
6.能够使用jQuery3.0的$.get()新增签名进行访问
7.能够使用jQuery3.0的$.post()新增签名进行访问
8.能够掌握json的三种数据格式
9.能够使用json转换工具Jackson进行json格式字符串的转换
10.能够完成用户名是否存在的查重案例
11.能够完成自动补全的案例

同步请求与异步请求

(1)浏览器和服务器之间数据传输方式
1:同步方式
2:异步方式
Day10JavaWeb【Jquery进阶】Ajax***

(2)两种方式有什么不同?
同步请求,服务器响应时,页面整体刷新(响应了整个页面)
异步请求,服务器响应时,页面局部刷新(响应了字符串或者json)
(3)异步请求有什么优点?
异步请求可以提高用户的体验性
(4)异步请求应用场景有哪些?
a:用户名检测
b:搜索的自动补全
c:页面的局部刷新

原生的ajax编程(了解)
(1)传统的程序运行原理
用户发送请求,服务器接受请求,处理后返回数据,浏览器接受响应数据,进行显示数据,这个时间就会有处理和接受之间的空闲,导致用户的等待时间(2) Aajx的程序运行原理是:用户发送请求,到Ajax引擎处理后,发送给服务器接受请求,处理后返回数据Ajax,浏览器接受响应数据,进行显示数据,在者期间浏览器可以一直和Ajax进行交流,减少处理时间
Day10JavaWeb【Jquery进阶】Ajax***
web\0-base-ajax-index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 原生的ajax开发:
// 1)创建Ajax引擎对象
// 2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
// 3)绑定提交地址
// 4)发送请求
// 5)接受响应数据
//
function clickFn() {
//1)创建Ajax引擎对象
var xmlHttp = new XMLHttpRequest();
//2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
xmlHttp.onreadystatechange = function (ev) {
//如果state值是4,说明收到响应数据
//如果状态码是200.说明服务器正常响应
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// 5)接受响应数据
//获取响应数据
alert(xmlHttp.responseText); //response.getWriter().write("hello")
}
}
//3)绑定提交地址
//参1:表示请求方式
// 参2:表示服务器的资源访问路径,不用加项目名,
// 参3:表示是否异步,true是异步

xmlHttp.open("get","s1",true);
//4)发送请求
xmlHttp.send();
}

</script>

</head>
<body>
<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input type="button" value="点我,发出异步请求" onclick="clickFn()"/>
</body>
</html>

src\com\wzx\pack01_ajax\BaseAjaxServlet.java

@WebServlet("/s1")
public class BaseAjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//响应给浏览器
System.out.println("s1 doGet");
//响应
response.getWriter().println("hello");
}
}


jQuery框架的ajax简介
(1)原生Ajax编程为什么不用?
代码量大,使用不方便,封装成函数,直接调用(2)jQuery框架的ajax函数
Day10JavaWeb【Jquery进阶】Ajax***
$.get请求-原理
(1)get函数
$.get(url, [data], [callback], [type])url:表示服务器的访问路径,如:“s1”data:表示向服务器发送的参数, 格式: 1: "username=wzx&password=123"2:json串callback:匿名函数,表示接收服务器发送过来的响应,这个函数自动执行type :表示浏览器期望服务器发送过来的数据类型,格式:"text" "json"
(2)get请求原理

 $.get(
"s2",
"username=wzx&password=123",
function(data){ //这个data就是服务器返回的字符串
//处理数据
},
"text"
);
$.post(
"s2",
"username=wzx&password=123",
function(data){ //这个data就是服务器返回的字符串 var data = []
//处理数据
},
"json"
);

var url = "s2";
var param = "username=lft&password=123";
var func = function(data){

};
var type = "json";
$.post(url,param,func,type);

$.get请求-代码实现

(1)在点击事件中调用get请求
(2)在服务端返回json或者字符串数据
(3)在回调函数中编写业务逻辑
web\1-juqery-get_post_index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>

<script type="text/javascript">
function clickFn() {
//向服务器发送异步请求
$.post(
"s2",
"username=宝强x&password=123",
function (data) {
alert(data);
},
"text"
);
}
</script>

</head>
<body>
<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input type="button" value="点我,发出jquery$.get异步请求" onclick="clickFn()"/>
</body>
</html>

src\com\wzx\pack02_jquery_ajax\Demo2Servlet.java

@WebServlet(name = "Demo2Servlet",urlPatterns = "/s2")
public class Demo2Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决请求乱码
request.setCharacterEncoding("UTF-8");
//1:接收参数
String username = request.getParameter("username");
String password = request.getParameter("password");

System.out.println("username:"+username);
System.out.println("password:"+password);
// System.out.println(1/0);
//解决响应乱码
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("你好 ajax!");
}
}

$.ajax请求方式***

(1)什么是$.ajax请求方式
这种方式是将$.get$.post方式合成一种请求
(2)如何调用
$.ajax({键:值,键:值,键:值});
web\2-jquery-ajax-index.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>

<script type="text/javascript">
function clickFn() {
$.ajax({
url:"s2",
async:true,
data:"username=bingbing&password=456",
type:"post",
dataType:"text",
success:function (data) {
alert(data)
},
error:function () {
alert("服务器发生了错误")
}
});
}
</script>

</head>
<body>
<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input type="button" value="点我,发出ajax异步请求" onclick="clickFn()"/>
</body>
</html>


以上调用$.ajax的函数代码最好是复制过来,因为方法内的键不能随意修改,保能修改值type 如果是get 表示get请求,反之就是post请求
jquery3.0新特性ajax请求
(1)什么是juqery3.0新特性GET/POST请求

 $.get({键:值,键:值});
$.post({键:值,键:值});

因为方法指定get与post,所以要比$.ajax少一个键,type:post或者type:get,其他都一样。企业中一般还是使用1.x

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Day10JavaWeb【Jquery进阶】Ajax***

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Day10JavaWeb【Jquery进阶】Ajax***
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏