整理了一些关于AJAX的基础知识

 最近在实际的项目中经常会用到AJAX这个东西，之前对于AJAX的了解很少，后来通过一段时间的学习突然发现AJAX在很多功能方面能够节省很多不必要的弯路，并且能够是实现我们所说的局部刷新，这使得页面的友好性大大得到了增强，很多开发者都学习了AJAX的相关技术，通过与后台的结合能够开发出很多意想不到的效果，下面是本人在学习阶段整理的一些AJAX手记，希望会对大家有所帮助。

AJAX是指异步的javaScript及XML（Asynchronous JavaScript And XML）

AJAX是2005年Google推广的一种编程模式。


AJAx不是一种新的编程语言，而是一种现有标准的新的方法。


通过与后台的少量的数据交换，AJAX可以使用网页实现异步更新，这意味着可以在不用重新加载整个网页的情况下，对网页的某个部分进行更新。


Google通过使用Google Suggest使AJAX流行起来。


AJAX并没有创建出很多新的标准，AJAX基于已有的标准，这些标准已被开发者使用多年。


XMLHttpRequest对象是AJAX的基础。


现在已有的浏览器都支持XMLHttpRequest对象，但是IE5，IE6浏览器使用ActiveXObject对象。


例如：创建一个XMLHttpRequest对象，为了适应不同的浏览器，使用if，else同时创建。


var xmlhttp；


if(window.XMLHttpRequest){
 
   xmlhttp = new XMLHttpRequest();
 
}else{


   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");


}


XMLHttpRequest对象用于和服务器交换数据


xmlhttp.open("GET","text1.txt",true);


xmlhttp.send();


open(method，url，async);method包括：请求的类型，GET或POST；


                         URL：文件服务器上的位置，选择控制的后台文件；


                         async：处理请求，true（异步）或者false（同步）；


send（String str）;将请求的数据发送到服务器。String str代表传递的一个字符串，仅用于POST请求；


与post相比，get更简单也更快捷，并且在大部分情况下都能够正常使用。


然而 (1) 无法使用缓存文件（更新服务器上的文件或数据库）(2) 向服务器发送大量数据（POST 没有数据量限制） 


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


AJAX中的XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须是ture；


async=true时 


  xmlhttp.opreadystatechange=function(){


     if(xmlhttp.readyState==4&&xmlhttp.status==200){


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


        }


   }


xmlhttp.open("post","text1.txt",true);
xmlhttp.send();




async=false时


  xmlhttp.open("post","text.txt",false);
  xmlhttp.send();
  document.getElementById("myDiv").innerHTML = xmlhttp.responseText;




服务器响应：如果需要获取一个来自服务器的响应，就必须要使用XMLHttpRequest对象的reponseText或responseXML属性。


            responseText：获取字符串形式的响应数据；
  
            responseXML:获取XML形式的相应数据；


responseText属性：如果来自服务器的请求不是XML形式的请求，就需要使用responseText属性。


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


responseXML属性：如果需要来自服务器相应的XML，而且需要作为XML对象进行解析，就需要使用responseXML属性。


                  xmlDoc = xmlhttp.responseXML;


                  txt = "";


                  x = xmlDoc.getElementsByTagName("ARTIST");


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




onreadystatechange事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务。


                        每当readyState改变时,就会触发onreadystatechange事件。


                        readyState属性存有XMLHttpRequest的状态信息。
         
XMLHttpRequest对象的三个重要属性：onreadystatechange,readyState,status;


onreadystatechange:存储函数（函数名），每当readyState属性改变时，就会触发该事件；


readyState：存有XMLHttpRequest的状态，从0--4共5个状态。


             0：请求为初始化；
 
             1：服务器链接已建立；


             2：请求已接受；
  
             3：请求处理中；


             4：请求已完成，且响应就绪。


status：200：“OK”；404：未找到指定页面。


在onreadystatechange事件中，我们规定当地服务器响应已做好被处理的准备时执行任务。


当readyState等于4且状态status为200时，表示响应就绪。


  xmlhttp.onreadystatechange=function(){
 
    if(xmlhttp.readyState==4&&xmlhttp.status==200){


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


      }


    }


CallBack函数：callback函数是一种以参数形式传递给另一个函数的函数。


如果在一个网站项目中存在多个AJAX的任务，那么就应该为创建XMLHttpRequest创建一个标准的函数，并为每个AJAX任务调用函数。


该函数调用应该包涵URL以及发生onreadystatechange事件时执行的任务。（调用时可能不会相同）


function myFunction(){


  loadXMLDoc("ajax_info.txt",function(){
 
    if(xmlhttp.readyState==4&&xmlhttp.status==200){


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


     });

}

   上面的都是整理了一些有关于AJAX的基础知识，希望对初学者有用，大部分参考的W3cschool中的相关知识，具体很多东西的实现大家还需要多学习，多掌握，AJAX作为Google所推广的一门新技术给网页的异步刷新带来了巨大的突破，本人也是正处于学习阶段，有很多不懂的东西希望大家以后多多交流，多多沟通，共同学习，共同进步。