ajax入门例子

来源:互联网 发布:平凉切纸机复位数据 编辑:程序博客网 时间:2024/03/29 00:13

这里只贴代码,有关ajax概念和ajax的细节:http://www.cnblogs.com/Garden-blog/archive/2011/03/11/1981778.html



register.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="com.itheima.service.bean.Person"%>
<%
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>注册页面</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">
var xmlHttp ;
  function verify(){
//通过dom方式获取文本框中的值
var name = document.getElementById("username").value;
//1、创建XMLHTTPRequest对象,这里是模版代码


//针对IE和其他类型的浏览器建立这个对象的不同方式写代码
if(window.XMLHttpRequest){ //针对于Firefox,Mozilalr,Opera,Safari,IE7,IE8
  xmlHttp = new XMLHttpRequest();
//针对某些特定版本的Mozillar浏览器的BUG进行修正
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对于IE6,IE5.5,IE5
//两个可以用于创建XMLHttpRequest对象的挂件名称保存在一个加js的数据里,前面的版本较新
var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activexName.length;i++){
try{
  xmlHttp = new ActiveXObject(activexName[i]);
  break;
}catch(e){
}
}
}
if(!xmlHttp){
alert("XMLHttpRequest创建失败!");
alert(xmlHttp);
return ;
}else{
}
//2、注册回调函数
xmlHttp.onreadystatechange = callback;

//第一参数请求方式,第二个参数 路径  ,第三个参数  true异步处理,false 
xmlHttp.open("GET","<%=request.getContextPath()%>/servlet/register?username="+name,true);
xmlHttp.send(null);//所有的参数都通过这个方法传给服务器
}





//使用post方式请求数据
//请求函数,callServer()
//显示函数   showData()
function callServer(){
/*第一步 创建XMLHttpRequest对象
设置post方式请求服务器
设置post方式的参数
发送请求
调用showData()方法显示数据*/
<%  
    Person alleged = new Person();    //声明并实例化SimpleBean对象  
    alleged.setPersonName("alleged");                 //设置name属性  
    alleged.setPassword("1234");
    String str = alleged.tostring();  
    //设置age属性  
%>
/*当时想把javaBean对象从脚本代码中取过来,然后把这个对象设置成属性,这里是错误的,
jsp脚本代码是给服务器解释的,
js是给客户端解析的
所以这种思维是不对的*/
if(window.XMLHttpRequest){ //针对于Firefox,Mozilalr,Opera,Safari,IE7,IE8
 xmlHttp = new XMLHttpRequest();
//针对某些特定版本的Mozillar浏览器的BUG进行修正
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对于IE6,IE5.5,IE5
//两个可以用于创建XMLHttpRequest对象的挂件名称保存在一个加js的数据里,前面的版本较新
var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activexName.length;i++){
try{
 xmlHttp = new ActiveXObject(activexName[i]);
 break;
}catch(e){
}
}
}
if(!xmlHttp){
alert("XMLHttpRequest创建失败!");
alert(xmlHttp);
return ;
}else{
}
//回调函数,当服务器回消息了后调用callback
xmlHttp.onreadystatechange=callback;
xmlHttp.open("POST","<%=request.getContextPath()%>/servlet/register",true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//这行代码很关键,用来把字符串类型的参数序列化成Form Data 
xmlHttp.send("username=cheng");
//这里发送请求参数



//xmlHttp.send(newStr);

}




function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status == 200){
var responseText = xmlHttp.responseText;
document.getElementById("result").innerHTML = responseText;
}else{
}
}else{
}
}
</script>
</head>


<body>
<span>原始js GET方式</span><input type="text" name="user" id="username" size="20" />
<input type="button" name="check" id="check" value="校验"
onclick="verify()" />
<br />
<br />
<span>原始js Post方式</span>
<input type="button" name="postcheck" id="postcheck" value="post"
onclick="callServer()" />
<br/>
<br/>
<div id="result"></div>
</body>
</html>


servlet处理界面


package com.itheima.service;


import java.io.IOException;
import java.io.PrintWriter;


import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class register extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("hello ajax");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String value = request.getParameter("username");
PrintWriter out = response.getWriter();
if(value!=null){
out.println("注册成功!"+request.getParameter("username")+"****"+request.getParameter("password"));
}else{
out.println("注册失败");
}
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("hello  post ajax ");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String value = request.getParameter("username");
PrintWriter out = response.getWriter();
if(value!=null){
out.println("注册成功!"+request.getParameter("username")+"****"+request.getParameter("password"));
}else{
out.println("注册失败");
}
out.flush();
out.close();
}


}

0 0