ajax

1.Ajax
  (1)获得ajax对象:
     var  ajax=null;
     if(window.XMLHttpRequest){
        ajax=new XMLHttpRequest();
      }else if(window.ActiveXObject){//如果是旧版IE
            ajax=new ActiveXObject();
         }
  (2)指定该ajax对象的结果处理器:
      ajax.onreadystatechange=handleStateChange;//在请求过程中的每个阶段,该函数都将被调用

 (3)发送请求(两步):
 
             发送请求书写格式
             第一步:调用open()方法
            ajax.open(method,url,async,userName,userPassword);
              //参数method:最常用的请求类型为GET或POST(字母大写);
           //参数URL:绝对路径或相对路径
           //参数async:表示同步或异步;为布尔值:true(异步),false(同步)
           //参数userName或userPassword:可选;分表表示用户名和密码,如果资源受到HTTP验证保护,这两个参数是必需的。
          第二步:调用send()方法
            ajax.send(arg);//arg:请求中的数据
     注意:请求发送但尚未完成的时候,可以调用对象的abort()方法撤销请求。
         可以设置一个定时器,在请求消耗时间过长的时候撤销它:
       ajax.open('GET','http://www.example.com/pgge.php'.true);
    var  ajaxAbortTimer=setTimeout(function (){
    if(ajax)
    {
    ajax.abort();//撤销
    ajax=null;
    }   
    },
    5000    
    );//上述代码在创建5秒后调用匿名函数。在函数中,如果ajax对象的值如果仍然为假时,就可以确定请求仍在进行,可以终中止

  (4)获取服务器数据
      在ajax异步请求之后,在对象的readyState属性变化时,将调用ajax对象onreadystatechange属性所指定的函数来处理服务器的响应
          
     onreadystatechange属性的5个值,按照顺序执行:
           0,未发送
     1,打开
     2,接收到首标
     3,加载中
     4,完成
   在发送请求之后,该值立刻变成1,然后变成2、3,最后变成4.
           *在处理readyState变化的函数中,可以检查readyState属性并做出相应的反应。
            例如:
          属性值为4,意味着处理完成,页面可以使用处理的结果,其他值,一位置Ajax仍在处理中,脚本不需要做任何事情,或者显示"加载中..."的信息;
      if(ajax.readyState==4){
      // Handle the response
      ...
      }else{
      //Show the 'Loading ... ' message or do nothing.
      ...
      }

注意: ①我们可以在调用open()方法之后,创建“加载中...”信息,并在readyState等于4时隐藏信息(当readyState==4时,Ajax请求已经完成整个周期)。
          ②但是,在我们处理响应之前,还要进行一次检查:
           确认响应正常。检查对象的status属性可以完成确认工作,该属性代表服务器对资源请求的相应代码。这些HTTP代码包括:
            200,OK(正常)
         301,Move Permanently(永久性移动)
         304,Not Modified(未作修改)
         307,Temporary Redirect(临时重定向)
         401,Unauthorized(未授权)
         403,Forbidden(禁止访问)
         404,Not Found(未找到)
         500 ,Internal Server Error(内部服务器错误)
       使用举例:
           if(ajax.readyState==4){
           if((ajax.status>=200&&ajax.status<300)
           || (ajax.status==304)
        ){//Handle the response;
        ...
        }else
        {//satus error
        ...
        }         
        }
       ③根据Ajax的具体使用方法,如果返回有问题的代码,可以重新启用默认的浏览器行为:将浏览器重定向到非Ajax页面,真正提交到表单,等等
       ④statusText属性:代表服务器返回的对应状态码的字符串信息,可用于任何错误报告中。
       ⑤服务器返回处理后的数据时, responseXML属性和responseText属性可以得到响应数据。

 (5)Ajax对象使用完毕后(脚本不再使用它),应赋值null将其清除。
         ajax=null;
  (6)发送数据到服务器(两种方法)
         方法一:将数据附加到url之后;数据格式:“名称=值”,多个值之间使用&分隔;为保证请求使用的数据安全,将其封装在encodeRUIcomponent()调用之中
        如:ajax.open('GET','http://www.example.com/somePage.hph?id='+
     encodeRUIComponent(id),true);
      方法二:将数据作为send(arg)方法的实参,否则置ag=null;
              如:var  data='email='+encodeRUIComponent(email)
                  +'&password='+encodeRUIComponent(password);
       ajax.send(data);
  注意:①发送POST请求,必须使用第二种方法,即,适应send()方法提供数据,而不是将数据附着到URL之后。
        ②发送POST请求时,应该向服务器指明发送的内容类别。
            调用Ajax对象的setRquestHeader(name,value)方法来完成;
           //第一个参数是首标名称,第二个为其值。
          ajax.setRequestHeader('Content-Type','application/x-www-urlencoded');              
        ③FormData对象----向服务器发送送据的改进方案(老版本的浏览器不一定支持)
               var  data=new FormData();//创建FormData对象
      data.append('email',email);
      data.append('password',password);
      ajax.send(data);//发送数据请求
    优点:通过FormData对象的append()方法添加的数据,不需要再调用encodeRUIComponent()方法,也不需要设置Content-Type

(7)
       浏览器缓存问题?
      问题: 因为浏览器会试图将Ajax请求的结果缓存。所以如果浏览器缓存请求,对服务器端资源的修改就可能无法得到立即反映。
      方案一:禁用浏览器缓存(简单,受影响的只是我们自己)
   方案二:有服务器资源指定请求不应该缓存,(这将影响到使用相同服务器端资源的所有人)
        php中,发送一个Cache-Control首标可以实现这个功能:
       <?php
        header('Cache-Control:no-cache');
   方案三:在URL上添加一个随机值,例如时间戳。使得灭个请求都有一个唯一的URL,浏览器将不会使用前面缓存版本了。
      var  url='http://www/example.com/somePage.php?stamp='+new Date().getTime();
   ajax.open('GET',url,true);

原文地址:https://www.cnblogs.com/xiaowei-blog/p/3949736.html