ajax初级入门（案例演示）

最新推荐文章于 2023-05-27 16:06:06 发布

S_Zhou

最新推荐文章于 2023-05-27 16:06:06 发布

阅读量331

点赞数 1

分类专栏： Ajax

本文链接：https://blog.csdn.net/S_Zhou/article/details/74911062

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax（asynchronous javascript and xml）异步JavaScript和xml

一、概念

ajax是一种用来改善用户体验的技术

利用浏览器提供一个对象（XMLHttpRequest，也称：ajax对象）向服务器发送异步请求-->服务器返回部分请求-->浏览器利用这些数据对当前页面做部分更新

（注：异步请求--当ajax对象发送请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其他操作）

二、ajax对象几个重要属性

1、onreadystatechange：绑订一个事件处理函数，该函数用来处理readystatechange事件

（注：当ajax对象的readystate属性值发生了改变，比如，从0变成了1，则会产生readystatechange事件）

2、readyState：有5个值(0,1,2,3,4)，表示ajax对象与服务器通信的进展（注：4 表示ajax对象已经获得了服务器返回的所有的数据）

3、responseText：获得服务器返回的文本数据

4、responseXML：获得服务器返回的xml数据

5、status：获得状态码（注：200 表示请求成功）

三、获取ajax对象（.js）

可以单独封装成一个js文件，再调用（ajax.js）

/* 
 * 获取ajax对象 
 */  
function getXhr(){  
    var xhr = null;  
    if(window.XMLHttpRequest){  
        //非IE浏览器  
        xhr = new XMLHttpRequest();  
    }else{  
        //IE浏览器  
        xhr = new ActiveXObject('Microsoft.XMLHttp');  
    }  
    return xhr;  
}

调用js文件

<head>  
    <script type="text/javascript" src="js/ajax.js"></script>  
</head>

四、案例演示（Maven管理）

需求：判断用户名是否已经注册过？（用户名后面立刻显示判断结果给用户）

简单编程步骤：

1、编写页面

2、编写ajax

3、编写服务端

4、web.xml中配置服务端

详细编程步骤：

1、编写页面

<!-- 页面显示代码 -->  
<body style="font-size:30px;">  
    <form action="regist.do" method="post">  
        用户名:<input id="uname" name="uname" οnblur="check_uname();"/>  
        <span id="check_uname_msg"></span><br/>  
        密   码:<input type="password" name="pwd"/><br/>  
        <input type="submit" value="注册"/>  
    </form>  
</body>  
</html>

2、编写ajax （详细内容讲解，都在jsp文件中编写）

（1）获取ajax对象：获取XMLHttpRequest对象实例化

（如：使用封装ajax对象成js文件后，再使用var xhr = getXhr()调用实例化）

//获取ajax对象实例化  
  var xhr = getXhr();

（2）设置回调函数：为ajax对象的onreadystatechange事件设定响应函数

    // 2、设置回调函数  
      function fn(){  
            if(xhr.readyState == 4 && xhr.status == 200){  
                var txt = xhr.responseText;  
                //DOM操作  
            }  
      }

（3）创建请求：调用XMLHttpRequest对象的open方法

    /*  
      3、 创建请求(这里以get请求为例) 
        （1）get请求写法：xhr.open('get','xxx.do',true); 
             true ：表示发送异步请求（当ajax对象发送请求时，用户仍然可以对当前页面做其他操作） 
             false：表示发送同步请求（当ajax对象发送请求时，浏览器会锁定当前页面，用户不能对当前页面做其他操作） 
        （2）post请求写法： 
             xhr.open('post','xxx.do',true)； 
             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); 
             setRequestHeader的作用：因为HTTP协议要求发送post请求时候，必须有content-type消息头， 
             所以需要调用setRequestHeader方法，添加这个消息头 
    */  
        var uri = 'check_uname.do?uname=' + $F('uname');  
        xhr.open('get',encodeURI(uri),true);

（4）发送请求：调用ajax对象的send方法

/*4、发送请求 
     get 请求写法：xhr.send(null); 
     send方法内传递null若要提交数据，则在open方法的“URL”后面追加，如下： 
     xhr.open('get','xxx.do?name=value&name=value',true) 
     上面第3创建请求里的open就是采用这种方法 
     post 请求写法：xhr.send(name=value&name=value...); 
 */   
     xhr.send(null);

ajax完整代码：

