AJAX入门---五步使用XMLHttpRequest对象

前端之家收集整理的这篇文章主要介绍了AJAX入门---五步使用XMLHttpRequest对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
XMLHttpRequest简介:

XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档

五步使用XMLHttpRequest对象

1. 建立XMLHttpRequest对象如下:

(不同浏览器中XMLHttpRequest对象建立的方式不同:IE7以上,FireFox,Safari,Opera等中直接newXMLHttpRequest();IE6,IE5.5等则需要通过用一个正确的ActiveXObject控件名称通过new ActiveXObject(控件名)的方式)

[javascript] view plain copy print ?
  1. if (window.XMLHttpRequest) { @H_403_23@
  2. xmlhttp=new XMLHttpRequest(); @H_403_23@
  3. if (xmlhttp.overrideMimeType) { @H_403_23@
  4. xmlhttp.overrideMimeType("text/xml"); @H_403_23@
  5. } @H_403_23@
  6. }else if (window.ActiveXObject) { @H_403_23@
  7. var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0",@H_403_23@
  8. "MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0",@H_403_23@
  9. "MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"]; @H_403_23@
  10. for (var i = 0; i <activexName.length; i++) { @H_403_23@
  11. try { @H_403_23@
  12. xmlhttp=new ActiveXObject(activexName[i]); @H_403_23@
  13. } catch (e) { @H_403_23@
  14. @H_403_23@
  15. } @H_403_23@
  16. } @H_403_23@
  17. } @H_403_23@

2. 注册回调函数

(设置回调函数是,不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性

[javascript] view plain copy print ?
  1. xmlhttp.onreadystatechange=callback; @H_403_23@

3. 使用open方法设置服务器端交互的基本信息

(open方法最多有五个参数局,其中头三个参数是必须的)

[javascript] view plain copy print ?
  1. //使用GET方式时,请求数据位于url链接中,后面的send方法的参数直接写null @H_403_23@
  2. xmlhttp.open("GET","Ajax?name="+ userName,true ); @H_403_23@
  3. @H_403_23@
  4. //使用POST方式时,open方法后面需要先调用setRequestHeader方法,来设置Content-Type的值,然后调用send方法,send的参数就是请求的数据 @H_403_23@
  5. xmlhttp.open("POST","Ajax",true); @H_403_23@
  6. xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); @H_403_23@

4. 设置发送的数据,开始和服务器端交互

[javascript] view plain copy print ?
  1. //GET方式 @H_403_23@
  2. xmlhttp.send(null); @H_403_23@
  3. @H_403_23@
  4. //POST方式 @H_403_23@
  5. xmlhttp.send("name=" + userName); @H_403_23@

5. 在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容

(回调函数中,最好将判断readyState和status的两个if条件,分开来写)

[javascript] view plain copy print ?
  1. function callback(){ @H_403_23@
  2. //5.判断和服务器端的交互是否完成,还要判断服务器端是否正确返回了数据 @H_403_23@
  3. if (xmlhttp.readyState == 4) { @H_403_23@
  4. //表示和服务器端的交互已经完成 @H_403_23@
  5. if (xmlhttp.status==200) { @H_403_23@
  6. //表示和服务器的响应代码是200,正确的返回了数据 @H_403_23@
  7. //纯文本数据的接受方法 @H_403_23@
  8. var message =xmlhttp.responseText; @H_403_23@
  9. //Xml数据对应的Dom对象的接受方法 @H_403_23@
  10. //使用的前提是,服务器端需要设置content-type为text/xml @H_403_23@
  11. //var domXml=xmlhttp.responseXML; @H_403_23@
  12. @H_403_23@
  13. @H_403_23@
  14. //向div标签中填充文本内容方法 @H_403_23@
  15. var div=document.getElementById("message"); @H_403_23@
  16. div.innerHTML=message; @H_403_23@
  17. } @H_403_23@
  18. } @H_403_23@
  19. } @H_403_23@

总结:

当然通过这个小小的例子,我们只能说是经历了一个从不知道到知道的过程,初步了解了一下XMLHttpRequest对象的用法,更加深刻的理解还需要我们更加深入的学习和在实践中加以利用。

猜你在找的Ajax相关文章