一、原生AJAX我的代码式笔记:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> // 1.首先创建xhr对象 var xhr = null; // 能力检测 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }else { xhr = new ActiveXObject("Mircosoft.XMLHTTP"); } /* // 封装获取xhr的工厂 var xhr = getXHR; function getXHR () { if (window.XMLHttpRequest) { return new window.XMLHttpRequest(); }else { retrun new ActiveXObject("Mircosoft.XMLHTTP"); } } * */ // 4.设置回调函数(因为浏览器的兼容性问题要写在配置和发送之前) // 回调函数就是表示收到请求后做什么 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status <300 || xhr.status == 304){ // 获取文本信息 var data = xhr.responseText; console.log(data); }else { throw new Error("请求发生错误"); } } } /* // 关于回调函数中的属性 xhr.readyState (就绪状态) 0 未初始化状态 1 xhr对象正在加载 2 xhr对象加载完成 3 正在传输数据 4 全部完成 只要数据值发生改变就会触发onreadystatechange xhr.onreadystatechange 可以捕获state值改变后做的事情 当xhr.readyState == 4 对象加载数据传输完成 xhr.status (http状态码) 1** 消息 2** 成功 3** 重定向 4** 请求错误 5** 服务器错误 6** 其他 当xhr.status == 2** ||304时是成功状态 */ /* //关于ajax中的缓存问题 ajax中缓存问题严重 解决方法:在请求后加一个时间戳或者随机数 */ // 2.配置 xhr.open("get","text.php",true); /* // 关于三个参数 1)请求类型 "get" 或 "post" 2)文件路径 3)是否异步 true为异步 没人会用false! */ // 3.发送请求 xhr.send(null); //get方法没有需要提交的内容。必须写null不能空着。 /* // 关于ajax传递post请求 xhr.open("post","text.php",true); // post程序在服务器中很难处理,但如果是表单处理,PHP中有相应的处理程序,所以我们要手动的post程序转换成表单程序。 // ajax模拟提交表单 xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded"); xhr.send(提交的内容); */</script></body></html> 二、JQuery的AJAX<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script type="text/javascript" src="js/jquery-1.12.4.js"></script><script type="text/javascript"> // data 报文信息 // data是服务器发送到浏览器端的数据【报文体】 $.get("text.php",function(data){ }); /* //get携带参数 $.get("text.php?k1=v1&k2=v2",function (data) { }); $.get("text.php?k1=v1&k2=v2",json数据,function (data) { }); *//*-------------------------------------------------------------------------*/ /* //post携带参数 $.post("text.php?k1=v1&k2=v2",json数据,function (data) { }); */ /* //json数据格式 { k1:v1, k2:v2, k3:v3 } *//*-------------------------------------------------------------------------*/ /* //JQ如何使用json数据格式 $.get("system/jiekou.php",function(data){ // var dataObj = typeof data == "object" ? data : JSON.parse(data); // var dataObj = typeof data == "object" ? data : (new Function("return"+data))(); var dataObj = typeof data == "object" ? data : eval("("+data+")"); console.log(dataObj.result) }) */</script></body></html> ← Previous Post Next Post → 为正常使用来必力评论功能请激活JavaScript 一、原生AJAX二、JQuery的AJAX FEATURED TAGS AJAX