[学习笔记]XMLHttpRequest实现局部刷新
2016-04-16 13:22
375 查看
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<input type="text" id="name"/>
<input type="button" name="submit" value="验证用户名是否已经存在" onclick="submit()">
<div id="message"></div>
<script type="text/javascript">
var xmlhttp;
function submit(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMineType){
xmlhttp.overrideMineType("text/xml");
}
}else if (window.AciveXObject){
var MSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var n=0;n<MSXML.length;n++){
try{
xmlhttp = new ActiveXObject(MSXML
);
break;
}catch(e){}
}
}else{
alert("不能建立XMLHttpRequest对象");
return false;
}
var name=document.getElementById("name").value;
if(name == null || name == ""){
alert("用户名不能为空");
}
xmlhttp.open("GET","AJAX?name=" + name,true);
xmlhttp.onreadystatechange=callback;
xmlhttp.send(null);
}
//回调函数
function callback(){
//http响应已完成接收
if(xmlhttp.readyState == 4){
//由服务器返回信息成功
if(xmlhttp.status == 200){
var messageNode=document.getElementById("message");
messageNode.innerHTML=xmlhttp.responseText;
}
}
}
</script>
</body>
</html>
服务器端代码:
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String old=request.getParameter("name");
if(old==null){
out.println("用户名不能为空");
}else{
//String name=new String(old.getBytes("ISO8859-1"),"gb2312");
String name=URLDecoder.decode(old,"utf-8");
System.out.println(name);
if(name.equals("zhangxiao")){
out.println("用户名[" + name + "]已经存在，请使用其他用户名");
}else{
out.println("用户名[" + name + "]尚未存在，可以使用该用户名");
}
}
}finally{
out.close();
}
}
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<input type="text" id="name"/>
<input type="button" name="submit" value="验证用户名是否已经存在" onclick="submit()">
<div id="message"></div>
<script type="text/javascript">
var xmlhttp;
function submit(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMineType){
xmlhttp.overrideMineType("text/xml");
}
}else if (window.AciveXObject){
var MSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var n=0;n<MSXML.length;n++){
try{
xmlhttp = new ActiveXObject(MSXML
);
break;
}catch(e){}
}
}else{
alert("不能建立XMLHttpRequest对象");
return false;
}
var name=document.getElementById("name").value;
if(name == null || name == ""){
alert("用户名不能为空");
}
xmlhttp.open("GET","AJAX?name=" + name,true);
xmlhttp.onreadystatechange=callback;
xmlhttp.send(null);
}
//回调函数
function callback(){
//http响应已完成接收
if(xmlhttp.readyState == 4){
//由服务器返回信息成功
if(xmlhttp.status == 200){
var messageNode=document.getElementById("message");
messageNode.innerHTML=xmlhttp.responseText;
}
}
}
</script>
</body>
</html>
服务器端代码:
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String old=request.getParameter("name");
if(old==null){
out.println("用户名不能为空");
}else{
//String name=new String(old.getBytes("ISO8859-1"),"gb2312");
String name=URLDecoder.decode(old,"utf-8");
System.out.println(name);
if(name.equals("zhangxiao")){
out.println("用户名[" + name + "]已经存在，请使用其他用户名");
}else{
out.println("用户名[" + name + "]尚未存在，可以使用该用户名");
}
}
}finally{
out.close();
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用 Retrofit 和 okhttp 强制缓存失效问题
- HttpClientUtil读取网络服务类容
- 网络编程--xml数据解析
- ios多线程操作（十二）—— 自定义NSOperation实现网络下载后回调
- 1、cas4.0 单点登录 之 https证书
- java之网络编程
- TCP/IP三次握手与四次挥手
- 3--TCP三次握手
- 网络直播电视之M3U8解析篇 （下）
- The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
- 【金融支付】名词：支付账户、备付金、网络支付、银行卡清算、贷记卡、代扣、代付
- 《网络工程师》 Part5 无线通信网
- TCP/IP卷一（第四章学习）
- C# 通俗解释网络通信中的“报头”
- CentOS网络接口文件详解(ifcfg-eth)
- AFNetworking网络请求networkactivityindicator不显示
- maven设置http代理
- IOS学习笔记(四)之ASIHTTPRequest
- htmlunit.WebClient 和 client.HttpClients 的比对
- Muduo网络库源码分析（五）Acceptor和TcpServer类