重点哦:
ajax主要是实现了:1,ajax通过点击事件提交数据到了servlet。2,servlet通过一系列代码操作数据库以后,将结果返回给前端。3,ajax嘞,它又可以获取到从servlet发送的数据,然后就会通过这个结果, 把结果再展示出来,这就是请求的一系列过程,实现局部更新!!!这才是ajax学习的重点,精华,重中之重。
req.getParameter("username"),这个getParameter得到的是url请求参数里的键值。
点击事件一:
ajax的缺点:ajax使用时候一般数据的传输尽量单一和简陋,不要传输大量的数据。
<head>
<meta charset="utf-8" /><title></title>
<style>
</style>
<script>
//定义一个函数
function test() {
alert('点击了')
}
</script>
</head>
<body>
<input type="button" value="点击" id="btn" οnclick="test()" />
</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>
<input type="button" value="关注" id="btn" /></body>
ajax与servlet结合实现关注的效果:
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", "guanzhu", 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>
<input type="button" value="关注" id="btn" />
</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第五、翻页,下一页。 不需要刷新的翻页