Ajax

Posted 2021-02-09 π+1

1.基本概念

    Ajax(Asynchronous javascript And XML):异步(浏览器引擎提供的request，浏览器通过后台悄悄的发送请求)JavaScript(对象是由其提供的)及XML.

    Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、html、CSS新用法.    

2.Ajax用法

    只刷新局部页面的技术
    (1)JavaScript:用于更新局部的网址
    (2)XML:一般用于请求数据和响应数据的封装
    (3)XMLHttpRequest对象:发送请求到服务器并获得返回结果
    (4)CSS:美化页面样式
    (5)异步：发送请求后不等返回结果，由回调函数处理结果
3.构造方法

function getXMLHttpRequest() {
    //不同浏览器获取对象的方式
        var xhr;
        if (window.XMLHttpRequest){//google souhu
            xhr = new XMLHttpRequest();
        } else{//ie
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
}

View Code

4.方法

    (1) open(method: string, url: string, async: boolean)  "get|post" ，"url?name=" ，"true(默认状态，异步 )|false"
    (2) send() 发送请求 open是get时，此处是null
    (3) status:监控的是服务器端，读取的是http端的代码：200 400 404 500等
    
5.常用属性

    (1)事件处理器onreadystatechange:指定回调函数
    (2)readyState: XMLHttpRequest的状态信息:分别有0 1 2 3 4 这五种状态
        0：XMLHttpRequest对象没有完成初始化(对象刚刚创建)
        1：XMLHttpRequest对象开始发送请求(调用open方法)
        2：XMLHttpRequest对象的请求发送完成(调用send方法)
        3：XMLHttpRequest对象开始读取响应，还没有结束(接受到了消息头，但正文还在接受中)
        4：XMLHttpRequest对象读取响应结束

<script type="text/javascript">
    window.onload=function () {
        //1.获取getXMLHttpRequest对象
        var req = getXMLHttpRequest();
        //4.处理响应结果
        req.onreadystatechange = function(){
            //alert(req.readyState);
            if (req.readyState == 4){//请求一切正常
                //alert(req.status);
                if (req.status == 200){//服务器响应一切正常
                    alert(req.responseText);
                }
            }
        }
        //建立一个连接

        req.open("get","${pageContext.request.contextPath}/day16/servlet/demoServlet");
        //发送请求
        req.send(null);


    }
</script>