Ajax：Asynchronous JavaScript and XML
功能：允许浏览器与服务器通信而无需刷新当前页面
例如：用户名检验，购物车更新等，能极大提高用户体验度
服务器与客户端的语言传输格式
1：HTML：轻松嵌入预订格式
2：XML：通用，但沉重
3：Json：方便简单，但有一定安全隐患
原生Ajax
原理：通过使用XMLHTTP组件XMLHttpRequest的方法，进行异步数据读取。
运行流程：
var request = new XMLHttpRequest( );
request.open（“method”，“url”）；//建立对服务器的调用
request.send（）； //向服务器发送请求
Request.onreadystatechange = function（）{}；//追踪改变
request.readystate ==4 //判断响应是否完成，共四个状态
Request.status == 200||Request.status ==304//判断响应是否可用
request.responseText //以文本格式返回响应结果
request.responseXML //以XML格式返回响应结果
jQuery封装的Ajax方法
1：$.load( url，method，回调函数 ).直接载入需要的HTML。
Method默认为GET方法
可通过 url+空格+selector 来选择指定处返回。
如：var url = this.href+“ h2 a”；
2：$.get( url，args，回调函数) , $.post(url，args，回调函数 )；
主页：
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$(":input[name = 'username']").change(function(){
var val = $(this).val();
val = $.trim(val);
if(val |= ""){
var url = "valiateUserName";
var args = {"userName":val,"time":new Date()};
$.post(url,args,function(data){
$("#message").html(data);
});
}
});
})
</script>
</head>
<body>
<form method="post" action="">
UserName:
<br/><input type="text" name="username">
<div id="message"></div>
<br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
Servlet的配置和映射
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>valiateUserNameServlet</servlet-name>
<servlet-class>valiateUserNameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>valiateUserNameServlet</servlet-name>
<url-pattern>/valiateUserName</url-pattern>
</servlet-mapping>
</web-app>
继承自HttpServlet的valiateUserNameServlet
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class valiateUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
List<String> userName = Arrays.asList("AA","BBB","CCC");
String username = request.getParameter("userName");
String result = null;
if(userName.contains(username)){
result = "<font color='red'>该用户名已经被使用</font>";
}else{
result= "<font color='red'>该用户名可以被使用</font>";
}
//response常用的三个方法
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
response.getWriter().print(result); //在浏览器中打印
}
}
注意：1.jQuey中的ajax方法中url，必须和WEB.XML中Servlet的数据匹配
2.可通过$("#message").html(data);的方式在指定位置显示需要的内容
3.谨记List<String> userName = Arrays.asList("AA","BBB","CCC");
4.List的contains（）方法，判断是否包含
易-14-10-21-1-25
773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
