Javaweb-交互式核心技术Ajax开发步骤

JavaEE-交互式核心技术Ajax开发步骤

概述

AJAX = Asynchronous JavaScript and XML

Asynchronous ：异步的

Ajax 是一种用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面

AJAX开发步骤

AJAX的Get请求

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）

下面举例Ajax的get请求方式

1.创建XMLHttpRequest对象

    <script>
        //创建XMLHttpRequest对象
        function ajaxFun() {
            xmlHttp = new XMLHttpRequest()
        }
    </script>

2…使用open方法建立与服务器的连接

        function valid(obj) {
            ajaxFun();
            var url =""
            xmlHttp.open('get', url, true)
        }

打开连接,第一个参数是请求方式，第二个参数是请求地址，第三个参数是同步还是异步，true异步，false是同步

3.接受服务器的响应（响应你的连接请求）

    <script>
        //创建XMLHttpRequest对象

        function ajaxFun() {
            xmlHttp = new XMLHttpRequest()

        }

        function valid(obj) {
            ajaxFun();
            var url =""
            xmlHttp.open('get', url, true)
            xmlHttp.onreadystatechange=function () {
                //请求服务器完成
                if (xmlHttp.readyState==4){
                    //连接正常
                    if (xmlHttp.readyState==200) {
                        var result = xmlHttp.responseText
                        alert(result)
                    }
                }
            }
            
        }
    </script>

4.向服务器端发送数据

    <script>
        //创建XMLHttpRequest对象

        function ajaxFun() {
            xmlHttp = new XMLHttpRequest()

        }

        function valid(obj) {
            ajaxFun();
            var url =""
            xmlHttp.open('get', url, true)
            xmlHttp.setRequestHeader("content-type","text/html;charset=UTF-8")
            xmlHttp.onreadystatechange=function () {
                //请求服务器完成
                if (xmlHttp.readyState==4){
                    //连接正常
                    if (xmlHttp.readyState==200) {
                        var result = xmlHttp.responseText
                        alert(result)
                    }
                }
            }
            xmlHttp.send(null);
        }
    </script>

如果是get请求数据是在url上传递，不需要发送数据

注意

send必须放最后！

AJAX的Post请求

与get差不多

AJAX同步与异步

大家考虑一下上面的代码，为什么回调函数在发送函数的上方，这就是异步的作用！不管你连接是否成功，我都将数据发送出去！

大家可以将异步理解成多线程