原生Ajax与JQuery中的Ajax 01

在早期要想实现页面的局部刷新可以使用隐藏帧技术iframe实现，实际上iframe就相当于页面的子页面，但这种方法有弊端。现在最多使用的就是使用浏览器原生的Ajax来实现页面的局部刷新，实现前后端交互可以更好的进行维护

什么是ajax？

Ajax全称 Asynchronous JavaScript and XML（异步的JavaScript和XML）ajax并不是一种新的计算机语言，而是几种现有技术的组合和应用，利用ajax可以实现浏览器和服务端的完美通信且不需要页面重新加载（局部刷新）

Ajax的核心技术

ajax的核心技术实XMLHttpRequest，他是浏览器与服务器同信的载体，负责向服务器发送请求，监听请求的状态，回调函数等等，按照W3C的标准浏览器都提供XMLHttpRequest对象接口，但一些IE低版本（IE6及以下）不支持XMLHttpRequest 而是使用ActiveXObject对象接口

使用原生Ajax发送请求的步骤

 1.创建XMLHttpRequest对象
     var xhr=new XMLhttpRequest();
  2.准备发送
  xhr.open("get'',"../check.php",''true'')
  3.执行发送动作
  xhr.send(null);
  4.指定回调函数
  xhr.onreadystatechange=function(){
     if(xhr.readyState==4 ) {
     if (xhr.status==200){
     var data=xhr.responesText;
       请求回调的内容...
        }
   }
}

分析

• 创建XMLHttpRequest对象
  在标准浏览器下使用 var xhr=new XMLHttpRequest()
  在IE6及以下版本中使用 var xhr=new ActiveXObject(“MIcsoft.XMLHTTP”);
  此处可以进行兼容性处理

• 准备发送阶段
  xhr.open(参数1，参数2，参数3)

  a . 参数1：请求方式

      http所提供的请求方式有四种包括（增删改查） 
      get用于获取数据
      post用于提交数据
      put用于添加数据
      delete用于删除数据
  

  b. 参数2： 请求的url地址
  需要注意的是：
  使用get方式发送请求时请求参数必须在url中传递
  xhr.open(“get’’,”…/check.php？username’+uname’",’‘true’’)
  如果在IE6中发送请求时还需要添加encodeURI进行编码处理，否则中文参数会出现乱码情况
  使用post发送请求时不需要在url中传递参数，也不需要进行转码操作，但需要必须设置请求头:
  xhr.setHttpHeader(“Content-Type”,“application/x-www-form-urlencoded”）
  c. 参数3 ：同步或异步标志位
  默认 true为异步，false为同步

• 执行发送动作
  xhr.send()
  如果是get方法请求 send中传null
  如果是post方法请求 send中传请求参数

• 回调函数
  Ajax 请求状态值的变化

     0         表示 xhr对象创建完成
     1         表示已经发送了请求
     2         表示浏览器已经收到了服务器响应的数据
     3         表示正在解析数据
     4         表示数据解析完成，可以使用了
  

  只有readyState= =4 时才意味着整个请求已完成，并且得到了数据，但这个数据有可能不正确，这时候需要通过http返回信息的头部信息来判断当前服务器运行是否正常，这个头部信息可以用XMLHttpRequest的属性status来获取，当且仅当status==200时，才能表示服务器成功的返回正确数据

注： http的状态码

  1XX      服务器收到请求，需要继续处理 
           如101状态码，表示服务器将通知客户端使用更高版本的HTTP协议
  2XX      请求成功 如200状态码
  3XX      重定向    
           如302状态码，表示临时重定向，请求将包含一个新的URL地址，客户端将对这个新地址进行GET请求
  4XX    客户端错误   
           如404 状态码 表示客户端请求的资源不存在
  5XX    浏览器错误

Ajax的返回类型有 responseText 和responseXML

待续…