AJAX—–script简单版

  • Post author:
  • Post category:其他


</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) {
			
		}







版权声明:本文为qq_33650242原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。