原生JavaScript实现Ajax的使用

Ajax 是一种无需重新加载整个网页的情况之下能够更新部分网页的技术。异步请求，局部刷新。

1.异步操作

• 需要XMLHttpRequest对象。
• 后台与服务器进行数据的交换，数据交换的同时不加载整个页面，可以对网页进行部分的更新。

2.XMLHttpRequest 对象

• 实例化,创建XMLHttpRequest对象（需要判断网页）

  var request;
  if(window.XMLHttpRequest)
  {
      request=new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari...
  }
  else
  {
      request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
  }

2.HTTP请求

• 包含四个部分
  
  • HTTP请求的方法或动作，即GET/POST
  • 正在请求的URL
  • 请求头，包含一些客户端环境信息，身份验证信息等
  • 请求体，即请求正文，可以包含客户提交的查询字符串信息，表单信息等
    请求头与请求体中间有空行，表示请求头已经结束
• GET/POST
  
  • GET用于查询，不改变数据信息；用URL传递参数（所有人可见）；所发送信息的数量有限制，一 般在2000个字符；幂等
  • POST用于修改、新建数据；传递的参数嵌入http请求体中；数量无限制；安全

3.HTTP响应

• 包含三个部分
  
  • 状态码（数字和文字组成），用来显示请求是成功还是失败。
  • 相应头，包含许多有用的信息，如服务器类型、日期时间、内容类型。。。
  • 响应体，即相应正文
• 状态码
  
  • 1xx：信息类，表示收到web浏览器请求，正在进一步的处理。
  • 2xx：成功，用户请求被正确接收，理解和处理。200 OK
  • 3xx：重定向，请求没有成功，客户必须采取进一步的动作
  • 4xx：客户端错误，提交的清错有错误。404 NOT Found
  • 5xx：服务器错误，服务器不能完成对请求的处理。500

4.步骤

• 实例化,创建XMLHttpRequest对象（需要判断网页）

  var request;
  if(window.XMLHttpRequest)
  {
      request=new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari...
  }
  else
  {
      request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
  }

• 发送请求（方法）
  
  • open(method,url,async) 参数分别为：GET或POST/地址/true或false(可不写) 调用http请求
  • send(string) 把请求发送到服务器。当方法为POST时要填写，GET可以不写或者写null
  • 在POST时，需要在open()和send()中添加一行代码,用来设置send()方法的格式
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

• 取得响应

  • responseTest：获得字符串形式的响应数据。
  • responseXML：获得XML形式的响应数据。
  • status和statusTest：以数字和文本形式返回HTTP状态码。
  • getAllResponseHeader()：获取所有的响应报头
  • getResponseHeader()：查询响应中的某个字段的值。
  • readyState属性：为4时表示请求已完成，且响应已就绪。

  var request=new XMLHttpRequest();
  request.open("GET","get.php",true);
  request.send();
  request.onreadystatechange=function()
  {
      if(request.readyState===4&&request.status===200)
      {
          //做一些事情 request.responseText
      }
  }