异步请求原生Ajax窥探

csdn发布地址http://blog.csdn.net/hope_it/article/details/72861819

AJAX = 异步 JavaScript 和 XML。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

• XMLHttpRequest 对象，所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象
  创建 XMLHttpRequest 对象

var xhr =new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

应对所有的现代浏览器

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

• 向服务器发送请求

xhr.open("GET","test1.txt",true);
xhr.send();

至于get与post的区别，相信大家伙都知道

• 传参数
  get请求

  // get
  xhr.open("GET","url?name=Bill&age=20",true);
  xhr.send();

  post请求，如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xhr.open("POST","url",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=Bill&age=20");

• 服务器响应

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

• onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

readyState=4和status=2 ,表示响应已就绪

xmlhttp.onreadystatechange=function()
  {
  if (xhr.readyState==4 && xhr.status==200)
    {
    document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }

• 完整版
  步骤：
  (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

  (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息（xhr.open()）.

  (3)设置响应HTTP请求状态变化的函数.(onreadystatechange)

  (4)发送HTTP请求.(xhr.send())

  (5)获取异步调用返回的数据.

  (6)使用JavaScript和DOM实现局部刷新.

  var xhr;
  if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xhr=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange=function()
  {
  if (xhr.readyState==4 && xhr.status==200)
  {
  document.getElementById("txtHint").innerHTML=xhr.responseText;
  }
  }
  xhr.open("GET","gethint.asp?q="+str,true);
  xhr.send();
  }

用多了JQuery的$.ajax()会感觉很方便，那么我们也封装一个ajax()
代码如下：

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
function ajax(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || 'POST';
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function() {};
    var xmlHttp = null;
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    var params = [];
    for (var key in opt.data) {
        params.push(key + '=' + opt.data[key]);
    }
    var postData = params.join('&');
    if (opt.method.toUpperCase() === 'POST') {
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xmlHttp.send(postData);
    } else if (opt.method.toUpperCase() === 'GET') {
        xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
        xmlHttp.send(null);
    }
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            opt.success(xmlHttp.responseText);
        }
    };
}

使用：

ajax({
    method: 'GET',
    url: '/user/test',
    data: {
        name1: 'value1',
        name2: 'value2'
    },
    success: function(response) {
        console.log(response)；
    }
});

不得不说确实是翻版$.ajax()，O(∩_∩)O