AJAX技术点
async javascript and xml:异步的js和xml，用js异步去操作xml
ajax用于数据交互，不能操作DOM
–节省用户操作，时间，提高用户体验，减少数据请求
–传输获取数据
使用场景：局部刷新页面，手机验证码验证发送ajax请求
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <!--<script src="jquery.js"></script>--> <script> //$(function(){}) //阻塞 -> 同步 //非阻塞 - 异步 /*setTimeout(function() { alert(1); }, 2000); alert(2);*/ window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { //打开浏览器 /* 1.创建一个ajax对象 ie6以下new ActiveXObject('Microsoft.XMLHTTP') */ var xhr = null; /*if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }*/ try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //alert( xhr.readyState ); //在地址栏输入地址 /* open方法 参数 1.打开方式 2.地址 3.是否异步 异步:非阻塞 前面的代码不会影响后面代码的执行 同步:阻塞 前面的代码会影响后面代码的执行 */ xhr.open('get','1.txt',true); //提交 发送请求 //alert(1); xhr.send(); //alert( xhr.readyState ); //alert(1) //alert( xhr.responseText ); //等待服务器返回内容 /* readyState : ajax工作状态 responseText : ajax请求返回的内容就被存放到这个属性下面 on readystate change : 当readyState改变的时候触发 status : 服务器状态，http状态码 */ xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { alert( xhr.responseText ); } else { alert('出错了,Err：' + xhr.status); } } } } } </script> </head> <body> <input type="button" value="按钮" id="btn" /> </body> </html>
表单参数
<body> 表单：数据的提交 action : 数据提交的地址，默认是当前页面 method : 数据提交的方式，默认是get方式 1.get 把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面 2.post enctype : 提交的数据格式，默认application/x-www-form-urlencoded <form action="1.get.php" enctype="application/x-www-form-urlencoded"> <input type="text" name="username" /> <input type="text" name="age" /> <input type="submit" value="提交" /> </form> </body>
get与post请求，get方式可能有缓存，post提交是没有缓存
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <!--<script src="jquery.js"></script>--> <script> //$(function(){}) //阻塞 -> 同步 //非阻塞 - 异步 /*setTimeout(function() { alert(1); }, 2000); alert(2);*/ window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } /* 1.缓存 在url？后面连接一个随机数，时间戳 2.乱码 编码encodeURI */ xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true); xhr.send(); xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { alert( xhr.responseText ); } else { alert('出错了,Err：' + xhr.status); } } } } } </script> </head> <body> <input type="button" value="按钮" id="btn" /> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <!--<script src="jquery.js"></script>--> <script> //$(function(){}) //阻塞 -> 同步 //非阻塞 - 异步 /*setTimeout(function() { alert(1); }, 2000); alert(2);*/ window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('post','2.post.php',true); //post方式，数据放在send()里面作为参数传递 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型 //post没有缓存问题 //无需编码 xhr.send('username=刘伟&age=30'); xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { alert( xhr.responseText ); } else { alert('出错了,Err：' + xhr.status); } } } } } </script> </head> <body> <input type="button" value="按钮" id="btn" /> </body> </html>