Ajax学习总结

第一次听到ajax这个词语之后感觉很是陌生，后来硬着头皮看了一些资料（那时候可能有点烦躁），发现ajax并不是什么新技术，只不过是借助javascript对后台返回的数据动态的在页面里面创建了一下内容。

原先的应该是在每一次请求中整个页面的内容都重新返回，然后重新由浏览器渲染一下，而ajax的思想是通过javascript对dom的操作，只是部分内容被修改，而非全部~但是就这么小小的改动可以带来好多好处~最主要的是题升了用户体验，毕竟“顾客是上帝嘛~”,哈哈~下面是一些在ajax操作中比较常用的函数希望对大家有用~

一定要注意get请求和post请求在ajax中的区别~

创建XMLHttpRequest对象

    function  createXmlHttp() =  {
        var xmlHttp = null;
         //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
        if (window.XMLHttpRequest) {
           xmlHttp = new XMLHttpRequest(); 

        //FireFox、Opera等浏览器支持的创建方式--通过XMLHttpRequest()构造函数创建XMLHttpRequest对象
        }

     else {
          var xmlhttp_arr = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
              for(var i=0;i<xmlhttp_arr.length;i++){
               if(xmlHttp = new ActiveXObject(xmlhttp_arr[i]))  break;
    /*   IE浏览器支持的创建方式--通过ActiveXObject()构造函数创建XMLHttpRequest对象，较新的版本支持参数MSXML2.XMLHTTP，较早的版本支持Microsoft.XMLHTTP（因为XML HTTP库的版本不同，所以需要传入不同的参数）  */
       }

return xmlHttp;
  }

URL附加数据函数

 function add_param_get(url,name,value){
  url += (url.indexOf("?") == -1)? "?":"&";
  url += name + "=" + value;
  return url;
  }


function add_param_post(url,name,value){
  url += (url.length > 0)? "&":"";
  url += name + "=" + value;
  return url;
  }

发送请求(GET)

 

url = "test.php";
 url = add_param_get(url,"name","value");
  
 var xml_http = new createXmlHttp();
 xml_http.open("GET",url,true);
 xml_http.send(null);
 
 if(xml_http.readyState == 4)
 {
  if(xml_http.status == 200){
    alert(xml_http.getAllResponseHeaders());
    alert(xml_http.responseText);
   } 
  else{
   alert("Error Status:" + xml_http.status);
  }
 }

发送请求(POST)

function sent_post(){
  
  var url = "test.php";
  paras = "";
  paras = add_param_post(paras,"user",document.user.info.value);
  xml_http.open("POST",url,true);
  xml_http.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
  xml_http.onreadystatechange = deal_result;
  xml_http.send(paras);
  return;
 }
 
 function deal_result(){
  if(xml_http.readyState == 4)
  {
   if(xml_http.status == 200){
    var res = xml_http.responseText;
    document.user.info.value = res;
   } 
   else{
    alert("Error Status:" + xml_http.status);
   }
  }
  return;
 }