【Ajax】（1）Ajax的原理，利用点对点通讯将前端页面输入的信息发送到后台进行检验

最新推荐文章于 2020-04-27 10:27:56 发布

YI_DIAN_DIAN

最新推荐文章于 2020-04-27 10:27:56 发布

阅读量592

点赞数

本文链接：https://blog.csdn.net/qq_35415600/article/details/77125670

版权

❸JavaEE 同时被 3 个专栏收录

46 篇文章 3 订阅

订阅专栏

---- ----⑦WEB开发技术

13 篇文章 0 订阅

订阅专栏

❻项目案例演示

7 篇文章 0 订阅

订阅专栏

一、Ajax的介绍

1、XmlHttp是什么？

（1）、最通用的定义为：XmlHttp是一套可以在Javascript、JavaScript、等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

（2）、来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。

（3）、现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

2、Ajax的全称是：Asynchronized JavaScript And XML

3、技术组成：JavaScript，DOM，CSS，XMLHttpRequest(ActiveObject)对象

4、Ajax的入口：创建一个对象：XMLHttpRequest或者ActiveObject

二、XMLHttp对象参考

1、XMLHttp的属性：

这里写图片描述

2、XMLHttp的方法：

这里写图片描述

3、使用Ajax的步骤：

（1）创建一个Ajax对象—-new XMLHttpRequest()、new ActiveObject()

（2）设置通讯方式和地址—-oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

（3）设置访问成功后的js对象(回调函数)—-oXMLHttpRequest.onreadystatechange = funcMyHandler;

（4）发送(动作的触发)—-oXMLHttpRequest.send(varBody);

4、关于XMLHttp属性详细介绍：

4.1、readyState

（1）readyState ：返回XMLHTTP请求的当前状态

（2）语法：lValue = oXMLHttpRequest.readyState;

（3）变量，此属性只读，状态用长度为4的整型表示.定义如下：

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过 responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

4.2、status

（1）status ：返回当前请求的http状态码

（2）语法：lValue = oXMLHttpRequest.status;

（3）常用的变量如下：

200 OK

201 Created

202 Accepted

404 Not Found

500 Internal Server Error

505 HTTP Version Not Supported

4.3、onreadystatechange

（1）onreadystatechange ：指定当readyState属性改变时的事件处理句柄

（2）语法：oXMLHttpRequest.onreadystatechange = funcMyHandler;

（3）例如：当XMLHTTPRequest对象的readyState属性改变时调用HandleStateChange函数，当数据接收完毕后（readystate == 4）此页面上的一个按钮将被激活

4.4、responseText

（1）responseText：将响应信息作为字符串返回

（2）语法：strValue = oXMLHttpRequest.responseText;

（3）注意：XMLHTTP尝试将响应信息解码为Unicode字符串，XMLHTTP默认将响应数据的编码定为UTF-8，如果服务器返回的数据带BOM(byte-order mark)，XMLHTTP可以解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意，如果服务器返回的是xml文档，此属性并不处理xml文档中的编码声明。你需要使用responseXML来处理。

5、关于XMLHttp方法详细介绍：

5.1、open

（1）open：创建一个新的http请求，并指定此请求的方法、URL以及验证信息

（2）语法： oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

参数 bstrMethod ：http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。

参数 bstrUrl：请求的URL地址，可以为绝对地址也可以为相对地址。

参数 varAsync[可选]：布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。

5.2、send

（1）send：发送请求到http服务器并接收回应

（2）语法： oXMLHttpRequest.send(varBody);

（3）注意：get方式请求时：varbody为空，参数在url中；post方式请求是：varbody不为空，就是url中所带的参数；

5.3、setRequestHeader

（1）setRequestHeader 单独指定请求的某个http头

（2）语法：oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);

三、关于Ajax的一个应用案例

【要求】：

（1）利用点对点通讯将前端页面输入的信息发送到后台进行检验。

【说明】：

（1）能够利用Ajax原理，将表单中输入的数据通过GET或者POSE提交方式到后台Servlet进行校验，并且将服务器的响应信息返回出来。

（2）分别测试通过get-Ajax、post-Ajax方式校验数据。

（3）最后将GET、POST方式下的Ajax封装到一个Ajax对象中去。

【一】GET方式的ajax技术演示

1、首先在jsp页面中写一个input组件：

<h3>GET方式的ajax技术演示</h3>
name:<input type="text" name="name" onblur="check1(this);"/><br/>
<div id="div1"></div>

2、在JavaScript中写一个check1函数，把name编辑框中的名字用get-ajax提交到后台进行校验，看看是否可用：

