jq的实现方法：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> </body> <script src="js/jquery-2.1.4.min.js"></script> <script> $('button').click(function() { $.ajax({ url: '/ajax/ajax/a.txt', //请求路径 type: 'GET', //请求方式 async: true, //同步异步 dataType: 'text',//返回数据类型 data: '噢噢噢噢', //发送数据到后台 success: function(data) { //请求成功拿到数据 console.log(data); }, error:function(err){//提供报错信息 console.log(err); } }) }) </script> </html>原生实现方法：（以get方法为例）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- 1， 这块首先要处理一个兼容问题，因为在低版本的IE下，是不存在XMLHttpRequest内置对象， 我们可以使用另一个对象ActiveXObject('Microsoft.XMLHTTP')替代就可以。 XMLHttpRequest 新浏览器 ActiveXObject("Microsoft.XMLHTTP"); 旧浏览器 2, xhr.open(method,url,async) method: get post url: 请求地址 async: ture（异步） flase（同步） 3, xhr.send() 发送请求 通过get方式发送的请求， xhr.send(null) 通过post方式发送的请求。 xhr.send("user=zf") 4， 监听 xhr.onreadystatechange 当状态码改变时触发 5, 接收数据， responseText 接收响应的数据 (字符串格式) get 与 post 的区别: POST是发送数据，GET是接受数据； POST发送数据的安全性较好，而GET较差； POST发送数据不限制大小，而GET大小受限2~100k。 --> <script> //声明ajax核心对象， 处理兼容 var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } else { alert('浏览器很垃圾，换吧'); } //建立连接 xhr.open("GET", "http://localhost/speed/a.txt", true); //发送请求 xhr.send(null); //监听状态码 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { //接收数据 console.log(xhr.responseText) } } </script> </body> </html>