ajax学习

最新推荐文章于 2022-11-30 19:39:58 发布

wyd_Heart

最新推荐文章于 2022-11-30 19:39:58 发布

阅读量251

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/wyd_Heart/article/details/80156720

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

重点哦：

ajax主要是实现了：1，ajax通过点击事件提交数据到了servlet。2，servlet通过一系列代码操作数据库以后，将结果返回给前端。3，ajax嘞，它又可以获取到从servlet发送的数据，然后就会通过这个结果，把结果再展示出来，这就是请求的一系列过程，实现局部更新！！！这才是ajax学习的重点，精华，重中之重。

req.getParameter("username")，这个getParameter得到的是url请求参数里的键值。

点击事件一：

ajax的缺点：ajax使用时候一般数据的传输尽量单一和简陋，不要传输大量的数据。

<head>

</body>

点击事件二：

<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
如果script标签中的代码书写在input之前就失效
<input type="button" value="点击" id="btn" />
<script>
//获取html标签的对象
var btn = document.getElementById('btn');
btn.value = "点击3";
btn.onclick = function() {
alert('点击了')
}
</script>

</body>

点击事件三：这个才是重点。

<head>
<meta charset="UTF-8">
<title></title>
<script>
//修改当前窗口路径 window.location.href=""
//返回上一个页面 window.history.back()
//浏览器窗口加载所有的html资源之后执行的回调函数
window.onload = function() {
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('点击了')
}
//js修改元素(element,节点)的样式,事件,属性
}
</script>
</head>
<body>
如果script标签中的代码书写在input之前就失效
<input type="button" value="点击" id="btn" />

</body>

同步ajax：

同步就是一步一步的做一件事情，前面事情没做完，后面事情进行等待。前面一条河只有一个桥，只能一个一个过去去买票。

<head>
<meta charset="UTF-8">
<title></title>
<script>
window.οnlοad=function(){
var btn = document.getElementById('btn');
btn.οnclick=function(){
//点击之后开始ajax网络请求
//初始化XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//xhr对象并不是所有浏览器都支持，比如ie5,6就不支持
if(xhr==null){
//ActiveXObject只能在ie5和ie6
xhr=new ActiveXObject("Microsoft.XMLHTTP")
}
//open方法用于设置网络请求相关信息
//第一个参数是请求方式第二个是请求路径第三个是是否异步false表示同步
//异步同一个时间点多个动作一起执行
//烧水10分钟洗菜10分钟炒菜10分钟，如果是异步那就是烧水的同时洗菜。同步就是one by one 烧完水在洗菜。
xhr.open("GET","click1.html",false)
//发送请求
xhr.send();
//发送之后就可以获取服务器返回的数据
var text = xhr.responseText
alert(text)
btn.value="已关注"
}
}
</script>
</head>
<body>
点击关注按钮，进行关注，文字变成已关注。<br/>
思路：1先设置点击事件<br/>
2点击事件中获取到input的节点对象<br/>
3value属性改成已关注<br/>
4我们需要网络请求完成一个真实的关注,使用ajax<br/>
<input type="button" value="关注" id="btn" />

</body>

异步ajax请求：

异步不许要等待前面的事情做没做完，可以同时进行，前面有一条河，河上有好几个桥，人们可以同时过桥去买票，这是异步，不安全

AJAX<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
document.getElementById("btn").onclick = function() {
var xhr = new XMLHttpRequest();
if(xhr == null) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET", "click1.html", true);
//因为请求耗时，我们采用异步的方式，js会创建一个线程，在这个子线程中进行网络请求
xhr.send();
//那么以下这句话不会等待网络请求结束之后才会执行，那么他执行的时候很可能网络请求没有结束，没有结束就获取到数据就是空白
//var text = xhr.responseText
//对readystate数值的监听，每次readystate数值发生改变都会执行到onreadystatechange这个函数
//我们需要做的就是对readystate进行监听
xhr.onreadystatechange = function() {
//只能说明请求完成，不能表示请求已经成功，可能会出现404,500
if(xhr.readyState == 4) {
alert('请求已经完成')
//请求成功，没有出现异常
if(xhr.status==200){
alert(xhr.responseText)
}else{
alert('网络异常')
}
}
}
}
}
</script>
</head>

<body>

</body>

ajax与servlet结合实现关注的效果：

ajax部分代码：

<head>

</body>

servlet代码：

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 获取请求参数
// 操作数据库
// 把结果告知客户端
String userid = req.getParameter("userid");
String roomid = req.getParameter("roomid");
System.out.println(userid);
System.out.println(roomid);
// 操作数据库略

resp.getWriter().print("1");

ajax主要是实现了：1，ajax通过点击事件提交数据到了servlet。2，servlet通过一系列代码操作数据库以后，将结果返回给前端。3，ajax嘞，它又可以获取到从servlet发送的数据，然后就会通过这个结果，把结果再展示出来，这才是ajax学习的重点，精华，重中之重。

通过与服务器进行少量数据交换，可以使网页实现异步局部的更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

用到ajax的地方：

1第一、输入值校验的问题申请用户的时候检查用户名是否重复
2第二、层级联动显示的问题。级联菜单，导航树等
3第三、请求结果只改变部分页面 ,数据录入和列表显示在同一个页面如，论坛的回复帖子和帖子列表在一个页面上的时候。
4第四、由于技术原因而使用iframe的问题避免iframe的嵌套引入的技术难题
5第五、翻页，下一页。不需要刷新的翻页

wyd_Heart

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax学习

重点哦：ajax主要是实现了：1，ajax通过点击事件提交数据到了servlet。2，servlet通过一系列代码操作数据库以后，将结果返回给前端。3，ajax嘞，它又可以获取到从servlet发送的数据，然后就会通过这个结果，把结果再展示出来，这就是请求的一系列过程，实现局部更新！！！这才是ajax学习的重点，精华，重中之重。req.getParameter("username")，这个get...
复制链接

扫一扫