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

  • 相关阅读:
    对于开发WEB方面项目需要的工具和技术了解
    SQLServer创建链接服务器
    Tomcat部署Web应用方法总结
    JDK/bin目录下的不同exe文件的用途
    js高级技巧自定义事件
    HTML5 web SQL
    js高级技巧拖放
    图片替换文字
    CSS内容生成(重要内容:css计数器)
    CSS 使元素垂直居中
  • 原文地址:https://www.cnblogs.com/xiaowei-blog/p/3949736.html
Copyright © 2020-2023  润新知