ajax原始写法之菜鸟心得

     刚开始学习Ajax，当然是先把原理性的东西弄懂了，在去用什么js框架，那样才能得心应手：写的注释比较多，适合快速理解和上手使用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>最原始的ajax写法</title>  
       
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="this is my page">  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
       
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    <script type="text/javascript">  
       
    //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互   
    var xmlHttpRequest;   
  
    //用户名校验的方法   
    function verify() {   
        var success = createXMLHTTPRequest();   
        if (!success) {   
            return;   
        }   
        var userName = document.getElementById("userName").value;//获取用户名字   
        //2.注册回调函数   
        //注册回调函数时，之需要函数名，不要加括号   
        //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的   
        xmlHttpRequest.onreadystatechange = callback;   
  
        //3。设置连接信息   
        //第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post   
        //第二个参数表示请求的url地址，get方式请求的参数也在url中   
        //第三个参数表示采用异步还是同步方式交互，true表示异步   
        //记住在url后面加上时间戳   
        //xmlHttpRequest.open("GET", "OriginalityAjaxAction?username=" + userName, true);   
  
        //POST方式请求的代码   
        xmlHttpRequest.open("POST", "OriginalityAjaxAction", true);   
        //POST方式需要自己设置http的请求头   
        xmlHttpRequest.setRequestHeader("Content-Type",   
                "application/x-www-form-urlencoded");   
        //POST方式发送数据   
        xmlHttpRequest.send("username=" + userName);   
  
        //4.发送数据，开始和服务器端进行交互   
        //同步方式下，send这句话会在服务器段数据回来后才执行完   
        //异步方式下，send这句话会立即完成执行   
        //xmlHttpRequest.send(null);   
  
    }   
  
    //回调函数   
    function callback() {   
        //alert(xmlHttpRequest.readyState);   
        //5。接收响应数据   
        //判断对象的状态是交互完成   
        if (xmlHttpRequest.readyState == 4) {   
            //判断http的交互是否成功   
            if (xmlHttpRequest.status == 200) {   
                //获取服务器器端返回的数据   
                //获取服务器段输出的纯文本数据   
                var responseText = xmlHttpRequest.responseText;   
                //将数据显示在页面上   
                //通过dom的方式找到div标签所对应的元素节点   
                var divNode = document.getElementById("result");   
                //设置元素节点中的html内容   
                divNode.innerHTML = responseText;   
            } else {   
                alert("出错了！！！");   
            }   
        }   
    }   
  
    //创建XMLHTTPRequest对象来进行AJAX的异步数据交互   
    function createXMLHTTPRequest() {   
        //1.创建XMLHttpRequest对象   
        //这是XMLHttpReuquest对象无部使用中最复杂的一步   
        //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码   
  
        if (window.XMLHttpRequest) {   
            //针对FireFox，Mozillar，Opera，Safari，IE7，IE8   
            xmlHttpRequest = new XMLHttpRequest();   
            //针对某些特定版本的mozillar浏览器的BUG进行修正   
            if (xmlHttpRequest.overrideMimeType) {   
                xmlHttpRequest.overrideMimeType("text/xml");   
            }   
        } else if (window.ActiveXObject) {   
            //针对IE6，IE5.5，IE5   
            //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中   
            //排在前面的版本较新   
            var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];   
            for ( var i = 0; i < activexName.length; i++) {   
                try {   
                    //取出一个控件名进行创建，如果创建成功就终止循环   
                    //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建   
                    xmlHttpRequest = new ActiveXObject(activexName[i]);   
                    break;   
                } catch (e) {   
                }   
            }   
        }   
        //确认XMLHTtpRequest对象是否创建成功   
        if (!xmlHttpRequest) {   
            alert("XMLHttpRequest对象创建失败!!");   
            return false;   
        } else {   
            //0 - 本地响应成功   
            //alert(xmlhttp.readyState);   
            return true;   
        }   
    }   
