AJAX

64 阅读1分钟

1 XMLHttpRequest

  • 1.1 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 1.2 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open()  和 send()  方法:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
  • 1.3 image.png
  • 1.4 method 使用get 还是post
  • 1.4.1 get更快也简单,但是以下情况使用post
  • 1.4.2 不愿意使用缓存文件(更新数据文件或者数据库)
  • 1.4.3 向服务器发送大量数据
  • 1.4.4 发送包含未知数据字符的用户输入

2 AJAX指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

  • 2.1 XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

3 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

  • 3.1 text
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  • 3.2 xml
  • 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性

4 AJAX - onreadystatechange 事件

  • 4.1 当请求被发送到服务器时,我们需要执行一些基于响应的任务。 每当 readyState 改变时,就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性:

image.png

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