异步请求原生Ajax窥探-原创手记-慕课网

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

简介

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

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();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST。url：文件在服务器上的位置async：true（异步）或 false（同步）
send(string)	将请求发送到服务器，string:仅用于post请求

至于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");

方法	描述
setRequestHeader(header,value)	向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值

服务器响应

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

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

onreadystatechange 事件

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

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
status	状态码。200: "OK"，404: 未找到页面

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();
}

原生ajax封装

用多了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