码迷,mamicode.com
首页 > Web开发 > 详细

ajax起步 (二)

时间:2018-01-01 00:28:59      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:基本用法   div   多次   change   处理器   cti   hand   innerhtml   oct   

Ajax的关键在于XMLHttpRequest对象,如下基本用法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
            <button>Apples</button>
            <button>Cherries</button>
            <button>Bananas</button>
        </div>
        <div id="target">
            press a button
        </div>
        <script type="text/javascript">
            var buttons=document.getElementsByTagName("button")
            for(var i=0;i<buttons.length;i++){
                buttons[i].onclick=handleButtonPress;
            }
            function handleButtonPress(e){
                var httpRequest=new XMLHttpRequest();
                httpRequest.onreadystatechange=handleResponse;
                httpRequest.open("GET",e.target.innehttpRequest=new XMLHttpRequest();rHTML+".html")
                httpRequest.send()
            }
            function handleResponse(e){
                if(e.target.readyState==XMLHttpRequest.DONE&&e.target.status==200){
                    document.getElementById("target").innerHTML=e.target.responseText;
                }
            }
        </script>
    </body>
</html>

    第一步是创建一个新的XMLHttpRequest对象。与之前在DOM中见过的大多数对象不同,你并非通过浏览器定义的某个全局变量来访问这类对象,而是使用关键词new如:var httpRequest=new XMLHttpRequest();
    下一步是给readystatechange事件设置一个事件处理器。这个事件会在请求过程中被多次触发,向你提供事情的进展情况。将onreadystatechange属性的值设为handleResponse;httpRequest.onreadystatechange=handleResponse;可以告诉XMLHttpRequest对象你想要做什么,使用open方法来指定HTTP方法(在这里是GET)和需要请求的URL:httpRequest.open("GET",e.target.innerHTML+".html")注:

ajax起步 (二)

标签:基本用法   div   多次   change   处理器   cti   hand   innerhtml   oct   

原文地址:https://www.cnblogs.com/Sarah119/p/8159404.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!