ajax特点:局部刷新
ajax的核心或引擎 :XMLHttpRequest对象
优势:
1.通过异步模式,提升了用户体验
2.优化了浏览器和服务器之间的传输,减少了不必要的数据往返,减少了带宽占用
3.ajax引擎在客户段运行,承担了一部分本来由服务器来承担的功能,从而减少了大用户量下的服务器负载
ajax的核心或引擎 :XMLHttpRequest对象
优势:
1.通过异步模式,提升了用户体验
2.优化了浏览器和服务器之间的传输,减少了不必要的数据往返,减少了带宽占用
3.ajax引擎在客户段运行,承担了一部分本来由服务器来承担的功能,从而减少了大用户量下的服务器负载
实例
1.用 ajax 编写登录系统
JS代码
function User(){
var username = $("#userid").val();
var password =$("#userpad").val();
$.get("UserServlet",{username:username,password:password},function(data){//传输数据,date为接收到的数据
if(data=="1")
alert("用户名不存在");
else
alert("用户名存在");
});
}
var username = $("#userid").val();
var password =$("#userpad").val();
$.get("UserServlet",{username:username,password:password},function(data){//传输数据,date为接收到的数据
if(data=="1")
alert("用户名不存在");
else
alert("用户名存在");
});
}
HTML代码
<div align="center">
用户名:<input type="text" id="userid" value="用户名"/>
密码:<input type="password" id="userpad"/>
<input type="button" οnclick="User()" value="提交">
</div>
用户名:<input type="text" id="userid" value="用户名"/>
密码:<input type="password" id="userpad"/>
<input type="button" οnclick="User()" value="提交">
</div>
Servlet代码
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
UserDao userDao = UserDao.getInstance();
Map<String, String> map = new HashMap<String, String>();
map.put("username", username);
map.put("password", password);
User user = userDao.getMap(map);
PrintWriter out =response.getWriter();
if(user==null){
out.print("1");//向页面返回数据
}else{
out.print("0");
}
}
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
UserDao userDao = UserDao.getInstance();
Map<String, String> map = new HashMap<String, String>();
map.put("username", username);
map.put("password", password);
User user = userDao.getMap(map);
PrintWriter out =response.getWriter();
if(user==null){
out.print("1");//向页面返回数据
}else{
out.print("0");
}
}
(jdbc部分见文章《通过Servlet验证登录信息并录入登录信息》)
选择器
html代码
<div id="notMe" ><p>id="notMe"</p></div>
<b>字体加粗</b>
<div class="class">这是class</div>
1.id选择器
$("#notMe
")
结果
<div id="notMe" ><p>id="notMe"</p></div>
2.标签选择器
$("b")
结果
<b>字体加粗</b>
3.class选择器
$(".class")
结果
<div class="class">这是class</div>
4.多个查找
HTML代码
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
内容
$("div,span,p.myClass")
结果
<div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span>
HTML代码
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" /> <input name="nn"/>
5.给定的祖先元素下匹配所有的后代元素
内容
$("form input")
结果
<input name="name" />, <input name="newsletter" />
6.
给定的父元素下匹配所有的子元素
$("form >input")
结果
<input name="name" />
7.匹配所有紧接在 form 元素后的 input 元素--注:匹配到所有form后的紧挨着的input元素
$("form+input")
结果
<input name="none" />
8.匹配 form 元素之后的所有 input 元素
$("form~input")
结果
<input name="none" /> <input name="nn"/>
9.匹配 的第一个元素
$("input:first")
结果
<input name="name" />
10.$("h1,h2").remove();//删除选中的部分、
remove()
HTML代码 <h1>这是H1</h1>
H中间
<h2>这是H2</h2>
结果
H中间
11删除选中的部分,相当于清空标签内的内容留下标签、
empty()
$("h1,h2").empty();
HTML代码
<h1>这是H1
</h1>
H中间
<h2>这是H2</h2>
结果
<h1></h1>
H中间
<h2></h2>