ajax入门例子

最新推荐文章于 2023-04-12 23:37:53 发布

alleged

最新推荐文章于 2023-04-12 23:37:53 发布

阅读量335

点赞数

分类专栏： javaweb 文章标签： java web

本文链接：https://blog.csdn.net/alleged/article/details/52250658

版权

javaweb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里只贴代码，有关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">

<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="校验"
οnclick="verify()" />
<br />
<br />
<span>原始js Post方式</span>
<input type="button" name="postcheck" id="postcheck" value="post"
οnclick="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();
}

}