首页 > 代码库 > Ajax --- 数据请求
Ajax --- 数据请求
下面主要介绍(JS原生)数据请求的主要步骤:
Ajax 数据请求步骤:
1、创建XMLHttpRequest对象
2、准备数据发送
3、执行发送
4、指定回掉函数
第一步:创建XMLHttpRequest对象
1 var xhr = new XMLHttpRequest(); // 标准浏览器 2 3 var xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); // IE6
第二步:使用 open() 方法将参数传入
1 xhr.open(‘get‘,‘./check.php?username=‘+uname+‘&password=‘+pw,true); // get 请求方式 2 3 xhr.open(‘post‘,‘./01check.php‘,true); // post 请求方式
第三步:使用 send() 方法将请求发送值服务器
1 xhr.send(null); // get 请求方式时,此处值为 null2 3 xhr.send(请求地址); // post 请求方式时,此处值为 请求地址
第四步:执行回掉函数
1 xhr.onreadystatechange = function(){ 2 if(xhr.readyState == 4){ // 4表示服务器返回的数据已经可以使用了,但是这个数据不一定是正常的 3 if(xhr.status == 200){ // 这里的200表示数据是正常的 4 alert(xhr.responseText); 5 } 6 } 7 } 8 </script>
综合:
1 ==================================== html 页面 ============================================ 2 <form> 3 用户名: 4 <input type="text" name="username" id="username"><span id="info"></span> 5 <br> 密码: 6 <input type="text" name="password" id="password"> 7 <input type="button" value="http://www.mamicode.com/登录" id="btn"> 8 </form> 9 10 <script> 11 var uname = document.getElementById(‘username‘).value; 12 var pw = document.getElementById(‘password‘).value; 13 14 // 1、创建XMLHttpRequest对象 15 var xhr = null; 16 if(window.XMLHttpRequest){ 17 xhr = new XMLHttpRequest();//标准 18 }else{ 19 xhr = new ActiveXObject("Microsoft");//IE6 20 } 21 22 // 2、准备发送 23 xhr.open(‘post‘,‘post.php‘,true); 24 25 // 3、执行发送动作 26 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 如 get 此步骤省略 27 xhr.send(‘username=‘+uname+‘&password=‘+pw); //post请求参数在这里传递,并且不需要转码 28 29 // 4、指定回调函数 30 xhr.onreadystatechange = function(){ 31 if(xhr.readyState == 4 && xhr.status == 200){ // 4表示服务器返回的数据已经可以使用了,这里的200表示数据是正常的 32 var data =http://www.mamicode.com/ xhr.responseText; 33 if(data =http://www.mamicode.com/= ‘1‘){ 34 info.innerHTML == ‘登录成功‘; 35 } 36 else if(data =http://www.mamicode.com/= ‘2‘){ 37 info.innerHTML == ‘用户名或密码错误‘; 38 }else{ 39 info.innerHTML == ‘服务器错误‘; 40 } 41 } 42 } 43 </script> 44 45 =========================================== post.php 页面 ======================================== 46 <?php 47 $uname = $_POST[‘username‘]; 48 $pw = $_POST[‘password‘]; 49 50 if($uname == ‘admin‘ && $pw == ‘123‘){ 51 echo 1; 52 }else{ 53 echo $uname; 54 } 55 ?>
注:以上是个人对原型链的理解及总结,如有笔误的地方还请大家多指教!
Ajax --- 数据请求
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。