原生javascript---Ajax

TiFa.L.Hart

浏览: 16714 次
性别:
来自: 广州

最近访客更多访客>>

liuwwww

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript ajax

比较懒，由于这个都是之前自己做的，网上这些东西多的数不胜数，但是下面是我自学后直接将总结写在了jsp里面，所以注释比真正的代码还多，里面包含了web缓存问题和乱码问题解决，这是怕我自己会以后忘记。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
    
    <title>javascript中Ajax应用例子</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	


	<script type="text/javascript">



	/* ---------------------------------------------------------------
	  AJAX技术     --->  XMLHttpRequest的使用步骤：
		1.建立XMLHttpRequest对象     -->由于不同浏览器不同，因此要针对不同浏览器而对XMLHttpRequest做不同的实例化方式
		2.注册回调方法
		3.使用open()方法设置和服务器端交互的基本信息，如：交互方法(GET/POST)、服务器地址、是否异步调度
		4.设置发送的数据，开始和服务器端交互
		5.在回调方法<在第2步中已注册>中判断交互是否结束（xmlhttp.readyState == 4），相应是否正确（xmlhttp.status == 200），并获取从服务器中返回的数据


		另外，XMLHttpRequest对象的状态(即：readyState的值): 
		<其中可以用abort()方法停止当前http请求，对应的XMLHttpRequest对象会恢复到未初始化状态>
		<请求期间，可以用onreadystatechange监听状态的变化，并调用javascript函数进行处理,详细见以下第2步>
		<****第2步中注册的回调方法，实质上在以下各个状态改变的时候都会被调用****>
			0 ：未初始化状态，对象以创建，为调用open方法
			1：open方法调用成功后，send方法未被调用
			2：send方法已调用，尚未开始接受数据
			3：正在接收数据，http响应头信息已接收，但未接收完响应数据
			4：已接收完响应数据



		获取响应数据的方法：
			responseText ：服务器响应的文本
			responseXML ： 服务器响应的ＸＭＬ内容的ＤＯＭ对象  (详细使用见下面代码)
		
		
		响应状态(status)：
			200 : 成功
			404 ：未找到
			500 ： 服务器内部错误




		
			web 请求中缓存问题：
			描述：由于请求中有些url前后请求的url内容都一致,导致某些浏览器会只访问浏览器的缓存而不访问服务器，导致访问的结果没有变，
			但是某些web应用虽然前后不同时间里的请求url都一样，但访问服务器后的结果会不一样，如： 获取验证码等,所以为了防止此问题出现
			可以在请求url中添加如下javascript代码：
				简单方式：	"serviceUrl?t=" + (new Date()).valueOf();    	<此处的“t=" + (new Date()).valueOf();”是为了防止浏览器只访问缓存而不访问服务器才添加的一个时间戳>
				url地址不确定方式：
							var url = serviceUrl;
							if(url.indexOf("?") >= 0){
								url = url + "&t=" + (new Date()).valueOf();
							}else{
								url = url + "?t=" + (new Date()).valueOf();
							}





			中文乱码问题：
			描述：由于各种设置不正确或者浏览器本身问题，导致页面显示中文导致乱码。
			解决方法：
				1.寻找根源，修正问题.如：页面和服务器所用的字符集是否一致、部署的服务器或容器对字符集设置(如Tomcat)
				2.利用javascript和java的配合强悍的去除乱码:
					页面端(注：这是javascript代码,所用的函数也是javascript的函数)：
						var name = document.getElementById("uName");
			---->>      name = encodeURI(encodeURI(name));


					服务器端(注：这里使用的是java中URLDecoder类中的方法):
						String oldName = request.getParameter("name");
			---->>		String newName = URLDecoder.decode(oldName,"utf-8"); 			 
	
	
	
	
	
	
	--------------------------------------------------------------------*/
	











	
		var	xmlhttp;  //XMLHttpRequest对象
		function myFun(){
//********************1.创建XMLHttpRequest对象
			if(window.XMLHttpRequest){
				//IE7+,Firefox,Mozillar,Opera等浏览器支持
				xmlhttp = new XMLHttpRequest();
			
				if(xmlhttp.overrideMimeType){  //这是为了防止有些浏览器发送过来的文件头中没有mimetype时会导致无法工作
					xmlhttp.overrideMimeType("text/xml");
				}
			}else if(window.ActiveXObject){
				//IE5+都有这个对象,以下是各个IE版本支持的XMLHTTPRequest对象 
				var activexName = ["MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                for(var i=0; i<activexName.length; i++){
                    try{
                        xmlhttp = new ActiveXObject(activexName[i]);
                        break;
                    }catch(e){
                    }
                }
			}
			//验证xmlhtp是否创建成功
			if(xmlhttp == undefined || xmlhttp == null){
				alert("当前浏览器不支持XMLHttpRequest对象，请更换浏览器");
				return;
			}
//******************2.注册回调方法
			xmlhttp.onreadystatechange = callback;  //callback是回调方法名

			//记忆一个固定用法，获取文本框中用户输入的内容
			var userName = document.getElementById("uName").value;

//******************3.设置和服务器端交互的相应参数,
				/*
				open方法参数：
				第一个：获取方式(GET/POST),
				第二个：服务器地址，
				第三个：表示是否使用异步的方式进行交互，若为false则采用同步方式交互
				第四个：username、第五个：password   <这两个为可选参数，当提供http认证机制需要时需要用户名和密码>
				*/
		//	xmlhttp.open("GET","ajaxTest1?name="+userName,true); 	//GET方法获取
		 	xmlhttp.open("POST","ajaxTest1",true);
			xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  //当使用POST时才需要这句话，刚方法必须在open方法后面调用，不然会抛异常

			//4.设置向服务器端发送的数据，启动和服务器端的交互
		//	xmlhttp.send(null); //由于上面采用GET方法发送，在这里send方法里不需要填充数据，如果是POST方式就要在此方法内填充数据
			xmlhttp.send("name="+userName);
		}

		//回调方法
		function callback(){
			//5.判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据
	
			if(xmlhttp.readyState == 4){//表示和服务器端的交互已完成
				if(xmlhttp.status == 200){ //表示服务器端的响应代码是200，正确的返回了数据
					//纯文本数据的接受方法
					var message = xmlhttp.responseText;

					//XML数据对应的ＤＯＭ对象的接受方法
					//使用前提是服务器端要设置content-type为"text/xml"
//					var domxml = xmlhttp.responseXML;
					
					
					//显示结果数据
					var m = document.getElementById("msg");
					
					m.innerHTML = message;
				}
			}
		}

			
                        
                
	
	</script>

  </head>
  
  <body>
   <input type="text" name="name" id="uName" /><input type="submit" onclick="myFun()" value="检验"/>
   <div id="msg"></div>
  </body>
</html>

分享到：