（1）使用js封装的ajax对象：ajax.js文件（js）

    /* 
     * 获取ajax对象 
     */  
    function getXhr(){  
        var xhr = null;  
        if(window.XMLHttpRequest){  
            //非ie  
            xhr = new XMLHttpRequest();  
        }else{  
            xhr = new ActiveXObject(  
                    'Microsoft.XMLHttp');  
        }  
        return xhr;  
    }  
      
    /* 
     * 依据id查找对应的节点 
     */  
    function $(id){  
        return document.getElementById(id);  
    }  
      
    /* 
     * 依据id查找节点，然后返回节点的值 
     */  
    function $F(id){  
        return $(id).value;  
    }

（2）regist.jsp文件（使用<script type="text/javascript" src="js/ajax.js"></script>调用ajax.js）

    <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
    <html>  
    <head>  
        <script type="text/javascript" src="js/ajax.js"></script>  
            function check_uname(){  
                // 1、获得ajax对象  
                var xhr = getXhr();  
                // 2、设置回调函数  
                xhr.onreadystatechange = function(){  
                    // （处理服务器返回的结果）  
                    if(xhr.readyState == 4 && xhr.status == 200){  
                        // 只有当ajax对象已经获得了服务器返回的所有数据,并且没有出错。  
                        var txt = xhr.responseText;  
                        // 更新页面  
                        $('check_uname_msg').innerHTML = txt;  
                    }  
                };  
                //3、 创建请求(这里以get请求为例)  
                var uri = 'check_uname.do?uname=' + $F('uname');  
                xhr.open('get',encodeURI(uri),true);  
                // 4、发送请求  
                xhr.send(null);  
            }  
        </script>  
    </head>  
      
    <!-- 页面显示代码 -->  
    <body style="font-size:30px;">  
        <form action="regist.do" method="post">  
            用户名:<input id="uname" name="uname" οnblur="check_uname();"/>  
            <span id="check_uname_msg"></span><br/>  
            密 码:<input type="password" name="pwd"/><br/>  
            <input type="submit" value="注册"/>  
        </form>  
    </body>  
    </html>

3、编写服务端代码

创建ActionServlet.java，在该Servlet中实现服务端判断

    package web;  
      
    import java.io.IOException;  
    import java.io.PrintWriter;  
    import java.util.Random;  
      
    import javax.servlet.ServletException;  
    import javax.servlet.http.HttpServlet;  
    import javax.servlet.http.HttpServletRequest;  
    import javax.servlet.http.HttpServletResponse;  
      
    public class ActionServlet extends HttpServlet {  
        public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
              
            System.out.println("service()");  
                   
            request.setCharacterEncoding("utf-8");  
            response.setContentType("text/html;charset=utf-8"); 
 
            PrintWriter out = response.getWriter();  
            // 分析请求资源路径  
            String uri = request.getRequestURI();  
            System.out.println("uri:" + uri);  
            String action = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));  
            System.out.println("action:" + action);  
            // 依据分析结果做不同处理  
            if ("/check_uname".equals(action)) {  
                // 检查用户名是否存在  
                String uname = request.getParameter("uname");  
                System.out.println("uname:" + uname);  
                            // 这里的用户名是设定死的，为“Sally”  
                            if ("Sally".equals(uname)) {  
                    // 只需要返回部分数据  
                    out.println("用户名已经存在");  
                } else {  
                    out.println("可以使用");  
                }  
            }   
                            out.close();  
        }  
    }

4、配置服务端

在web.xml中配置ActionServlet

<?xml version="1.0" encoding="UTF-8"?>  
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">  
  <servlet>  
        <servlet-name>action</servlet-name>  
        <servlet-class>web.ActionServlet</servlet-class>  
  </servlet>  
  <servlet-mapping>  
        <servlet-name>action</servlet-name>  
        <url-pattern>*.do</url-pattern>  
  </servlet-mapping>  
</web-app>

结果显示

1、注册失败：检验到已经有用户名注册过

2、注册成功

注册后跳转页面

Maven结构

S_Zhou

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax初级入门（案例演示）

ajax（asynchronous javascript and xml）异步JavaScript和xml一、概念ajax是一种用来改善用户体验的技术利用浏览器提供一个对象（XMLHttpRequest，也称：ajax对象）向服务器发送异步请求-->服务器返回部分请求-->浏览器利用这些数据对当前页面做部分更新（注：异步请求--当ajax对象发送请求时，浏览器不会销毁当前页面，
复制链接

扫一扫