Ajax入门实例

         Ajax,全称Asynchronous JavaScript And XML，是异步的Javascript和XML。想更多的了解Ajax的历史，请到百度百科（Ajax）。

          Ajax最主要的是解决什么样的问题呢?
          Ajax可以解决传统Web程序的一些弊端，提升用户使用系统体验度.
          传统Web程序,采用下面工作模式
          用户发送请求-->等待服务器处理-->页面响应
             a.用户在等待处理阶段,什么都不能做，无法进行下一步操作,连续性不强.
             b.整个页面刷新,处理中,需要很多数据，参与客户端和服务器的传输.
          Ajax就是所谓的异步刷新，在这里我们并不需要知道更多的原理，只要记住下面的几个简单代码，就可以应用这种Ajax技术：
      以验证用户名是否已存在为例（java）：

       服务器端servlet代码：

   

                response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		String name=request.getParameter("name");
		//模拟数据库判断
		if("mm".equals(name)){
			out.println("用户名存在");
		}else{
			out.println("用户名可用");
		}
		out.flush();
		out.close();

        配置文件：提交url：http://localhost:8080/您的项目名称/checkname?username=

 

<servlet>
    <servlet-name>AjaxCheckNameServlet</servlet-name>
    <servlet-class>web.AjaxCheckNameServlet</servlet-class>
  </servlet>
<servlet-mapping>
    <servlet-name>AjaxCheckNameServlet</servlet-name>
    <url-pattern>/checkname</url-pattern>
  </servlet-mapping>

     js脚本：

//获得ajax核心对象XMLHttpRequest
function getXMLHttpRequest(){
      var xhr;
		   //判断浏览器类型
	  if(window.XMLHttpRequest)
		   //非ie
		   xhr=new XMLHttpRequest();
	  }else{
		  //ie
	       xhr=new ActionXObject("Microsoft.XMLHTTP");
	  }
    return xhr;
}

 

//ajax get请求---验证用户名是否已存在为例
 function(){
     //得到username值
	 var username=document.getElementById("username").value;
	 //获得XMLHttpRequest对象
	 var xhr=getXMLHttpRequest();
	 //open方法发送请求
	 xhr.open(
		  "get",//get方式请求
		  "checkname?username="+username,//请求url
		   true);//true 表示异步刷新
	 //注册一个监听器（即当xhr状态发生改变产生了readystatechange事件，
	 //该事件会由一个匿名函数处理。我们需要在函数里面获得服务器返回的
	 //数据，然后更新页面）
     xhr.onreadystatechange=function(){
		 var span=document.getElementById("msg");
	     //readyState 对象与服务器通讯的状态
		 // 0（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）
		 // 1 （初始化）对象已建立，尚未调用send方法
		 // 2（发送数据）send方法已调用
		 // 3（数据传送中）已接受部分数据
		 // 4 （响应结束）接受了所有数据
		 if(xhr.readyState==4){
			   if(xhr.status==200){//200为程序正常执行
			       //ajax 只获得两种数据 （text 和dom）
			    var txt=xhr.responseText;
			    //var xml=xhr.responseXML;
				span.innerHTML=txt;
			   }else{
				   //程序出现错误时
				   span.innerHTML="系统繁忙，请稍后再试！";
			   }
		 }else{
		   //请求响应结束前---您的操作
		   span.innerHTML="正在处理中.....";
		 }
	 };
     //只有调用send方法之后，请求才会真正发送
	 xhr.send(null);
 }

//ajax post请求---验证用户名是否已存在为例
 function(){
     //得到username值
	 var username=document.getElementById("username").value;
	 //获得XMLHttpRequest对象
	 var xhr=getXMLHttpRequest();
	 //open方法发送请求
	 xhr.open(
		  "post",//post方式请求
		  "checkname",//请求url
		   true);//true 表示异步刷新
	 //注册一个监听器（即当xhr状态发生改变产生了readystatechange事件，
	 //该事件会由一个匿名函数处理。我们需要在函数里面获得服务器返回的
	 //数据，然后更新页面）
	 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     xhr.onreadystatechange=function(){
		 var span=document.getElementById("msg");
	     //readyState 对象与服务器通讯的状态
		 // 0（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）
		 // 1 （初始化）对象已建立，尚未调用send方法
		 // 2（发送数据）send方法已调用
		 // 3（数据传送中）已接受部分数据
		 // 4 （响应结束）接受了所有数据
		 if(xhr.readyState==4){
			   if(xhr.status==200){//200为程序正常执行
			       //ajax 只获得两种数据 （text 和dom）
			    var txt=xhr.responseText;
			    //var xml=xhr.responseXML;
				span.innerHTML=txt;
			   }else{
				   //程序出现错误时
				   span.innerHTML="系统繁忙，请稍后再试！";
			   }
		 }else{
		   //请求响应结束前---您的操作
		   span.innerHTML="正在处理中.....";
		 }
	 };
     //只有调用send方法之后，请求才会真正发送
	 //post请求是用send方法传递参数的
	 xhr.send('username='+username);
 }

  Ajax注意的两个问题:

    1.IE浏览器缓存问题，如果使用get方式发送请求，浏览器会将数据缓存起来，这样，当再次发送消息时，如果地址不变，ie不会真正的向服务器发请求，而是将之前缓存的数据显示给用户
          解决方式：
        一、用post方式
        二、在请求地址后面添加一个随机时间
               如'checkname?username='+username+'&sid='+new Date().getTime()

     2.中文乱码问题
        解决方式:用post方式