初识Ajax

原创
2014/12/09 21:16
阅读数 9

1  创建XMLHttpRequest对象:所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

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 向服务器发送请求

xmlhttp.open(method, url, async) 规定请求的类型、URL 以及是否异步处理请求。
xmlhttp.send(string) 将请求发送到服务器。

url:服务器上的文件地址,该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。

async:XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true。当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。

method: POST or GET

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

        1)无法使用缓存文件(更新服务器上的文件或数据库)

        2)向服务器发送大量数据(POST 没有数据量限制)

        3)发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    使用GET方法时,应将要发往服务器的信息添加在url中

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

    而用POST方法时,则要设置HTTP头

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

3 获取服务器响应数据

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

responseText 属性返回字符串形式的响应:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

4 onreadystatechange事件

XMLHttpRequest对象的readyState 属性存有 XMLHttpRequest 的状态信息(0:请求未初始化,1:连接已建立,2:请求已接收,3:请求处理中,4:请求处理完毕,且响应已就绪),每当 readyState 改变时,就会触发 onreadystatechange 事件。onreadystatechange属性的值是一个自定义的函数,用于时间控制。

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



展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部