浅谈ajax技术[原创]

ajax实现了在不刷新整个界面的情况下去更新界面部分内容；

下面我就用自己所学知识的看法介绍一下ajax

早期页面加载一一部分的界面需要重新加载一遍浏览器，从新构建一遍dom tree；

ajax原理：http异步通信协议；

ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

判断浏览器创建ajax对象；

var ajax;
if (window.XMLHttpRequest)
    //window.XMLHttpRequest在 IE7+, Firefox, Chrome, Opera, Safari下非undefind code for IE6, IE5下undefind
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  ajax=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  ajax=new ActiveXObject("Microsoft.XMLHTTP");
  }

ajax获取接收服务器返回值两种格式；

reponseText（获得数据串的响应数据）

reponseXML（获得XML形式的相应数据）

    //js方式创建容器接收后台传输内容
    document.getElementById("id").innerHTML=ajax.responseText;
    document.getElementById("id").innerHTML=ajax.reponseXML;

状态值：（什么是状态值:状态值即ajax请求中的一个过程，每个过程都会对应每个过程的状态值，用ajax.readystate判断）

        0—ajax异步对象创建完毕，但是还未发送

        1—ajax已经调用了open()方法，但是还未调用send()方法

        2—已经调用send(),但是还未到达服务器端

        3—表示请求已经到达服务端，正在服务端的处理，但是还未响应返回

        4—ajax已经完全接收了服务器的响应信息，但是状态码未必是正确的

 

状态码有：（什么是状态码:无论ajax请求数据库是否成功，服务器返回http协议头信息代码 用ajax.starts判断）

        200：交易成功

        404/500：错误请求/服务器内部产生错误      

 if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //内容
    }

//onreadystatechange存储函数 每当readystart改变就会调用这个函数

    //ajax.onreadystatechange状态监听函数
    ajax.onreadystatechange=function()
      //内容
  }

ajax的两种请求：

post、get；

与post相比，get请求更快更简单；

但在以下情况建议用post；

1.无法使用缓存文件；

2.向服务器发送大量数据

3.发送包含未知字符的用户输入时post比get更稳更可靠；

//aiax.open(method,url,async);
//method：请求的类型；GET 或 POST
//url：想要查找文件的地址
//async：true（异步）或 false（同步）
//get请求
ajax.open("GET","/ajax/demo_get.asp?t=" + Math.random(),true);
ajax.send();
//post请求样式
ajax.open("POST","/ajax/demo_post.asp",true);
send(string)

总结；1判断打开的浏览器是什么版本-->2 读取浏览器状态，状态改变执行函数-->3创建ajax的方式函数-->4再选择请求方式；

<div class="main" id="main">
</div>
<button type="button" οnclick="zz()">请求数据</button>
<script type="text/javascript">
    function zz() {
        var ajax;
        var i;
        var win = window.XMLHttpRequest;
        //1判断打开的浏览器是什么版本
        if(win) {
            alert(2)
            ajax = new XMLHttpRequest();
        } else {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        };
        //2 读取浏览器状态，状态改变执行函数
        ajax.onreadystatechange = function() {
            if(ajax.readyState == 4 && ajax.status == 200) {
                    //3创建ajax接收后台的传值的方式函数
                document.getElementById("main").innerHTML = ajax.responseText;
            }
        }
        //4再选择请求方式；
        ajax.open("GET", "test.txt", true);
        ajax.send();
    }
</script>

 

对于刚刚了解ajax的我，上面即近期所见所得；

你有什么更好更有趣的ajax知识可以跟我一起探讨探讨；

以上总结，如有言误，请指正。

 

转载于:https://www.cnblogs.com/Tmode/p/10941959.html