Ajax学习

Ajax(Asynchronous JavaScript and XML)异步的JavaScript和XML

所有支持js的浏览器都支持Ajax，基本上全部的浏览器都支持XMLHttpRequest对象，IE5和IE6支持的是ActiveXObject对象

向服务器发送数据使用open( )方法和send( )方法
open方法主要是规定请求的类型，传递三个参数method(请求类型get/post) / url(文件在服务器上的位置) / async(异步还是同步)
Send方法主要是将请求发送到服务器

Get与Post的不同：

	Get	Post
后退刷新	无害	数据会重新提交
书签	可以收藏	不可收藏
缓存	能缓存	不能缓存
编码类型	Application/x-www-form-urlencoded	Application/x-www-form-urlencoded 或 multipart/form-data为二进制数据使用多重编码
历史	参数保存在浏览器历史中	参数不保存在浏览器历史中
对数据长度的限制	存在数据限制，get向url添加数据，url长度最长为2048个字符	无限制
对数据类型的限制	只允许Asc码	无限制
安全性	安全性较差	比get安全些
可见性	数据对所有人可见，因为保存在url中	不显示在url中

这里使用Get与Post方法传输数据存在一个很大的不同之处，主要是Get发送数据直接将想要取得数据包含在url中即可

xmlhttp.open(“Get”, “/try/ajax/dome.php?name=herry&age=12”, true);

但是使用Post方法需要添加一个setRequestHeader( )来添加HTTP头，然后追send( )方法中规定想要发送的数据

xmlhttp.open(“POST”, “try/ajax/dome.php”, true);
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(“name=herry&age=12”);

这里一般使用的都是异步的传输获取后台数据的方法，既然是异步的就需要确定当前服务器的状态，使用onreadystatechange事件，里面判断xmlhttp.readyState == 4和xmlhttp.status == 200 确定当前的服务器处于正常状态

服务器的响应获取服务器上的数据存在两种数据类型，一种是text类型，另一种是XML类型，需要使用responseText或者responseXML属性进行解析

<script>
     var xmlhttp;
     function loadXMLDoc(url, cfunc) {
         if (window.XMLHttpRequest) {  // IE7+, Firefox, Chrome, Opera, Safari 代码
             xmlhttp = new XMLHttpRequest();
         }
         else {  // IE6, IE5 代码
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.onreadystatechange = cfunc;
         xmlhttp.open("GET", url, true);
         xmlhttp.send();
     }
     function myFunction() {
         loadXMLDoc("/try/ajax/ajax_info.txt", function () {
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                 document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
             }
         });
     }
  </script>
  
  <div id="myDiv">
      <h2>使用 AJAX 修改文本内容</h2>
  </div>
  <button type="button" onclick="myFunction()">修改内容</button>

创建标准函数，每次使用都是相同的东西，只是url索取的文件解析方法不同，所以只需要传递这两个参数即可