Ajax Jquery
一、Ajax
Ajax是异步的JavaScript和xml
同步：一个页面会一直在等待着我们服务器的响应（需要刷新我们的请求页面）
异步：不管服务器那边是否有响应 都不会影响我们的下一步操作（不需要刷新我们的页面，但是数据是变化的）
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。（不好的是会增大服务器的访问量）
1.步骤
a.创建一个Ajax对象 XmlHttpRequest 通过这个对象对服务器进行请求操作
xmlHttpRequest=new xmlHttpRequest（）；（大多数浏览器可以这样创建）
xmlHttpRequest=new ActiveObject（）；（为了保持兼容性 只有 ie5和ie6需要这样创建）
function createXMLHttpRequest() {
var xmlHttpRequest;//声明一个变量
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { //IE5 IE6
try {
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttpRequest;//返回xmlHttpRequest对象
}
b.打开链接
method: Get Post
xmlHttpRequest.open（"GET","url",true）;
c.向服务器发送请求的参数
xmlRequest.send(null);
d.调用监听的方法 获得一个相应的返回值
xmlHttpRequest.onreadystatechange
等待接收服务器那边的响应
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
当readystate==4 && status==200就可以进行接收数据了
Ajax练习：
<script type="text/javascript"> function createXMLHttpRequest() { var xmlHttpRequest;//声明一个变量 if (window.XMLHttpRequest) { xmlHttpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE5 IE6 try { xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttpRequest;//返回xmlHttpRequest对象 } function fun01(){ var xmlHttpRequest=createXMLHttpRequest(); //打开链接 xmlHttpRequest.open("Get","/Ajax/servlet/Demo1",true); xmlHttpRequest.send(null); xmlHttpRequest.onreadystatechange=function(){ //开始判断我们的响应码 if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){ var text=xmlHttpRequest.responseText; var h1=document.getElementById("h1"); h1.innerHTML=text; } } } </script> </head> <body> <input type="button" id="btn" value="请求" onclick="fun01()"> <h1 id="h1"></h1> </body>
public class Demo1 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String str="hello world"; //通过以下语句发送到Ajax中 response.getWriter().write(str); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
Ajax实现登陆操作：
<script type="text/javascript"> function createXMLHttpRequest() { var xmlHttpRequest;//声明一个变量 if (window.XMLHttpRequest) { xmlHttpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE5 IE6 try { xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttpRequest;//返回xmlHttpRequest对象 } function fun01(){ var username=document.getElementById("username") var xmlHttpRequest=createXMLHttpRequest(); //打开链接 xmlHttpRequest.open("POST","/Ajax/servlet/Demo2",true); //设置一个xmlHttpRequest 这个对象 设置一个tou xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //开始发送我们的Ajax参数 xmlHttpRequest.send("username="+username.value); //判断给Ajax的响应码 xmlHttpRequest.onreadystatechange=function(){ //开始判断我们的响应码 if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){ var text=xmlHttpRequest.responseText; var error=document.getElementById("error"); if(text==0){ error.innerHTML="正确"; }else{ error.innerHTML="用户名错误"; } } } } </script> </head> <body> <form action=""> 用户名：<input type="text" id="username" onblur="fun01()" /><span id="error"></span><br> 密码：<input type="password" /> <input type="submit" value="提交"/> </form> </body>
public class Demo2 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); String username=request.getParameter("username"); if(username.equals("zhangsan")){ response.getWriter().write("0"); }else{ response.getWriter().write("1"); } } }
二、Jquery
web前端： html css JavaScript
jsp：<% %>脚本 EL表达式简化我们作用域的输出
ESTL：简化了我们的Java脚本
Jquery：简化了我们css javascript操作
$(fuction(){
});
1）设置元素及内容
在常规的 DOM 元素中，我们可以使用 html()和 text()方法获取内部的数据。html()方法可以获取或设置 html 内容，text()可以获取或设置文本内容。
|
$('#box').html(); //获取 html 内容 $('#box').text(); //获取文本内容，会自动清理 html 标签 $('#box').html('<em>www.li.cc</em>'); //设置 html 内容 $('#box').text('<em>www.li.cc</em>'); //设置文本内容，会自动转义 html 标签 |
注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期
望能够追加数据的话，需要先获取原本的数据。
$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加数据
如果元素是表单的话，jQuery 提供了 val()方法进行获取或设置内部的文本数据。
$('input').val(); //获取表单内容
$('input').val('www.li.cc'); //设置表单内容
如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。
$("input").val(["check1","check2", "radio1" ]); //value 值是这些的将被选定
2）添加节点
为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。
var box = $('<div id="box">节点</div>'); //创建一个节点
$('body').append(box); //将节点插入到<body>元素内部
另一种方式：
$(box).appendTo('body');
3）移动节点
利用现有的方法进行节点的移动。
举例：
<span id="spanl">我是span标签</span>
<div id="div2">我是div</div>
<input type="button" onclick="click3();" value="点击我">
function click3(){
var span = $("#spanl");
var div = $("#div2");
div.insertBefore(span);// insertAfter();
}
4）删除节点
使用jQuery提供的remove()方法，此方法是将对象从页面中删除，但是有返回对象，返回的就是删除的对象。
<span id="spanl">我是span标签</span>
<div id="div2">我是div</div>
<input type="button" onclick="click4();" value="点击我">
function click4(){
var div = $("#div2").remove();
}
5）复制节点
复制节点，就是将对象重复拷贝一份，可以使用jQuery提供的clone()方法，此方法就是将对象本身进行拷贝，拷贝后返回拷贝的对象。
<div id="div1">
<span onclick="f1();" >欢迎来到 杭州归谷</span>
<button onclick="f2();">点击复制节点</button>
</div>
function f1(){
alert("点击了span标签");
}
function f2(){
var body1 = $("#body1");
var div1 = $("#div1");
body1.append(div1.clone());
}
6）替换节点
//替换节点
$('div').replaceWith('<span>节点</span>'); //将 div 替换成 span 元素
$('<span>节点</span>').replaceAll('div'); //同上
//清空节点
$('div').empty(); //删除掉节点里的内容
7）包裹节点
jQuery 提供了一系列方法用于包裹节点， 那包裹节点是什么意思呢？其实就是使用字符串代码将指定元素的代码包含着的意思。
$('div').wrap('<strong></strong>'); //在 div 外层包裹一层 strong
$('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容
$('div').wrap('<strong><em></em></strong>'); //包裹多个元素
8）属性节点
l attr()方法
设置与获取属性
举例：
<span title=”abc”>abc</span>
<script type=”text/javascript”>
$(function(){
$(“span”).attr(“title”,”weclome”);
});
</script>
结果：<span title=”weclome”>abc</span>
在页面标签元素中，每个标签元素都拥有多个属性，因此jQuery也提供了使用属性对象的方式来对元素节点进行操作，属性对象JS中的面向对象方式：{“title”:”weclome”,”id”:”sp1”}，这个方式同时也是JSON所使用的传输方式，也就是JSON串。也可以使用Object对象方式来使用。
<span title=”abc”>abc</span>
<script type=”text/javascript”>
$(function(){
$(“span”).attr({“title”:”weclome”,”id”:”sp1”});
});
</script>
结果：<span title=”weclome” id=”sp1”>abc</span>
var obj = new Object();
obj.title = “welcome”;
obj.id=”sp1”;
$(“span”).attr(obj);
l removeAttr()
移除元素属性
举例：
<span title=”sp1”>abc</span>
<script type=”text/javascript”>
$(function(){
$(“span”).removeAttr(“title”);
})
</script>
结果：<span>abc</span>
