Ajax基础开发

Ajax技术属于前台技术,前台技术一定要通过JavaScript执行,要想进行Ajax的编程,必须要有两个核心概念:JavaScript,服务器
现在的问题是:javascript如何操作才可以让页面可以直接与服务器通讯呢?为此在整个Ajax中最为重要的一点是:XMLHttpRequest对象
XMLHttpRequest对象实例化操作
在整个Ajax数据处理过程中一定需要发送请求到服务端,而后也需要接收请求,这一过程都是通过XMLHttpRequest类完成的,但是这个类的对象如果要想创建,那么就必须考虑到浏览器的使用情况.
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax异步处理交互</title>
</head>
<script type="text/javascript">
    window.onload=function(){
        //在页面加载完成的时候,创建XMLHttpRequest对象
        createXMLHttpRequest();
        alert(XMLHttpRequest);
    }
    //保存XMLHttpRequest对象的变量
    var XMLHttpRequest;
    //创建XMLHttpRequest对象的方法
    function createXMLHttpRequest(){
        XMLHttpRequest = new XMLHttpRequest();
    }
</script>
<body>

</body>
</html>

在这里插入图片描述

如果要在IE7以前的浏览器中使用XMLHttpRequest对象,可以使用以下的方法

    function createXMLHttpRequest(){
        if(window.XMLHttpRequest){
            XMLHttpRequest = new XMLHttpRequest();
         //判断是否为IE6的浏览器
        }else if(ActiveXObject){
            XMLHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
        }
    }

使用XMLHttpRequest对象操作方法

在这里插入图片描述

使用的最多的两个函数
- open():设置HTTP请求的路径地址以及请求模式
- send():表示发送请求,一般情况下都会地址重写传递.
但是只依靠以上给出的函数,根本无法解决任何的汇创数据处理,如果要处理回传数据,需要使用回调函数模式完成,而这个时候需要观察XMLHttpRequest类中所提供的属性了

在这里插入图片描述

Ajax技术一定需要服务期短的支持,本次试下一个ECHO程序,页面输入的任何信息,服务器端都会最佳一个""OECHO"内容返回
定义EchoServlet

package mao.shu.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
 @WebServlet("/EchoServlet")
public class EchoServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和回应编码
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");

        //接收请求参数 "msg"
        String str = req.getParameter("msg");
        //得到回应的打印流
        PrintWriter printWriter = resp.getWriter();

        //在浏览器中输出内容
        printWriter.println("Encho: "+str);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

直接采用地址重写的方式进行msg参数化的传递

http://localhost:8080/AjaxProject/EchoServlet?msg=Hello

页面返回结果

在这里插入图片描述

定义一个表单页面,使用Ajax调用此Servlet
但是待会在调用此Servlet的时候将采用ajax的异步处理方式完成,而不是使用超链接,或客服端跳转(刷新整个页面)的方式
原xml文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax异步处理交互</title>
</head>
<body>
    <div id="inPutDiv">
        <input type="text" id="info" name="info"/>
        <input type="button" id="submitBut" name="submitBut"/>
    </div>
    <!--Ajax回显信息-->
    <div id="responseDiv"></div>
</body>
</html>

原始页面效果

在这里插入图片描述

定义JavaScript代码,对表单进行Ajax回显操作

    //保存XMLHttpRequest对象的变量
    var xmlHttpRequest;
    window.onload=function(){

        //为提交按钮绑定函数
        document.getElementById("submitBut").addEventListener("click",function(){
            //得到用户输入的提交内容
            var info = document.getElementById("info").value;
            if(info != "") {
                handSub(info);
            }
        },false)
    }

    //创建XMLHttpRequest对象的方法
    function createXMLHttpRequest(){

        if(window.XMLHttpRequest){
            xmlHttpRequest = new XMLHttpRequest();
         //判断是否为IE6的浏览器
        }else if(ActiveXObject){
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
        }
    }
    //提交请求方法
    function handSub(tinfo){
        createXMLHttpRequest();
        //使用XMLHttpRequest对象设置请求类型
        //设置请求参数接收位置
        xmlHttpRequest.open("post","EchoServlet?msg="+tinfo);
        //发送请求
        xmlHttpRequest.send(null);
        //针对服务器请求,做出回应处理
        xmlHttpRequest.onreadystatechange = function(){
            alert(xmlHttpRequest.responseText);
        }
    }

页面执行效果

在这里插入图片描述

这里一共进行了四次弹窗,原因是因为 XMLHttpRequest对象中的readyState属性发生了变化.
也就是说当XMLHttpRequest.readyState 属性的值等于4的时候才表示整个请求处理已经完成了.
除了针对于处理状态控制之外,还需要有一个处理,那么就是说当HTTP处理正常完成的时候才可以进行后续的控制,当HTTP的状态码返回的是200,这个就表示程序已经正常处理完成.

XMLHttpRequest.status == 200;

修改JavaScript代码,将Servlet回应的内容,作为一个p元素,添加到"responseDiv"的子元素下

    //保存XMLHttpRequest对象的变量
    var xmlHttpRequest;
    window.onload=function(){

        //为提交按钮绑定函数
        document.getElementById("submitBut").addEventListener("click",function(){
            //得到用户输入的提交内容
            var info = document.getElementById("info").value;
            if(info != "") {
                handSub(info);
            }
        },false)
    }

    //创建XMLHttpRequest对象的方法
    function createXMLHttpRequest(){

        if(window.XMLHttpRequest){
            xmlHttpRequest = new XMLHttpRequest();
         //判断是否为IE6的浏览器
        }else if(ActiveXObject){
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
        }
    }
    //提交请求方法
    function handSub(tinfo){
        createXMLHttpRequest();
        //使用XMLHttpRequest对象设置请求类型
        //设置请求参数接收位置
        xmlHttpRequest.open("post","EchoServlet?msg="+tinfo);
        //发送请求
        xmlHttpRequest.send(null);
        //针对服务器请求,做出回应处理
        xmlHttpRequest.onreadystatechange = function(){
            var info = xmlHttpRequest.responseText;
            //当请求已经完成之后,才可以进行回应操作
           if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                //得到回应信息显示的div元素
               var responseDivEle = document.getElementById("responseDiv");
               //创建子元素
               var pEle = document.createElement("p");
                pEle.appendChild(document.createTextNode(info));
                responseDivEle.appendChild(pEle);
               document.getElementById("info").value = "";
           }
        }
    }

修改代码后的页面显示效果

在这里插入图片描述

整个过程之中并没有进行整体的页面刷新,只是将返回的结果通过DOM解析处理交给了指定的层显示处理.
Ajax技术的退出占着元法简单,并且与DOM相结合的特点,所以技术在使用上几乎是没有难度.

在这里插入图片描述

猜你喜欢