Ajax学习小结之基础篇

AJAX = 异步 JavaScript 和 XML。

1.XMLHttpRequest 用于在后台与服务器交换数据
创建 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");
  }
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
open(method,url,async)method：请求的类型；GET 或 POST;url：文件在服务器上的位置;async：true（异步）或 false（同步）
send(string)    string：仅用于 POST 请求
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true

2.GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
 无法使用缓存文件（更新服务器上的文件或数据库）;
 向服务器发送大量数据（POST 没有数据量限制）;
 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠.
为了避免得到的是缓存的结果,需向URL添加一个唯一的 ID：
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

3.如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

4.xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
当 readyState 等于 4 且状态为 200 时，表示响应已就绪

5.给url地址增加时间戳，骗过浏览器，不读取缓存
function convertURL(url) {
    //获取时间戳
    var timstamp = (new Date()).valueOf();
    //将时间戳信息拼接到url上
    //url = "AJAXServer"
    if (url.indexOf("?") >= 0) {
        url = url + "&t=" + timstamp;
    } else {
        url = url + "?t=" + timstamp;
    }
    return url;
}

 

6.jquery 采用async:false同步 加载数据

使用jquery的ajax去进行某些操作，默认是异步加载的方式。即在执行ajax对应后台操作时，前台的JS也会继续执行，并不会等jquery的ajax执行结束。有些情况下可能必须等到ajax执行完毕，才接着执行下面的语句的时候，需要在ajax中，加入一个参数： async:false。这样ajax就会采用同步的方式执行，等到ajax执行完毕再接着执行下面的语句。