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

一、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>