Ajax基础

• Ajax（Asynchronous JavaScript XML- -异步JavaScript XML- - 无刷新获取数据）

• 核心对象 XMLHttpRequest对象

  ①IE7+/主流浏览器 var xhr = new XMLHttpRequest()

  ②IE6及以下有三种不同版本的XHR对象 （MSXML2.XMLHttp , MSXML2.XMLHttp 3.0 , MSXML2.XMLHttp 6.0）

  ③如果只考虑兼容ie6+和其他主流浏览器

function createXHR(){    if(window.XMLHttpRequest){        return new XMLHttpRequest();    }else if(window.ActiveXObject){        return new ActiveXObject("Microsoft.XMLHTTP")    }}

• xhr对象的用法

  ①调用的第一个方法是.open(),它接收三个参数如下 ->
  xhr.open([要发送请求的类型]，[请求的URL]， [是否异步发送请求])

  ②调用的第二个方法是 .send(),发送特定的请求，接收一个参数 ->
  xhr.send() / xhr.send(null) -参数为null是指不需要通过请求主体发送数据-

  ③同步和异步的区别：
  异步：非阻塞 发送异步请求，让javascript据需执行不必等待响应（前面的代码不会影响后面代码执行）

  同步：阻塞 发送同步请求，javascript会等到服务器响应后继续执行（前面代码会影响后面代码执行）
  何时使用两者 -》 若要使用Ajax请求后处理发送请求返回的结果，最好使用同步吧

  ④xhr对象相关属性
  1.responseText (作为响应主体被返回的文本-后台向前台返回的文本)
  2.responseXML
  3.status (响应的HTTP状态值)
  4.statusText(HTTP状态说明)

  ⑤检查xhr对象的readyState属性值（该属性表示请求/响应过程的当前活动阶段）

  0： 未初始化 ， 尚未调用open()方法
  1： 启动 ， 已调用open()方法，但未调用send()方法
  2： 发送 ， 已调用send()方法，但尚未接收响应
  3： 接收 ， 已接收部分响应数据
  4： 完成 ， 已全部接收响应数据，可在客户端使用

  ⑥readyState值改变一次，触发一次readystatechange事件（为了保证跨浏览器的兼容性，一般在调用open()方法之前指定这个事件处理程序）

  ⑦发送HTTP头部信息（要成功发送请求头部信息，必须调用open()之后且在调用send()方法之前使用！！！）如下 ->
  xhr.open(…);
  xhr.setRequestHeader(…);
  xhr.send();

• GET请求与POST请求的区别

  ①GET请求 -> get请求会将字段显示在地址栏的后面，一般在 “?” 后面且各自键对儿以 “&”连接，若用get请求还必须对参数和值惊喜 “encodeURLcomponent()”进行编码追加到url后面，它容量小，速度快

  ②POST请求 -> post请求时浏览器吧数据作为HTTP消息实体发送，一般要发送头部信息 xhr.setRequestHeader(“Content-Type”,”application/x-new-form-urlencoded”) 它容量大，速度慢

  ③区别：
  

• Ajax跨域问题

  ①同源策略对xhr的主要约束 ， 所以在什么 “同一域名，不同端口”；“同一域名，不同协议”；“不用域名”等这些情况下会出错，因此提出了跨域问题的解决

  ②解决跨域大方向

  A. CORS(跨源资源分享) –》 IE8通过 XDomainRequest对象来支持CORS || 其他浏览器还是通过元素xhr对象支持CORS

  B.图像Ping –》（监听load/error事件）应用场景：跟踪用户点击页面或广告曝光次数

  C.JSONP （包含在回调函数中的JSON）

  ③实际操作来解决跨域问题方法

  A.动态创建 <script>

  B.利用HTML5的 postMessage

  ④Comet（Ajax升级扩展）

  A.让服务器几乎能够实时向客户端推送数据
  B.运用场景： 体育赛事比分、股市信息
  C.实现Comet手段（长轮询 || HTTP流）

• js_Ajax完整请求

/*获取xhr对象的兼容*/function createXHR(){    if(window.XMLHttpRequest){        return new XMLHttpRequest();    }else if(window.ActiveXObject){        return new ActiveXObject('Microsoft.XMLHTTP');    }} window.onload = function(){    var xhr = createXHR();/*创建xhr对象*/    xhr.onreadystatechange = function(){/*触发readystatechange事件*/        if(xhr.readyState==4){/*当响应的数据全部完成*/            /*当响应有效时*/            if(xhr.status>=200 && xhr.status<300 || xhr.status==304){                /*此处获取到后台的数据进行操作*/            }else{                /*当响应失败时*/                alert('Request was unsuccessful:' + xhr.status);            }        }       }    xhr.open('请求方式','请求地址','是否异步同步');    xhr.send();}