使用JavaScript和jQuery简单实现Ajax技术

 Ajax的定义

 Ajax被认为是(Asynchronous JavaScript and XML的缩写）。 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。

 Ajax的工作原理

 Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

一、使用JavaScript实现Ajax技术

1.首先建立一个jsp页面,导入js页面并且新建一个测试按钮。

<script type="text/javascript" src="ajaxGet.js"></script> <!-- src导入相应的JavaScript实现Ajax代码 -->
</head>
<body>
    <input type="button" id="btn" value="ajax"/> <!-- 测试按钮 -->
</body>

2.其中我们在js页面先需要获取XmlHttpRequest对象,并且需要处理兼容问题

获取XmlHttpRequest对象
function getXMLHttpRequest() {
    var xmlHttpReq=null;
    if (window.XMLHttpRequest) {//Mozilla 浏览器
        xmlHttpReq = new XMLHttpRequest();
    }else {
        if (window.ActiveXObject) {//IE 浏览器
            try {
                xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                try {//IE 浏览器
                    xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                }
            }
        }
    }
    return xmlHttpReq;

3.接着在相同页面下开始写onload事件(get方法发送数据)

window.onload = function(){
      var  btnDom=document.getElementById("btn");
    btnDom.onclick = function(){
        //ajax步骤
        //1
        var xhr = getXMLHttpRequest();
        
        //2.监听响应  如何判断能够正确请求和响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){  //响应结束
                if(xhr.status == 200){ //正确响应
                    //接收响应数据
                    var data = xhr.responseText;
                    alert(data);
                }
            }
        };
        //3.打开连接
        /*
         * method:  get 或 post
         * url:  请求路径
         * async: true(表示异步，默认) false
        */
        xhr.open("get","../ajaxGetServlet?age=18&userName=jack",true);
        //4.发送数据  
        xhr.send(null); //使用get请求send发送的数据都为null,且不能省略这一步
    };
  };

或者使用(post请求//第3第4步骤有区别)

 window.onload = function(){
      var  btnDom=document.getElementById("btn");
    btnDom.onclick = function(){
        //1
        var xhr = getXMLHttpRequest();
        //2.
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    var data = xhr.responseText;
                    alert(data);
                }
            }
        };
        //3.
        xhr.open("post","../ajaxPostServlet",true);
        /*
         * 4.发送数据
         * send()  string或null
         *             String类型一般为键值对  "username=zhangsan"
         * get请求 都是send(null)
         * post请求要send数据需要设置请求头
         */
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send("user=admin&age=12");
    };
  };

其中步骤3的url需要我们创建一个servlet

public class AjaxGetServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String age = request.getParameter("age");
        String userName = request.getParameter("userName");
        System.out.println(age+"------"+userName);
        //响应数据
        response.getWriter().print("hello"); //js中步骤2监听响应
        
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

代码写完以后,我们只需要按一下(value="ajax")测试按钮就可以使用ajax技术实现异步请求与响应。

二、使用jQuery实现Ajax技术

案例:如何使用ajax技术实现用户注册时用户名是否被占用?

1.jsp注册页面

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script><!-- 导入jQuery包 -->
<body>
    <h3>jquery 实现 ajax</h3>
    <p>用户名：<input id="userName" name="userName"/><span id="msg"></span></p>
    <script type="text/javascript" src="jqdemo.js"></script><!-- jqdemo.js使用jquery实现ajax -->
</body>

2.js页面(无需手动获取XmlHttpRequest对象)

$(function(){
    $("#userName").blur(function(){
        var name = $(this).val();
        if(name.trim() == ""){
            return;
        }
        //jquery 实现 ajax
        $.ajax({
            url:"../jqueryUserName",   //请求的路径
            type:"post", // 请求方式 默认是get
            data: {     //要发送的数据
                "name":name
            },  
            dataType:"text",  //响应数据的类型
            success:function(result){ // 正确响应
                if(result == "yes"){
                    $("#msg").html("用户名可以使用");
                }else{
                    $("#msg").html("用户名被占用");
                }
            },
            error:function(){
                alert("请求失败！");
            }
        });
    });
});

3.servlet页面(获取用户名比较是否被占用)

public class JqueryUserName extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("jquery ajax 验证用户名！");
        PrintWriter out = response.getWriter();
        String name = request.getParameter("name");
        if("ajax".equals(name) || "admin".equals(name) || "jack".equals(name)){
            //用户名已被使用
            out.print("no");
        }else{
            out.print("yes");
        }
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

 

posted @ 2017-07-03 15:16  波光闪烁  阅读(324)  评论(0)  编辑  收藏  举报