Ajax入门?二

实际上,Ajax的初步写法很固定,需要修改的也只有:

  • 连接服务器（准备发送数据）
    • 　　　　　　xhr.open('get|post',url,true|false);
  • 获取数据方法格式：xhr.responseText　　　　　　　　
    • 　　　　　　　　xhr.responseXML
  • 以及过程监控后的if语句成立后的内容
    • 　　　　　　xhr.onreadystatechange=function(){　
      • 　　　　　　　　if(this.readyState==4 && this.status==200){

如下面这菜鸟教程里的事例,事实上w3c里面也是这个.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()　　　　　　
{
    var xmlhttp;
    if (window.XMLHttpRequest)　　　　//这部分其实是判断游览器的,从而创建对象(第一步)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();　　　　　　//是以上游览器就定义这对象
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");　　　　//否则就定义微软的对象.(不过好像现在并不需要这样了.)
    }
    xmlhttp.onreadystatechange=function()　　　　//这部分就是状态值改变后,(第二步)
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)　　　　//这个就是判断请求和相应是否成功!请求(发送)成功是4,相应(返回)成功是200.一般是固定的写法
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;　　　　//成功后就如此输出.(这部分才是需改动的部分)
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);　　　　//获取方式GET或POST,路经(本地的txt、php等文件或网址),以及异步或同步.(这部分也是改动的部分)(第三步)

    xmlhttp.send();　　　　//最后结尾的函数调用(第四步)
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

 

posted @ 2018-05-17 13:16  银王意志  阅读(92)  评论(0)  编辑  收藏  举报