AJAX 的简单用法：

Posted 2020-07-09 空间机器

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 

1. XMLHttpRequest 对象；

    所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象：variable=new XMLHttpRequest();

   老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");

    为了应对所有的现代浏览器的写法：

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




2.向服务器发送请求：

         一个简单的 GET 请求：

     xmlhttp.open("GET","demo_get.asp",true);
     xmlhttp.send();

        一个简单 POST 请求：

    xmlhttp.open("POST","demo_post.asp",true);
    xmlhttp.send();

3.服务器响应
responseText 属性返回字符串形式的响应：

  document.getElementById("ID").innerhtml=xmlhttp.responseText;

4.onreadystatechange 事件：
 属性：onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数

       readyState：0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪 

       status： 200: "OK"  404: 未找到页面

       当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

          xmlhttp.onreadystatechange=function()
             {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
             }

一个简单的AJAX的例子的完整写法：

 function cha(){
       //创建xmlHttpRequest对象
       var xmlhttp;
       if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
       }
       else
       {// code for IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

       //向服务器发送请求,服务器根据状态响应,返回数据
       xmlhttp.onreadystatechange=function()
       {
           if (xmlhttp.readyState==4 && xmlhttp.status==200)
           {
               div1.innerHTML=xmlhttp.responseText;
           }
       }
       xmlhttp.open("GET","页面一.html",true);
       xmlhttp.send();

   }