• 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);

           }      

       

  • 相关阅读:
    MongoDB中聚合工具Aggregate等的介绍与使用
    《PHP7底层设计与源码实现》学习笔记1——PHP7的新特性和源码结构
    数据结构与算法之PHP排序算法(桶排序)
    数据结构与算法之PHP排序算法(快速排序)
    数据结构与算法之PHP排序算法(归并排序)
    数据结构与算法之PHP排序算法(希尔排序)
    数据结构与算法之PHP排序算法(堆排序)
    从关系型数据库到非关系型数据库
    redis在windows下安装和PHP中使用
    PHP-redis中文文档
  • 原文地址:https://www.cnblogs.com/JYsharp/p/3413405.html
Copyright © 2020-2023  润新知