</script>  
  </head>  
     
  <body>  
        请输入要验证的用户名字(输入admin试试)：<br/>  
        <input type="text" id="username"/><input type="button" value="校验" onclick="verify()"/>  
        <div id="result"></div>  
  </body>  
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>最原始的ajax写法</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	
	//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
	var xmlHttpRequest;
 
	//用户名校验的方法
	function verify() {
		var success = createXMLHTTPRequest();
		if (!success) {
			return;
		}
		var userName = document.getElementById("userName").value;//获取用户名字
		//2.注册回调函数
		//注册回调函数时，之需要函数名，不要加括号
		//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
		xmlHttpRequest.onreadystatechange = callback;
 
		//3。设置连接信息
		//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
		//第二个参数表示请求的url地址，get方式请求的参数也在url中
		//第三个参数表示采用异步还是同步方式交互，true表示异步
		//记住在url后面加上时间戳
		//xmlHttpRequest.open("GET", "OriginalityAjaxAction?username=" + userName, true);
 
		//POST方式请求的代码
		xmlHttpRequest.open("POST", "OriginalityAjaxAction", true);
		//POST方式需要自己设置http的请求头
		xmlHttpRequest.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		//POST方式发送数据
		xmlHttpRequest.send("username=" + userName);
 
		//4.发送数据，开始和服务器端进行交互
		//同步方式下，send这句话会在服务器段数据回来后才执行完
		//异步方式下，send这句话会立即完成执行
		//xmlHttpRequest.send(null);
 
	}
 
	//回调函数
	function callback() {
		//alert(xmlHttpRequest.readyState);
		//5。接收响应数据
		//判断对象的状态是交互完成
		if (xmlHttpRequest.readyState == 4) {
			//判断http的交互是否成功
			if (xmlHttpRequest.status == 200) {
				//获取服务器器端返回的数据
				//获取服务器段输出的纯文本数据
				var responseText = xmlHttpRequest.responseText;
				//将数据显示在页面上
				//通过dom的方式找到div标签所对应的元素节点
				var divNode = document.getElementById("result");
				//设置元素节点中的html内容
				divNode.innerHTML = responseText;
			} else {
				alert("出错了！！！");
			}
		}
	}
 
	//创建XMLHTTPRequest对象来进行AJAX的异步数据交互
	function createXMLHTTPRequest() {
		//1.创建XMLHttpRequest对象
		//这是XMLHttpReuquest对象无部使用中最复杂的一步
		//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
 
		if (window.XMLHttpRequest) {
			//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
			xmlHttpRequest = new XMLHttpRequest();
			//针对某些特定版本的mozillar浏览器的BUG进行修正
			if (xmlHttpRequest.overrideMimeType) {
				xmlHttpRequest.overrideMimeType("text/xml");
			}
		} else if (window.ActiveXObject) {
			//针对IE6，IE5.5，IE5
			//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
			//排在前面的版本较新
			var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
			for ( var i = 0; i < activexName.length; i++) {
				try {
					//取出一个控件名进行创建，如果创建成功就终止循环
					//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
					xmlHttpRequest = new ActiveXObject(activexName[i]);
					break;
				} catch (e) {
				}
			}
		}
		//确认XMLHTtpRequest对象是否创建成功
		if (!xmlHttpRequest) {
			alert("XMLHttpRequest对象创建失败!!");
			return false;
		} else {
			//0 - 本地响应成功
			//alert(xmlhttp.readyState);
			return true;
		}
	}
</script>
  </head>
  
  <body>
    	请输入要验证的用户名字(输入admin试试)：<br/>
    	<input type="text" id="username"/><input type="button" value="校验" onclick="verify()"/>
    	<div id="result"></div>
  </body>
</html>

Java代码
package web.action;   
import java.io.IOException;   
import java.io.PrintWriter;   
  
import javax.servlet.ServletException;   
import javax.servlet.http.HttpServlet;   
import javax.servlet.http.HttpServletRequest;   
import javax.servlet.http.HttpServletResponse;   
//对原始的ajax页面请求的控制器   
public class OriginalityAjaxAction extends HttpServlet {   
  
    private static final long serialVersionUID = 1978049925174268801L;   
  
    public void doGet(HttpServletRequest request, HttpServletResponse response)   
            throws ServletException, IOException {   
  
        this.doPost(request, response);   
    }   
  
    public void doPost(HttpServletRequest request, HttpServletResponse response)   
            throws ServletException, IOException {   
        request.setCharacterEncoding("UTF-8");   
           
        String username = request.getParameter("username");   
        response.setCharacterEncoding("UTF-8");   
        PrintWriter out = response.getWriter();   
        //将数据返回给页面   
        if(username.equals("admin")){   
            out.print("用户：[admin]已经被使用了");   
        }else{   
            out.print("用户：[" + username + "]可以使用");   
        }   
    }   
  
}

加粗样式

ajax原始写法之菜鸟心得

猜你喜欢