</pre>恩,简单记录一下ajax的简化操作:操作只有<span style="color:#ff0000;">用户名的input</span>调用了ajax<p></p><p>这里是jsp的显示代码</p><p><span style="color:#ff0000;"></span></p><pre name="code" class="html">用户名<input type="text" id="textid" οnblur="sendMessge()"/><span id="s"></span><br/>
邮箱<input type="text" /><br/>
兴趣<input type="text" /></span><br/>
这里是JavaScript的方法:
得到XMLHttpRequest对象的ajax,很恶心
function getAjax(){
var ajax=null;
try {
//IE版本9以上的
ajax=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//IE9以下的版本
ajax=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
//不是IE的浏览器
ajax=new XMLHttpRequest();
//针对某些版本的mozillar游览器的bug进行修正
if(ajax.overrideMimeType){
ajax.overrideMimeType("text/xml");
}
} catch (e) {
alert("浏览器版本太垃圾");
}
}
}
return ajax;
}
onblur的光标离开调用的方法;使用ajax传输数据到后台
//得到ajax的对象
var requset=null;
//发送消息格式,在组件中用onblur光标离开方法调用
function sendMessge(){
requset=getAjax();//得到ajax的XMLHttpRequest对象
//得到servlet回传消息
requset.onreadystatechange=callback;//指定回调的方法,不能有()
var textid=document.getElementById("textid").value;
//ran=Math.random()的随机数除去AJAX只执行一次
var url="servlet/Ajax?ran="+Math.random();//传递到servlet的路径
requset.open("post",url,true);//传递方法open()方法
//post请求附加语句
requset.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post请求需要设定http请求头
var param="textid="+textid;//传递内容
//两次编码,需要两次编码
param=encodeURI(param);
param=encodeURI(param);
requset.send(param);//发送内容,send()方法
}
在onblur调用的方法中的方法
requset.onreadystatechange=callback;//指定回调的方法,不能有()
得到servlet回传的数据
function callback(){
var s=document.getElementById("s");
if(requset.readyState==4){//读取响应结果 0为XMLHTTPRequest对象没有完成初始化
//1 对象开始发送请求 //2 对象方式请求完成 //3 对象开始读取响应,还没有结束
if(requset.status==200){//服务器响应正常 400 无法找到请求的资源
//403 没有访问权限 //404 访问的资源不存在 //500 服务器内部错误
var str=requset.responseText;//获得响应的文本内容
if(str=="true"){//用户名可以使用
s.innerHTML="<font color='red'>√</font>";//获得响应的xml文档对象
}else{//用户名不可以被使用
s.innerHTML="<font color='green'>×</font>";<span style="font-family: Arial, Helvetica, sans-serif;">//获得响应的xml文档对象</span>
}
}else{
alert("响应错误,请重试");
}
}else{
s.innerHTML="用户名验证中";
}
终结:
AJAX
即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX
= 异步 JavaScript和XML(标准通用标记语言的子集)
1.传输格式固定
2
.如果
ajax只被调用一次的问题
a.在提交路径中加入的ran=Math.random()
b.全局变量的ajax对象中 var requset=null; 光标离开调用方法中首行获取该对象
requset=getAjax();
3.使用post提交方法必须加入这句话
requset.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
4.最好是两次编码,我也不知道为什么
var param="textid="+textid;//传递内容
//两次编码,需要两次编码
param=encodeURI(param);
param=encodeURI(param);
servlet的处理页面
response.setContentType("text/html");
request.setCharacterEncoding("utf-8");//针对表单提交
response.setCharacterEncoding("utf-8");
response.setHeader("Charset", "utf-8");//是用来设置返回页面的头 meta 信息, 使用时response.setHeader( name, contect );
PrintWriter out=response.getWriter();
String textid=request.getParameter("textid");
textid=java.net.URLDecoder.decode(textid,"utf-8");//可以对要传递的中文进行编码
/*
* 这里不适用数据库查询,使用本地字符
*/
try {
if(textid.equals("123")){
out.print("false");//该用户名存在了,传false给web端,表示用户名不可用
}else{
out.print("true");//该用户名可以使用
}
} catch (Exception e) {
}