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同步与异步

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

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

发布了152 篇原创文章 · 获赞 93 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览