------------------------ajax1.html--------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jslib/verifyown.js"></script>
</head>
<body>
用户名: <input type="text" id="userName" />
<input type="button" value="提交" onclick='verify()' />
<div id="result" ondblclick='hehe()'>aaa</div>
</body>
</html>
-----------------------verifyown.js----------------------------------
//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步交互
var xmlhttp;
function verify(){
//1. 使用dom的方式获取文本框中的值
//getElementById("userName")是dom中获取元素节点的一种方法,一个元素节点对应HTML页面中的一个标签,
//如<input> 。value可以获取一个元素节点的value属性值
var userName= document.getElementById("userName").value;
//2.创建XMLHttprequest对象
//这是XMLHttprequest对象使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest) {
//针对firefox, Mozillar,Opera,Safari,IE7,IE8
xmlhttp=new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType)
{
xmlhttp.overrideMimeType("text/xml");
}
} else if(window.ActiveXObject){
//针对ie6,ie5,ie5.5
//两个可以用于创建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){
}
}
}
//确认XMLHTTPRequest对象创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败");
} else{
// alert(xmlhttp.readyState);
}
//2.注册回调函数
//注册回调函数时,只需要函数名,不要回括号
//我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
xmlhttp.onreadystatechange=callback;
//3.设置连接信息
//第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post
//第三个参数表示采用异步还是同步方式,true表示异步
xmlhttp.open("GET","AJAXServer?name="+userName,true);
//4.发送数据,开始 和服务器进行交互
//同步方式下,send这句话会在服务器段数据回来后才执行完
//异步方式下,send这句话会立即完成执行
xmlhttp.send(null);
}
//回调函数
function callback(){
alert(xmlhttp.readyState);
//5.接收响应数据
//判断对象的状态是交互完成
if(xmlhttp.readyState==4){
//判断http的交互是否成功
if(xmlhttp.status==200){
//获取服务器端返回的数据
//获取服务器端输出的纯文本数据
var responseText=xmlhttp.responseText;
//将数据显示在页面上
var divNode=document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML=responseText;
}
}
}
-------------------------AJAXServer-------------------------------
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
/**
* Created by IntelliJ IDEA.
* User: ming
* Date: 2008-6-11
* Time: 11:11:34
* To change this template use File | Settings | File Templates.
*/
public class AJAXServer extends HttpServlet{
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try{
// request.setCharacterEncoding("UTF-8");
// response.setContentType("text/html;charset=gb18030");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//1.取参数
String old = request.getParameter("name");
//String name = new String(old.getBytes("iso8859-1"),"UTF-8");
String name = URLDecoder.decode(old,"UTF-8");
//2.检查参数是否有问题
if(old == null || old.length() == 0){
out.println("用户名不能为空");
} else{
// String name = URLDecoder.decode(old,"UTF-8");
// byte[] by = old.getBytes("ISO8859-1");
// String name = new String(by,"utf-8");
// String name = URLDecoder.decode(old,"utf-8");
//3.校验操作
// String name = old;
if(name.equals("wangxingkui")){
//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户
//写法没有变化,本质发生了改变
out.println("用户名[" + name + "]已经存在,请使用其他用户名, ");
} else{
out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册, " );
out.println("<br/>" );
out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册, " );
}
}
} catch(Exception e){
e.printStackTrace();
}
}
}
分享到:
相关推荐
Firefox XMLHttpRequest var xhr = new XMLHttpRequest(); IE ActiveXObject * var xhr = new ActiveXObject("Microsoft.XMLHTTP"); var xhr = new ActiveXObject("MSXML2.5.0.XMLHTTP"); var xhr = new...
WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式...
XEAjax 一个不依赖于任何框架、开源的请求函数,支持XHR、jsonp以及mock等常用函数,其特点是高易用性、高扩展性、向后兼容 fetch 及完善的API ...支持 IE8+、Edge、Chrome、Firefox、Opera、Safari等...
同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待 异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言...
XEAjax 一个不依赖于任何框架、开源的请求函数,支持XHR、jsonp以及mock等常用函数,其特点是高易用性、高扩展性、向后兼容 fetch 及完善的API ...支持 IE8+、Edge、Chrome、Firefox、Opera、Safari等...
在看文章前,先指定一个变量xhr,xhr代表ajax对象。测试浏览器:ie为ie6,firefox为2,其他的未测试。统称ie6为ie,firefox2为ff。
1 获得Ajax对象 1.1 问题 如何获得XmlHttpRequest对象。 1.2 方案 区分浏览器,使用不同的获取方式。 1.3 步骤 步骤一: 新建ajax01.html页面 新建一个Web工程,在WebRoot下新建... //确保IE7,IE8,FireFox下可以运行
Ajax原理: 客户端通过浏览器的内置对象... //step1:创建一个兼容浏览器各个版本的XMLHttpRequest对象 if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari xhr = new XMLHttpRequest(); }
最近看JavaScript高级程序设计,大有收获,接下来几天写一下读书笔记。之前写了一篇Ajax初步理解的随笔,里面有个... try { // Firefox, Opera 8.0+, Safari,IE7+ xhr = new XMLHttpRequest(); } catch (e) { // Inter
WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式...
WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式...
提供一种快速简单的方式来写入 日志讯息到Mozilla Firefox的Firebug扩充插件画面终端、或者Safari JavaScript终端。 表单 提供简易产生鼠标移过弹出 选单的方式。 滑块 提供一般性滑块组件让用户可在有限范围内...
IE用户无法在线查看本文档,请下载jQuery API Version1.5 中文版AIR客户端查看,或者使用chrome,safari,firefox,opera等浏览器查看!!! jQuery 1.5 API Cheat Sheet来源 Selectors Basics #id element .class, ...
因云村网页版播放器更改XHR(fetch)实现,发出的选项要求被重定向后返回非2XX状态码导致预检失败,此异常会导致歌曲播放进度记录出现问题(下一首歌不从头开始播放 ),不重置选项请求又会因DNS解析失败而报错,...