ajax入门示例
2013-04-28 22:03
246 查看
===========================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>我的ajax请求</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 src="js/HttpXMLRequest.js" type="text/javascript" language="javascript"></script>
</head>
<body>
用户名:<input name="uName" id="uName"></input><span id="msg"></span><br />
<input type="button" value="验证" onclick="check('uName')">
</body>
</html>
===============================js==============================
function $(id){//通过id取得节点
return document.getElementById(id);
}
//为url后面设置变化的参数
function attchTime(url){
if(url.valueOf("?") != -1){
return url+"&t="+new Date().valueOf();
}
return url+"?t="+new Date().valueOf();
}
var request = null;
function check(id){
//取得节点下的值
var value = $(id).value;
//用get提交
//设置url,对参数进行encode
var url = "ajax.do?uName="+encodeURI(encodeURI(value));
//为url后面拼接时间参数
url = attchTime(url);
doGet(url,function(data){
$("msg").innerHTML = data;
$("msg").style.display = "block";
});
//用Post提交
var url = "ajax.do";
value = encodeURI(encodeURI(value));
doPost(url,"uName="+value,function(data){
$("msg").innerHTML = data;
$("msg").style.display = "block";
});
}
=======================get请求方式======================
//发送一个get请求
function doGet(url,callback){
//取得HttpXMLRequest对象
request = getHttpXMLRequest();
//当状态改变是调用函数
request.onreadystatechange = function(){
//当服务器响应完毕，且没有错误
if(request.readyState == 4 && request.status == 200){
callback(request.responseText);//把服务器得到的文本值交给callback函数处理
}
}
request.open("GET",url);
request.send(null);
}
=========================post请求方式=================
//发送post请求
function doPost(url,parameter,callback){
//取得HttpXMLRequest对象
request = getHttpXMLRequest();
request.open("POST",url);
//当状态改变触发事件
request.onreadystatechange = function(){
//当服务器响应完毕，且没有错误
if(request.readyState == 4 && request.status == 200){
callback(request.responseText);//把服务器输出的文本值处理
}
}
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send(parameter);
}
==============================创建HttpXMLRequest对象===========================
function getHttpXMLRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject && !window.XMLHttpRequest) {
var aVersion = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp",
"Microsoft.XMLHttp" ];
for ( var i = 0; i < aVersion.length; i++) {
try {
var oXmlHttp = new ActiveXObject(aVersion[i]);
return oXmlHttp;
} catch (ex) {
}
}
}
throw new Error("创建XMLHttpRequest对象出错!");
}
================================Servlet==========================
package com.my.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxDemo extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
//取得客户端参数
String userName = req.getParameter("uName");
//对客户端参数进行解码
String uName = URLDecoder.decode(userName, "UTF-8");
System.out.println(uName);
PrintWriter out = resp.getWriter();
out.print("得到参数-->"+uName);
}
}
===========================web.xml的配置===============================
<?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>myServlet</servlet-name>
<servlet-class>com.my.web.AjaxDemo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>myServlet</servlet-name>
<url-pattern>/ajax.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
<%@ 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>我的ajax请求</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 src="js/HttpXMLRequest.js" type="text/javascript" language="javascript"></script>
</head>
<body>
用户名:<input name="uName" id="uName"></input><span id="msg"></span><br />
<input type="button" value="验证" onclick="check('uName')">
</body>
</html>
===============================js==============================
function $(id){//通过id取得节点
return document.getElementById(id);
}
//为url后面设置变化的参数
function attchTime(url){
if(url.valueOf("?") != -1){
return url+"&t="+new Date().valueOf();
}
return url+"?t="+new Date().valueOf();
}
var request = null;
function check(id){
//取得节点下的值
var value = $(id).value;
//用get提交
//设置url,对参数进行encode
var url = "ajax.do?uName="+encodeURI(encodeURI(value));
//为url后面拼接时间参数
url = attchTime(url);
doGet(url,function(data){
$("msg").innerHTML = data;
$("msg").style.display = "block";
});
//用Post提交
var url = "ajax.do";
value = encodeURI(encodeURI(value));
doPost(url,"uName="+value,function(data){
$("msg").innerHTML = data;
$("msg").style.display = "block";
});
}
=======================get请求方式======================
//发送一个get请求
function doGet(url,callback){
//取得HttpXMLRequest对象
request = getHttpXMLRequest();
//当状态改变是调用函数
request.onreadystatechange = function(){
//当服务器响应完毕，且没有错误
if(request.readyState == 4 && request.status == 200){
callback(request.responseText);//把服务器得到的文本值交给callback函数处理
}
}
request.open("GET",url);
request.send(null);
}
=========================post请求方式=================
//发送post请求
function doPost(url,parameter,callback){
//取得HttpXMLRequest对象
request = getHttpXMLRequest();
request.open("POST",url);
//当状态改变触发事件
request.onreadystatechange = function(){
//当服务器响应完毕，且没有错误
if(request.readyState == 4 && request.status == 200){
callback(request.responseText);//把服务器输出的文本值处理
}
}
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send(parameter);
}
==============================创建HttpXMLRequest对象===========================
function getHttpXMLRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject && !window.XMLHttpRequest) {
var aVersion = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp",
"Microsoft.XMLHttp" ];
for ( var i = 0; i < aVersion.length; i++) {
try {
var oXmlHttp = new ActiveXObject(aVersion[i]);
return oXmlHttp;
} catch (ex) {
}
}
}
throw new Error("创建XMLHttpRequest对象出错!");
}
================================Servlet==========================
package com.my.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxDemo extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
//取得客户端参数
String userName = req.getParameter("uName");
//对客户端参数进行解码
String uName = URLDecoder.decode(userName, "UTF-8");
System.out.println(uName);
PrintWriter out = resp.getWriter();
out.print("得到参数-->"+uName);
}
}
===========================web.xml的配置===============================
<?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>myServlet</servlet-name>
<servlet-class>com.my.web.AjaxDemo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>myServlet</servlet-name>
<url-pattern>/ajax.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax入门示例完整代码
- 基于JQUERY的AJAX 简单示例 入门知识
- Ajax: Ext-Core 入门示例代码之Hello Word
- [转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的asp.net示例
- Ajax入门和简单示例
- 使用Ajax的Get和Post获取信息的入门示例
- AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
- Ajax异步传输与PHP实现交互示例
- 使用$.getJSON实现跨域ajax请求示例代码
- Log4Net 入门示例
- 高性能Web服务器Nginx的配置与部署研究（1）Nginx简介及入门示例
- struts2简单入门-登陆示例
- cuda编程入门示例12
- ajax后台处理返回json值示例代码
- cuda编程入门示例25
- 雾山的Robotium学习笔记---环境搭建及入门示例
- 使用ajax局部刷新gridview进行数据绑定示例
- CI框架入门之MVC简单示例
- 利用AJAX完成控件的联动（示例）以及验证
- AJAX示例应用-2（两级菜单的联动）-方式1（服务器以字符串形式返回子类别的id，name）