Ajax学习笔记

一、概念:Ajax:Asynchronous JavaScript and XML 异步的JS和XML

二、原理:通过XMLHttpRequest向服务器发送异步请求,从服务器获取数据到客户端的内存中,然后JavaScript根据需要对这些资源进行处理,并通过CSS和DOM实现页面呈现给浏览器。

1.一般Web请求处理:原理是由Client向Server提交页面申请,再由Server将申请通过HTTP传回给Client生成浏览页面.

  

2.使用AJAX的原理:AJAX引擎会在浏览器呈现Server回发的数据之前做进一步处理,可以实现异步处理、页面无刷新效果。

   

三、XMLHttpRequest对象:

1.概念:XMLHttpRequest是AJAX的核心对象,通过它实现了可以异步方式获取服务器数据。在IE6及以下版本的浏览器中是MicrosoftXMLHTTP的ActiveX组件,在其他浏览器中才叫XMLHttpRequest.

2.创建XMLHttpRequest对象:

   var xmlHttp;
        function CreatexmlHttp() {
            if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
         }; 

 //对于window.ActiveXObject的调用会返回一个对象,也可能返回null,if语句会把调用返回的结果看作是true或false(如果返回对象则为true,返回null则为false),以此指示浏览器是否支持ActiveX控件,相应地得知浏览器是不是IE旧版本,如果是,则通过实例化ActiveXObject的新实例来创建XMLHttpRequest对象,同理,window.XMLHttpRequest返回一个对象,就把XMLHttpRequest实例化为一个本地Javascript对象。

四、方法和属性:

    

    

   1.readyState属性:当前请求的状态,有五个可取值:

      值0:尚未初始化(还未调用send()方法,该阶段主要是在判断XMLHttpRequest对象是否存在);

      值1:正在加载(已经调用send()方法,正在发送请求);

      值2:加载完毕(send()方法执行完毕已经接收到全部响应内容);

      值3:正在处理(正在解析响应内容);

      值4:处理完毕(响应内容解析完毕,可以访问响应数据了)。

  2.status属性:HTTP状态码,常见的有:200(请求成功),202(请求被接受但处理未完成),400(错误请求),404(请求资源未找到),500(内部服务器错误)

  3.onreadystatechange:当XMLHttpRequest的readyState发生改变时触发的事件。

  4.setRequestHeader()方法:使用POST方式传参时使用,必须在open()之后调用,参数setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312")。有关setRequestHeader的资料可参考这个链接http://muyi137.diandian.com/post/2011-05-20/918918

五、POST和GET请求方式:

     1.GET方式:参数放在URL中传递给SERVER端:

      function GetSend(){

      CreatexmlHttp();

      xml.onreadystatechange=function(){

          if(xmlHttp.readyState==4){

               if(xmlHttp.status==200){     

                 var receiveData=xmlHttp.responseText;

                 //处理数据...

              }

          }

       }

      xml.open("GET","XXX.ashx?user=admin&password=123",true);

      xml.send();

     }

    2.POST方式:参数藏在请求报文中传递给SERVER端:

       function PostSend(){

       CreatexmlHttp();

        xml.onreadystatechange=function(){

if(xmlHttp.readyState==4){

               if(xmlHttp.status==200){     

                 var receiveData=xmlHttp.responseText;

                 //处理数据...

                }

              }

           }

        xml.open("GET","XXX.ashx",true);

        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312");

        var param="user=admin&password=123";

        xml.send(param);

       }      

   

原文地址:https://www.cnblogs.com/JYsharp/p/3413405.html