AJAX相关知识总结

一. AJAX配置

• 打开一个URL请求地址(发送请求前的一些配置)
  • [请求方式]:GET系列:GET/DELETE/HEAD,POST系列:POST/PUT
  • [请求地址]:咱们经过这个地址向服务器发送数据请求,请求的地址通常都是后台提供的(API接口文档)
  • [设置同步异步]:默认是TRUE异步,设置为FALSE为同步
  • [USER NAME]:用户名
  • [USER PASS]:密码,某些时候服务器为了保证安全,只容许部分用户可以经过服务器的请求(咱们如今通常都是匿名访问),此时须要咱们提供安全的秘钥 xhr.open("GET","/userInfo",true);
• 监听AJAX状态的改变,实现不一样的业务操做
  • xhr.readystate:AJAX状态
    • 0:UNSEND:未发送,刚开始建立完成AJAX实例,初始状态就是0
    • 1:OPENED:已打开,就是已经执行完成第二步操做了
    • 2:HEADERS_RECEIVED:客户端已经接收到服务器返回的响应头信息
    • 3.LOADING:服务器返回的响应主体内容正在传输中
    • 4.DONE:响应主体内容已经被客户端接收
  • xhr.status:HTTP状态码
    • 经过状态码能够知道当前HTTP事物是否成功,以及失败的缘由
    • [2开头]:表明成功
      • 200:ok
    • [3开头]:也表明成功,可是这个成功经历了一些特殊处理
      • 301:Move Permenently:在新版本HTTP协议中,它表明永久转移(在以前的协议版本中它表明永久重定向)
      • 302:move Temporarily 在新版本HTTP协议中,它表明临时转移(在以前的协议版本中它表明临时重定向,新版本协议中307表明临时重定向)=>"服务器负载均衡"
      • 304:Not Modified,读取的是缓存中的数据(网站性能优化的一个特别重要的手动:咱们通常都会把静态的资源文件(CSS/JS/IMG作304缓存)
    • [4开头]:表明错误,并且通常都是客户端的错误
      • 400:Bad Request,请求参数错误
      • 401:Unauthorized:无权限访问
      • 403:Forbidden:接收到请求,可是没有返回正常的结果,也不返回错误的缘由,有些时候还会返回404
      • 404:Not Found,请求的地址不存在
      • 413:Request Entity Too Large,客户端传递给服务器的内容超过了服务器愿意接受的范围
    • [5开头]:表明错误,并且通常都是服务器端错误
      • 500:Internal Server Error,服务器的未知错误
      • 503:service Unavailable,服务器超负荷
• 操做
  • xhr.response:获取响应主体(通常不用)
  • xhr.responseText:获取响应主体内容,并且获取的内容是文本格式(字符串)的:
  • xhr.responseXML:获取响应主体内容,并且获取的内容是XML格式(XML文档)的
  • xhr.getResponseHeader([key]):获取响应头信息,key为关键字,如Date可获取扶服务器的时间
  • xhr.getAllResponseHeader:获取所有的响应头信息
  • xhr.timeout:设置AJAX请求的超时时间,若是当前请求超过这个时间,表明超时,AJAX请求结束,而且会触发ontimeout事件
  • xhr.abort():中断当前AJAX请求,能够触发onabort事件
  • xhr.setRequsetHeader([key],[value]):设置请求头信息
    • 设置请求头以前必须保证已经执行open了
    • 设置请求头的内容不能是中文(除非进行编码)

二.AJAX请求发送

AJAX请求这件事从执行send后才开始(以前都是在作准备),当readystate=4的时候这件事结束

• xhr.send(null):send方法中写的内容就是客户端经过请求主体传递给服务器的内容,不想经过请求主体传递内容咱们写null

三. js编码和解码

若是就是想经过请求头给服务器传递中文汉字,咱们须要先把传递的内容进行编码,由服务器进行编码

• escape/unescape:这种方式常常应用于客户端对中文汉字和特殊字符进行编码的(通常不经常使用,由于服务器端语言,除了NODE其余的貌似不支持这个方法)
• encodeURI/decodeURI:按照UNICODE编码解码
• encodeURIComponent/decodeURIComponent:相对于上面的方法来讲能够把特殊字符也进行编码,而encodeURI只能编码中文汉字
  • 服务器端接受的时候再进行解码decodeURIComponent

四. 加密

加密不是简单的编码解码,而是按照规则进行加密解密(项目中的重要信息咱们通常都要进行加密的)

• [可逆转的加密]
  • 重要的信息加密后还能够再解密回来,例如:电话号码或者银行卡号进行加密
  • 通常公司都是本身写加密和解密规则
• [不可逆转的加密]
  • 加密后就不可解密了,例如:全部密码都是不可逆转的加密
  • 最经常使用的是md5,sha1....
  • 真正项目中会把MD5加密后的结果进行二次或者屡次处理

五.GET/POST系列请求

无论哪一种HTTP请求方式,客户端均可以把信息传递给服务器,服务器也能够把内容返回给客户端

• GET系列

  • GET:获取,给服务器的少,从服务器拿的多
  • DELETE:删除,从服务器上删除一些资源文件
  • HEAD:获取响应头,使用该请求只能获取服务器的响应头信息,获取不到响应主体内容

• POST系列

  • POST:推送,给服务器的多,从服务器拿的少
  • PUT:放,在服务器上放入一些资源文件

• GET系列和POST系列存在一些主要的区别

  • GET请求传递给服务器内容经过的是"问号传参",POST系列传递给服务器内容经过的是"请求主体"
  • 每一个浏览器对于URL的长度都是一个最大限制(谷歌8kb/火狐7kb/IE2kb),若是POST请求也用问号传参,颇有可能致使URL的长度超出限制(POST传递的内容多),超出的部分会被浏览器自动截取掉,致使信息不完整,因此POST应该使用请求主体,GET可使用问号传参(GET传递的少);请求主体传递的内容大小理论上没有限制,真实项目中为了保证上传的速度,咱们通常本身会限制其大小(例如:上传文件要求限制在100KB之内)

  [GET]
  xhr.open("GET","/userInfo?name=zxt&age=27&sex=1"); xhr.send(null); [POST] xhr.open("POST","/userInfo"); xhr.send("name=zxt&age=27&sex=1");

  • GET系列请求会出现不可控制的缓存,而POST请求不会
    • 缘由是由于GET是经过问号传参的方式传递给服务器的,若是我发送两次请求,地址和传递的参数都一摸同样,会触发浏览器的记忆识别功能,它认为你第二次请求的数据和第一次同样,因此会把缓存中的数据返回;有些需求这样很差,例如随时获取股票信息等需求此时咱们须要清除GET请求的缓存;
    • [清除缓存只须要在每一次请求的地址后面加一个随机数,保证每一次请求的地址不彻底一致便可;属性名使用_是为了避免和其余有意义的属性名冲突(行业规范)]

    xhr.open("GET","/userInfo?_="+Math.random()); xhr.send(null);

  • GET系列请求相对于POST请求来讲不安全,在互联网面前没有绝对的安全,咱们平时上网都是在裸奔
    • 缘由:GET传递个服务器的内容都在URL上(问号传参),有一种比较简单的黑客技术"URL劫持",别人能够经过劫持URL把咱们传递给服务器的数据捕获到
    • 之后只要给服务器传递的是重要的信息,无论内容多少都应该使用POST

六. 获取服务器时间

• 咱们获取的服务器时间和当前真实的时间,出现一些差距"时间差",咱们获取的时候是服务器返回数据的时间,客户端接收到数据也须要一点时间,因此当客户端接收到这个值的时候,已经距离真实的时间差了一点
  • 减小时间差
    1. 在xhr.readyState==2这个阶段获取服务器时间(AJAX请求必须是异步的,同步的只能在状态为4的时候处理)
    2. xhr.open("HEAD"...)请求方式是HEAD请求,咱们只须要获取响应头便可
    3. head请求会产生缓存问题,使用Math.random();
    4. 只是用一次AJAX请求,在获取的时间中进行递增,来同步服务器的时间,减小服务器的压力

七. jQ中的AJAX

$.ajax("note.txt",{
    method:"get",
    dataType:"txt",
    async:true,
    cache:false,
    data:{
        name:"zxt",
        age:"[27,28]"
    }
    success:function(){},
    error:function(){},
    complete:function(){}
})

• method:等同于type属性
• dataType:txt(默认),预先设定服务器返回数据的格式,无论咱们设置什么值,服务器返回给咱们的数据通常都是字符串或者XML格式的,组件库的目的就是根据咱们设定的值把服务器返回的结果转换成咱们所须要的->"dataType"的值并不能影响服务器的返回结果
• async:设置同步仍是异步,默认是true,异步
• cache:若是当期的请求是GET系列,咱们设置的仍是false,此时须要咱们去清除GET请求的缓存,默认值true
• data
  • 全部须要传递给服务器的内容都放在DATA中,GET系列采用问号传参,POST系列采用请求主体;DATA中的字符串内容是什么咱们传递的就是什么
  • 还能够是个对象,POST系列会把这个对象直接放在请求主体中处理,DATA中是什么放入的就是什么;GET系列会把它拆分XXX=XXX这种形式,放在URL的末尾以问号传参传递给服务器,值得注意的是,对于汉字和特殊字符,咱们须要把内容进行编码
• complete:无论成功仍是失败,只要完成就会执行这个

八. 模拟jQ中AJAX

• 思想
  • 传入为一个对象,避免顺序问题致使参数混乱
  • 对传入的参数进行默认操做
    • 使用method进行默认,不使用Type
  • 将传入的对象将默认值进行覆盖,没传递的走默认值,传递的走本身须要的值
    • 将Type和method进行统一,最后使用method
  • 发送AJAX请求
    1. 对XMLHttpRequest进行兼容处理
    2. 在onreadystatechange事件中,分状况进行讨论
       • 请求失败
       • 请求成功
         • 对readystate的状况进行讨论
         • 获取响应主体内容(通常是字符串),根据dataType值来处理响应主体内容,处理失败,结果为空,避免报错
         • 讨论对应的回调函数并传入响应主体执行函数
           • 回调函数中的this为xhr对象
    3. 根据method对data参数进行处理,并传入send()中
  • 根据dataType和cache的值来进行缓存清除操做
    • 验证url是否?是否存在,来对url进行随机数的添加