AJAX 简单理解

最新推荐文章于 2022-03-05 13:40:23 发布

zhangwang010

最新推荐文章于 2022-03-05 13:40:23 发布

阅读量1.1k

点赞数 1

分类专栏： java web 文章标签： ajax AJAX简单demo

本文链接：https://blog.csdn.net/zhangwang010/article/details/77932623

版权

java web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AJAX 简单理解和应用

这几天做web小项目,发现没有AJAX真不方便,总是刷新整个页面确实不方便。
AJAX:

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
w3cschool

AJAX干什么用的

一句话:AJAX是一种能和服务器交换数据而不用刷新页面的技术

ajax使用 XMLHttpRequest 对象和服务器交换数据,其与通过刷新获得数据的过程是差不多的(也是发送一个http请求,获得一个http响应),不同的是这种请求浏览器是后台处理(或者静默处理的)。就是浏览器悄悄的干的。然后通过DOM操作更新到页面里。
这个对象本身是封装的一个请求,有两个重要方法:

open(method,url,asyoyc)//设置请求参数
send(String)//发送请求;
setRequestHeader(header,value)//设置请求头

等于是客户端访问了一次服务器,请求一些数据,但并不刷新page,而是通过javascript DOM操作把数据更新到page 。XMLHttpRequest 是浏览器内建的对象

AJAX技术的好处是可以避免因为修改部分页面而重新加载整个页面，减少负担。最重要的是不用频繁刷新页面，体验好。

示例代码：

<DOCTYPE html>
<html>
<head>
    <title>ajax demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script type="text/javascript">
        //根据浏览器的不同创建XMLHttpRequest对象
        function getXMLHttp(){
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }else{// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            return xmlhttp;
        }


        function loadXMLDoc(){
            //获得XMLHttpRequest对象 
            var xmlhttp = getXMLHttp();

            //异步触发的事件,当XMLHttpResquest 对象收到服务器响应后调用
            xmlhttp.onreadystatechange = function(){
                //xmlhttp.readyState 是 XMLHttpRequest 的状态信息
                switch (xmlhttp.readyState) {
                case 0:
                    console.log("请求未初始化");
                    break;
                case 1:
                    console.log("已于服务器建立连接");
                    break;
                case 2:
                    console.log("请求已接受");
                    break;
                case 3:
                    console.log("请求处理中");
                    break;
                default:
                    break;
                }

                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("data").innerHTML=xmlhttp.responseText;
                }

            }

            /*get方式

            //准备请求参数
            //如果服务器认为请求的资源没有改变会发送 304 状态码 
            xmlhttp.open("get","/cart/DATA/data.txt",true);
            //发送请求
            xmlhttp.send();
            */

            //post方式,  post方式要自己设置http head
            xmlhttp.open("post","/cart/DATA/data.txt",true);

            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("name=zw&age=22");

        }
    </script>
</head>

<body>
    <div id="data">
        <p>some data</p>
    </div>
    <button type="button" onclick="loadXMLDoc()">button</button>
</body>
</html>