<script type="text/javascript">
    /* 把name编辑框中的名字用get-ajax提交到后台进行校验，看看是否可用 */
    function check1(obj){
        //【注意】收集参数
        var name = obj.value;

        //【步骤】1.创建一个ajax对象
        var xhr = null;
        if(window.XMLHttpRequest){//【注意】看看浏览器是否认识该对象----IE7之后、火狐、google等支持
            xhr = new XMLHttpRequest();
        }else{//【注意】IE6以下及其旧版本浏览器支持
            xhr = new ActiveXObject("Mircrosoft.XMLHttp");
        }

        //【步骤】2.设置通讯方式和地址
        var url = "<c:url value='/OneServlet?name="+name+"'/>";
        xhr.open("GET", url, true);//【注意】异步--并行         

        //【步骤】3.设置访问成功后的js对象（回调函数）
        xhr.onreadystatechange=function(){//【注意】指定当readyState属性改变时的事件处理句柄
            //alert(xhr.readyState);
            if(xhr.readyState==4){
                /*【注意】变量，此属性只读，状态用长度为4的整型表示.定义如下：
                0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 
                1 (初始化) 对象已建立，尚未调用send方法 
                2 (发送数据) send方法已调用，但是当前的状态及http头未知 
                3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 
                4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 
                */
                if(xhr.status==200){
                    var txt = xhr.responseText;
                    //alert(txt);
                    succ(txt);
                }
            }
        };

        //【步骤】4.发送（动作的触发）【注意】发送请求到http服务器并接收回应          
        xhr.send(null);//【注意】get方式时，参数为null，如果要向后台提交参数，则写在url地址中
    }
    function succ(txt){
        div1.innerHTML=txt;
    }
</script>

3、点对点通讯的后台servlet中的doGet方法：OneServlet.java：

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

    System.out.println("get-ajax来了....");
    //int i=10/0;/*让前端页面的ajax监听到服务器端的错误信息*/

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out = response.getWriter();

    String name = request.getParameter("name");
    out.println(name+"你好,来访时间："+sdf.format(new Date()));
}

4、前端jsp页面显示：

这里写图片描述

【二】POST方式的ajax技术演示

1、首先在jsp页面中写一个input组件：

<h3>POST方式的ajax技术演示</h3>
name:<input type="text" name="name" onblur="check2(this);"/><br/>
<div id="div2"></div>

2、在JavaScript中写一个check2函数，把name编辑框中的名字用post-ajax提交到后台进行校验，看看是否可用：

<script type="text/javascript">
    /* 把name编辑框中的名字post-ajax提交到后台进行校验，看看是否可用 */
    function check2(obj){
        var name = obj.value;
        //【步骤】1.创建ajax对象
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveObject();
        }

        //【步骤】2.设置通讯方式和地址
        var url = "<c:url value='/OneServlet'/>";
        xhr.open("POST", url,true);

        //【步骤】3.设置访问成功后的js对象
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    var txt = xhr.responseText;
                    succ2(txt);
                }
            }
        };

        //【步骤】4.发送请求到http服务器并接收回应   
        //【注意】以POST方式访问必须以设置响应头
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("name="+name);
    }
    function succ2(obj){
        div2.innerHTML=obj;
    }
</script>

3、点对点通讯的后台servlet中的doPost方法：OneServlet.java：

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    System.out.println("post-ajax来了....");
    //int i=10/0;/*让前端页面的ajax监听到服务器端的错误信息*/

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out = response.getWriter();

    String name = request.getParameter("name");
    out.println(name+"你好，来访时间："+sdf.format(new Date()));
}

4、前端jsp页面显示：

这里写图片描述

【三】、最后将这两种方式封装到一起，封装Ajax技术演示

1、写一个Ajax函数，其中有两个成员方法：this.get、this.post，分别使用抽取代码的方式，实现这两个方法，下一次使用Function对象的时候可以直接调用成员方法：

/**此时ajax已经封装完成，以后可以将此js函数作为工具去使用，可以用第2步的方式直接使用封装后的ajax。*/
function Ajax(){
    this.get=function(url,succ,failure){
        //【步骤】1.创建一个ajax对象
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Mircrosoft.XMLHttp");
        }
        //【步骤】2.设置通讯方式和地址
        xhr.open("GET", url, true);
        //【步骤】3.设置访问成功后的js对象（回调函数）
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    var txt = xhr.responseText;
                    succ(txt);
                }else{
                    failure(xhr.status);
                }
            }
        };
        //【步骤】4.发送（动作的触发）
        xhr.send(null);
    };

    this.post=function(url,data,succ,failure){
        //【步骤】1.创建ajax对象
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveObject();
        }

        //【步骤】2.设置通讯方式和地址
        xhr.open("POST", url,true);
        //【步骤】3.设置访问成功后的js对象
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    var txt = xhr.responseText;
                    succ(txt);
                }else{
                    failure(xhr.status);
                }
            }
        };
        //【步骤】4.发送请求到http服务器并接收回应   
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
    };
}

2、此时check1、check2方法可以简写为：

<!--【注意】以后直接这样使用封装后的ajax方法-->

<!--【注意】实现check1函数  -->
<script type="text/javascript">
    function check1(obj){
        var name = obj.value;
        var ajax = new Ajax();
        var url = "<c:url value='/OneServlet?name="+name+"'/>";
        ajax.get(url, succ, failure);
    }
    function succ(txt){
        div1.innerHTML=txt;
    }
    function failure(obj){
        alert("服务器响应的错误代码："+obj);
    }
</script>

<!-- 【注意】实现check2函数 -->
<script type="text/javascript">
    function check2(obj){
        var ajax = new Ajax();
        var url = "<c:url value='/OneServlet'/>";
        var data = "name="+obj.value;
        ajax.post(url, data, succ2, failure);
    }
    function succ2(txt){
        div2.innerHTML=txt;
    }
</script>

YI_DIAN_DIAN

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Ajax】（1）Ajax的原理，利用点对点通讯将前端页面输入的信息发送到后台进行检验

一、Ajax的介绍1、XmlHttp是什么？（1）、最通用的定义为：XmlHttp是一套可以在Javascript、JavaScript、等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。（2）、来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML
复制链接

扫一扫