如何实现ajax请求

ajax是异步的JavaScript和XML。ajax是一种通过在后台与服务器进行少量数据交换，在无需重新加载整个网页的情况下，更新部分网页的技术。

如何实现ajax请求

1. 创建XMLHttpRequest实例。通过创建一个XMLHttpRequest对象得到一个实例，调用实例的open()方法为这次ajax请求设定相应的HTTP方法，相应的地址以及是否异步。
2. 发送HTTP请求。调用send()方法发送请求，其可以接收一个参数，即要作为请求主题所发送的数据。
3. 接收服务器响应数据。监听readystatechange事件，通过该实例的readyState属性来判断请求状态，其分为0，1，2，3，4四种状态，4表示请求完成且响应就绪。这时可通过HTTP的status判断请求结果，进行相应的操作。

下面是一个ajax请求改变文本内容的实例。

var xhr;
if(window.XMLHttpRequest) {
  //ie7+,firefox,chrome,safari,opera
  xhr = new XMLHttpRequest();
} else {
  //ie5,ie6
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function() {
  if(xhr.readyState==4 && xhr.status==200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "xhr_info.txt", true);
xhr.send(null);

ajax创建XMLHttpRequest对象

XMLHttpRequest用于在后台与服务器交换数据。

创建XMLHttpRequest对象：

var xhr;
if(window.XMLHttpRequest) {
  //ie7+,firefox,chrome,safari,opera
  xhr = new XMLHttpRequest();
}else {
  //ie5,ie6
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

ajax向服务器发送请求

使用XMLHttpRequest对象的open()和send()。

//请求类型，文件在服务器上的位置，是否异步
xhr.open("GET", "ajax_info.txt", ture);
xhr.send(null);

1. GET还是POST
   GET和POST是TCP/IP协议中两种发送请求的方法，本质上都是TCP链接。他们运输数据的渠道有些不一样，GET通过URL传递参数，POST放在request body中传递参数。
   与POST相比，GET更简单也更快(只产生一个数据包)，在大部分情况下可以使用。

以下情况一般使用post

• 无法使用缓存文件
• 向服务器发送大量数据(POST没有数据量限制)
• 发送包含未知字符的用户输入时

2. url--服务器上的文件
   url相对于执行代码的当前页面，也可为绝对路径。

3. 异步--true或false
   如果异步，则有：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

4. send()方法接收一个参数，即要作为请求主题发送的数据。如不需要发送数据则传入null。

ajax服务器响应

如需获取来自服务器的响应，可以使用XMLHttpRequest对象的responseText或responseXML属性。

1. responseText
   如果来自服务器的响应并非XML，使用responseText将返回字符串响应数据。

document.getElementById("mydiv").innerHTML = xhr.responseText;

2. responseXML
   如果来自服务器的响应是XML，而且需要XML对象进行解析，可使用responseXML获得XML形式的响应数据。

3. status
   响应的HTTP状态。服务器常用的状态码如下:

• 200 服务器响应正常
• 304 该资源在请求后没有做任何修改（通常用于浏览器的缓存机制）
• 400 无法找到请求的资源
• 404 访问的资源不存在
• 500 服务器内部错误

4. readyState
   表示请求/响应过程的当前活动阶段。
   可取的值如下：

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

onreadystatechange事件

当请求发送到服务器时，我们需要执行一些基于响应的任务。
只要readyState属性的值由一个值变成另一个值，都会触发一次onreadystatechange事件，可以利用这个事件来检测每次状态变化后的readyState的值。
当readyState==4且status==200时，响应就已经就绪。

xhr.onreadystatechange = function() {
  if(xhr.readyState==4) {
    //服务器完成了请求或客户端执行GET请求但文件未发生变化(后者通常用于浏览器的缓存机制)
    if((xhr.status>=200 && xhr.status<=300) || xhr.status==304) {
      console.log(xhr.responseText);
    }else{
      console.log("request error."+xhr.status);
    }
  }
}

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。如果网页存在多个ajax任务，可以为创建XMLHttpRequest对象编写一个标准的函数，并为每个ajax任务调用该函数。该函数调用应该包含URL和发生onreadystatechange事件时执行的任务。

下面是一个调用回调函数与服务器进行交互的实例。

//ajax_func.js
var xhr;
function changeContent(url, cfunc) {
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange = cfunc;
  xhr.open("GET", url, true);
  xhr.send(null);
}
function ajaxFunc() {
  changeContent("ajax_info.txt", function() {
    if(xhr.readyState==4) {
      if(xhr.status==200 || xhr.status==304) {
        document.getElementById("mydiv").innerHTML = xhr.responseText;
      }else{
        alert("request error." + xhr.status);
      }
    }
  })
}

  
    
    
  
  
    

      
ajax回调函数