原生js实现发送ajax请求

<script>
    var lis = document.getElementById('list').getElementsByTagName('li');
    //页面加载完毕运行initpage()
    window.onload = initPage;
    function initPage() {
        for (var i=0; i<lis.length; i++) {
            //遍历lis 给每个li标签绑定事件
            lis[i].onclick = function () {
                //每个li标签都有一个点击事件getdetails,参数为当前点击的元素的id
                getDetails(this.id);
            }
        }
    }
    //获取ajax对象
    function creatRequest() {
        var request;
        if(window.XMLHttpRequest){
            request = new XMLHttpRequest();
        }else {
            request = new ActiveXObject('Microsoft,XMLHttp');
        }
        return request;
    }
    function getDetails(itemName) {
        //request就是ajax对象
        request = creatRequest();
        //get方式
        request.open("get","getDetails.php?LiName="+escape(itemName),true);
        //绑定事件处理函数
        request.onreadystatechange = displayDetails;
        //这儿应该是不传给服务器数据的意思么?不太理解
        request.send(null);
    }

    //监听器
    function displayDetails() {
        if (request.readyState == 4) {
            if (request.status == 200) {
                detailDiv = document.getElementById("inf");
                detailDiv.innerHTML = request.responseText;
            }
        }
    }

</script>

实现点击li标签  请求一个新的数据在右边.

参考:http://www.cnblogs.com/duanhuajian/archive/2012/10/20/2731840.html

https://wenku.baidu.com/view/f6b7a03116fc700abb68fcc4.html

 

 

 

 

 

 

有点闷 可能一开始就是不在乎  不是么..

2017.5.5