第一次使用ajax

今天终于把ajax搬到了自己的博客中，从开始听说ajax到现在第一次使用它，估计隔了一年多。

使用ajax的好处就是不刷新网页也能与后台进行交互，当然数据是小批量的。运用的场景有很多，比如百度搜索中的提示，博客中的留言功能等等。感觉就是用户体验非常好，我的博客中原来的留言功能提交后，是要重新加载网页的，本来服务器就是低配版，如果再刷一遍，代价很大啊。于是果断采用了传说中的ajax。下面是我参考的文档。

http://www.runoob.com/ajax/ajax-tutorial.html 菜鸟教程特点简洁适合入门。在这里只记录几点注意事项。

1 ajax可以请求json,xml,txt等等静态文件，不一定要是php,java等等后台语言文件。

2 post和get什么时候使用

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

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

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

4 get方式，为了避免得到的是缓存的结果，建议如下操作。

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

5 获得响应

responseText 获得字符串形式的响应数据。

responseXML 获得 XML 形式的响应数据。

如过获得是XML的数据，还要进行XML解析

6 如果存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>

</body>
</html>

秒客网

第一次使用ajax

相关文章