浅谈Ajax使用

前端之家收集整理的这篇文章主要介绍了浅谈Ajax使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我觉得学每样东西,知道他的原理与如何使用就好了。所以在此我就不废话。

1.原理:
简单的来说(Ajax使用过程像你在与某人聊天,肚子饿了让舍友帮你去吃的,而自己可以继续聊天的过程一样。你的舍友此时就充当Ajax引擎的角色,而你是页面,某人是浏览页面用户)是实现页面无刷新的交互。
1.1说再多不如看图,Ajax工作原理图



2.如何使用
2.1创建Ajax引擎代码

  1. //创建ajax引擎,ajax根据用户使用的浏览器不同,会创建不同的ajax引擎
  2. function createXMLHttpRequest()
  3. {
  4. var request = false;
  5. if(window.XMLHttpRequest) {
  6. request = new XMLHttpRequest();
  7. if(request.overrideMimeType) {
  8. request.overrideMimeType('text/xml');
  9. }
  10. } else if(window.ActiveXObject) {
  11. var versions = ['Microsoft.XMLHTTP','MSXML.XMLHTTP','Microsoft.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP'];
  12. for(var i=0; i<versions.length; i++) {
  13. try {
  14. request = new ActiveXObject(versions[i]);
  15. if(request) {
  16. return request;
  17. }
  18. } catch(e) {}
  19. }
  20. }
  21. return request;
  22. }


2.2Ajax用get发送请求代码
  1. var AjaxEngine=null;
  2. function Ajax(myurl,myobj) {
  3. var url=myurl;  //如url.jsp?username=xiaoming&password=0000
  4. var obj=myobj;  //回调函数,只能写函数
  5. AjaxEngine=createXMLHttpRequest(); //
  6. if(AjaxEngine){
  7. AjaxEngine.open("get",url,true);
  8. AjaxEngine.onreadystatechange=obj;
  9. AjaxEngine.send(null);
  10. }
  11. }

2.3回调函数eg

  1. function usernamecl(){
  2. if(AjaxEngine.readyState==4){
  3. window.alert("服务器返回"+AjaxEngine.responseText);//以文本形式接收
  4. var msg=AjaxEngine.responseXML.getElementsByTagName("msg");//以xml形式接收
  5. var msgValue=msg[0].childNodes[0].nodeValue;
  6. window.alert("msgValue"+msgValue);
  7. }
  8. }

猜你在找的Ajax相关文章