AJAX动态更新网页

Posted 2020-08-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX动态更新网页相关的知识，希望对你有一定的参考价值。

一、简介:

AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）, 是一种可以使网页实现异步更新的技术 , 简言之就是在不重新加载网页的情况下 , 更新网页的部分数据。

二、工作原理

     <html>
         <head>
             <meta charset="UTF-8">
             <title></title>
        </head>
   <body>
   </body>
   <script type="text/javascript">
   //ajax原理
   /*
   * 1. new XMLHttpRequest    创建一个超文本传输请求 , XMLHttpRequest(XHR)对象用于在后台与服务器交换数据。
   * 2.ajax.open
   * 3.ajax.send
   * 4.ajax.onreadystatechange
   */
   function ajaxFun () {
       //打电话例子
       //1.有个手机(判断手机是"移动",还是"联通",也就是说浏览器内核不同其数据请求方式不同)
       if(window.XMLHttpRequest) { //现代浏览器
           var ajax = new XMLHttpRequest;
       } else { //IE浏览器
           var ajax = new ActiveXObject("Microsoft.XMLHTTP");   //IE5和IE6使用ActiveXObject
       }
       //2.拨号防止缓存添加时间戳
       var time = new Date().getTime();
       //"test.txt?v=3.0" 表示版本号
       //"test.txt?t=4" 时间戳

//注:在这里创建了一个txt文件,先模拟请求文件内容,如果是GET请求那么open()函数里面的参数填写GET,反之填写POST

/*那么问题来了,什么时候用GET什么时候用POST呢?

GET与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

1.无法使用缓存文件（更新服务器上的文件或数据库）

2.向服务器发送大量数据（POST 没有数据量限制）

3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

*/
ajax.open("GET", "test.txt?t=" + time, true);

/*.open()函数中可以填写三个参数,第一个是请求数据的类型,第二个是请求数据的地址(文件所在服务器下的位置)以及异步处理请求

当然,如果请求数据类型为GET,那么可以采取URL拼接的方式传输数据

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

async：true（异步）或 false（同步）

注:当您使用 async=false 时，请不要编写 onreadystatechange 函数 (不要问为什么,我也不知道)

那么问题来了,什么是异步,什么是同步?两者有什么区别

同步也就是说在JS代码自上而下加载的时候,当碰到AJAX时会先执行AJAX,当把AJAX执行完毕后才执行之后的代码,也就说只要AJAX不执行完毕,那么AJAX后面的JS代码始终不起作用;如果同步能理解那么异步就好理解了,异步就是当JS代码执行到AJAX时,不会因为AJAX的存在而停止加载,它会继续加载JS代码。

那么在这里有些博友会发出疑问,异步处理和多线程又有什么关系呢?

异步和多线程并不是一个同等关系,异步是最终目的,多线程只是我们实现异步的一种手段。异步是当一个调用请求发送给被调用者,而调用者不用等待其结果的返回而可以做其它的事情。实现异步可以采用多线程技术或则交给另外的进程来处理。

*/
//3.发送

//第三步相当于向数据库发送数据
ajax.send(null);

//注:.send()函数中填写String类型的参数只用于POST请求
//4.检查状态

       //第四步也就是检查发送数据是否成功,成功之后把数据库中更新后的数据再传输到页面中.也就是更新了网页内容
       ajax.onreadystatechange = function() {
           //检查发送的状态
           //alert(ajax.readyState);
           //状态为4的话表示发送成功
           /*
   * 值   含义
        0   表示对象已建立，但还示初始化，尚未调用open方法
        1   表示open方法已调用，尚未调用send方法
        2   表示send方法已调用，其它数据未知
        3   表示请求已发送，正在接收数据
        4   表示数据已接收成功

检查ajax数据请求返回值会出现五个,在这里小编简而称之为"五值四状态",便于各位博友理解。

当然,数据发送成功后还有一个返回值,也就是在前端向后台发送数据,当数据接收成功后,后台也会对前端做出回应,如果数据更新不成功可以从返回的状态码也可以判断出是前端出现问题还是后台出现了问题。

由于服务器返回的状态码过多,在这里小编借用博友 Kevin Lin 的总结方便各位博友的理解:

        100-199 用于指定客户端应相应的某些动作。
        200-299 用于表示请求成功。
        300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
        400-499 用于指出客户端的错误。
        500-599 用于支持服务器错误。
   */
           if(ajax.readyState == 4) {
//               alert("发送成功");
               //检测返回的状态,状态码
//               alert(ajax.status);
               if (ajax.status > 199 && ajax.status < 207 || ajax.status == 304) {
                   //通话成功
                   alert(ajax.responseText) ;
               }
           }
       }
   }
   document.onclick = function () {
       ajaxFun();
   }
   </script>

</html>