刚刚学习了ajax,初步整理一下知识点
1ajax是通过XmlHttpRequest对象和服务器进行通信的,它的优点是不用刷新页面就可以和服务器通信
2ajax三种传输数据的格式:
(1)xml :xml难解析,笨重,但是在全球上通用
(2)hmtl :不用解析可以直接放到文档中,通常用于更新很小一部分,但是不便于大量的数据,而且需要拼装
(3)JSON:小巧,又面向对象的特点,有很多第三方的jar包可以把json对象转换成为json字符串
3使用jquery完成对ajax的操作
(1)load方法可以用于hmtl中的任何一个元素,比如 a,div 元素,把结果直接加为到对应节点的子元素,通常用load加载html元素
var obj=...
var ur =。。
var arg ={"key ":"value"}
load(url,arg)
(2) $.get(url,arg,function(data){
})
url :ajax请求目标的urll
arg:传递参数,json格式
data:ajax响应成功后的对象,返回对象可能是xml,json hmtl
(3) $.get(url,function(data){
},"JSON")
data:ajax响应成功后的JSON对象
(4) $.post(url,"JSON")
(5) $.getJSON(url,function(data){
}) 4下面粘贴使用ajax load方法的代码,达到局部刷新,至于helloajax.txt文件,内容自己写即可
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'testAjax.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="script/jquery-1.6.2.js"></script> <script type="text/javascript"> $(function(){ $("a").click(function(){ var url =this.href; $("#content").load(url); return false; }); }); </script> </head> <body> <a href="helloajax.txt"> hello ajax</a> <div id="content"></div> </body> </html>
二 :使用ajax jquery servlet 进行检验用户名
(1)jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'v.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-1.6.2.js"></script> <script type="text/javascript"> $(function(){ $(":input[name='username']").change(function(){ var val=$(this).val(); val=$.trim(val); if(val!=""){ var url="${pageContext.request.contextPath}/valiateUsername"; var arg={"username":val,"date":new Date()}; $.post(url,function(data){ $("#message").html(data); }); } }); }); </script> </head> <body> <form name="form1" id="form1"> 用户名:<input type="text" name="username" id="username"/> <br> <div id="message"></div> <br> <input type="submit" value="注册"/> <br> </form> </body> </html>
(2)servlet代码
|
|
|
package com.lin.text;
import java.io.IOException;
import java.io.PrintWriter;
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 V extends HttpServlet {
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
}
public void doPost(HttpServletRequest request,IOException {
List<String> usernames =Arrays.asList("AAA","BBB","CCC");
String username=request.getParameter("username");
System.out.print(username);
String result =null;
if(usernames.contains(username)){
result="<font color='red'>regist</font>";
}else{
result="<font color='red'>no</font>";
}
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
response.getWriter().print(result);
}
public void init() throws ServletException {
// Put your code here
}
}
|
(3)需要注意的是 servlet中url地址 一定要和ajax中的servlet的一致 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|