Ajax post / get / jquery 实现

浏览数：29 / 时间：2015年06月09日

　　今天研究ajax，如下：
　　Ajax get：
　　前台：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<script type="text/javascript">
var xmlhttp;

function createXMLHTTP()
{
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}

function checkName()
{
createXMLHTTP();
var name=document.getElementById("name").value;
xmlhttp.open("GET","ajax/checkName?name="+encodeURI((encodeURI(name)))); //打开链接
xmlhttp.send(); //发送请求
xmlhttp.onreadystatechange=callback; //当请求过程中状态发生变化是会回调这个函数
}

function callback()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
var re=xmlhttp.responseText; //服务器返回的信息
if("1"==re)
{
//可以注册
var show=document.getElementById("id_name").innerHTML="<font color=‘green‘>恭喜，可以注册！</font>";
}else
{
//不可以注册
var show=document.getElementById("id_name").innerHTML="<font color=‘red‘>对不起，不可以注册！</font>";
}
}
}
</script>
</head>
<body>
<center>
<ul>
<li>用户名：<input type="text" name="name" id="name" onblur="checkName();"><span id="id_name"></span></li>
<li>密码：<input type="password" name="pwd" id="pwd"><span id="id_pwd"></span></li>
</ul>
</center>
</body>
</html>
　　后台：

package com.sp.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

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

@WebServlet("/ajax/checkName")
public class CheckNameServ extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("gbk");
resp.setContentType("text/html;charset=gbk");
String name=req.getParameter("name");

System.out.println(URLDecoder.decode(name,"utf-8"));

PrintWriter out=resp.getWriter();
if("admin".equals(name))
{
out.print("0");
}else
{
out.print("1");
}
out.close();
}
}
　　Ajax post：
　　前台：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<script type="text/javascript">
var xmlhttp;

function createXMLHTTP()
{
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}

function checkName()
{
createXMLHTTP();
var name=document.getElementById("name").value;
xmlhttp.open("post","ajax/checkName"); //打开链接
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name="+encodeURI(encodeURI(name))); //发送请求
xmlhttp.onreadystatechange=callback; //当请求过程中状态发生变化是会回调这个函数
}

function callback()
{

if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
var re=xmlhttp.responseText; //服务器返回的信息
if("1"==re)
{
//可以注册
var show=document.getElementById("id_name").innerHTML="<font color=‘green‘>恭喜，可以注册！</font>";
}else
{
//不可以注册
var show=document.getElementById("id_name").innerHTML="<font color=‘red‘>对不起，不可以注册！</font>";
}
}
}
</script>
</head>
<body>
<center>
<form action="regist" method="post" enctype="application/x-www-form-urlencoded">
<ul>
<li>用户名：<input type="text" name="name" id="name" onblur="checkName();"><span id="id_name"></span></li>
<li>密码：<input type="password" name="pwd" id="pwd"><span id="id_pwd"></span></li>
<li><input type="submit" name="ok" value="ok" id="ok"></li>
</ul>
</form>
</center>
</body>
</html>
　　后台：

package com.sp.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

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

@WebServlet("/ajax/checkName")
public class CheckNameServ extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("gbk");
resp.setContentType("text/html;charset=gbk");
String name=req.getParameter("name");

System.out.println(URLDecoder.decode(name,"utf-8"));

PrintWriter out=resp.getWriter();
if("admin".equals(name))
{
out.print("0");
}else
{
out.print("1");
}
out.close();
}
}
　　Ajax juery：
　　这里就省略不写了，写了估计大家也看不懂
　　因为：
　　　　用的是jquery读取外部xml文件，然后，把读取的xml数据
　　　　传入后台后，再由后台转换为json，再打印到前台
　　所以，写起来不方便，这里就省略了