AJAX简单实现(jq实现和原生实现)
用户投稿 学习笔记 10阅读
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 posturl: 请求地址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>标签：