一般我们写网页的时候，如果用到Ajax请求服务器，都是使用JQuery等已经封装好的库来调用，比较简单。
但是一般这些库的功能很多，引入了太多我们用不到的东西，如果我们需要写一个功能单一，简单的页面，完全用不到引用如此庞大的库文件。
我们可以简单实现一个自己的Ajax请求功能，具体的代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
var ajax = {}; ajax.x = function () { if (typeof XMLHttpRequest !== 'undefined') { return new XMLHttpRequest(); } var versions = [ "MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp" ]; var xhr; for (var i = 0; i < versions.length; i++) { try { xhr = new ActiveXObject(versions[i]); break; } catch (e) { } } return xhr; }; ajax.send = function (url, method, data, success,fail,async) { if (async === undefined) { async = true; } var x = ajax.x(); x.open(method, url, async); x.onreadystatechange = function () { if (x.readyState == 4) { var status = x.status; if (status >= 200 && status < 300) { success && success(x.responseText,x.responseXML) } else { fail && fail(status); } } }; if (method == 'POST') { x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); } x.send(data) }; ajax.get = function (url, data, callback, fail, async) { var query = []; for (var key in data) { query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async) }; ajax.post = function (url, data, callback, fail, async) { var query = []; for (var key in data) { query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } ajax.send(url,'POST', query.join('&'), callback, fail, async) }; |
使用方法：GET
|
1 2 3 4 5 6 |
ajax.get('/test.php', {foo: 'bar'}, function(response,xml) { //success }, function(status){ //fail }); |
POST
|
1 2 3 4 5 6 7 |
ajax.post('/test.php', {foo: 'bar'}, function(response,xml) { //succcess },function(status){ //fail }); |
这里需要注意一个问题，如果我们想要发送类似
|
1 |
http://www.mobibrw.com/control?op_code=code&op_cmd=cmd |
的URL，是不能通过上面的发送方式（字段填写在data参数中）发送的，上面的发送方式是属于表单的上传方式。
我们需要用下面的方式进行处理（自己拼凑URL）
|
1 2 3 4 5 6 7 |
var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd; ajax.post('/control' + sendCmd,'',function(response,xml) { console.log('success'); }, function(status){ console.log('failed:' + status); }); |