Ajax异步刷新原理及实例-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_657/article/details/82547302

Ajax基本实现原理
也叫异步刷新，局部刷新
主体可分为三部分：
1.创建xmlHttp对象
2.执行方法过程
3.处理回调函数


<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<html>
  <head>
    <script type="text/javascript">
      var xmlHttp=null;            //声明xmlHttp变量
      function Checker(){          //主函数调用，触发事件
	    xmlHttp=createXml();       //初始化xmlHttp变量，获取当前浏览器值
		var obj=document.getElementById("aaa");  //...获得控件值
		xmlHttp.open("post","check2.jsp",true);  //打开xmlHttp连接
		xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
		//设置content—type，这是使用post必须指明传递的信息类型
		xmlHttp.send("name="+obj.value+"&age=33");//发送数据变量
		xmlHttp.onreadystatechange=callback;      //指明回调函数

      }
      function createXml(){        //创建xmlHttp对象
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xmlHttp;
	  }

	   function callback(){            //回调函数
	     if(xmlHttp.readyState==4){    //判断xmlHttp状态
		   cText=xmlHttp.responseText;
		   s1.innerHTML=cText;
		 }
	   }
    </script>
  </head>

  <body>
  用户名:<input type="text" id="aaa" onblur="Checker()" /><span id="s1">请输入用户名</span><br/>
      密码:<input type="text"/>
  </body>
</html>

下面是check2.jsp的代码


<%@ page language="java" import="java.util.*,java.net.*" pageEncoding="GB18030"%>
<% 
    request.setCharacterEncoding("gbk");   //设置编码格式
    String name=request.getParameter("name");  //接受参数
    String age=request.getParameter("age");
    System.out.println(name+","+age);         //测试打印参数
    out.clear();
    out.println("提示信息"); %>            //回传信息

结束