Ajax --- 数据请求

时间:2022-01-03 02:03:01

下面主要介绍(JavaScript原生)数据请求的主要步骤:

Ajax 数据请求步骤:

1、创建XMLHttpRequest对象
2、准备数据发送
3、执行发送
4、指定回掉函数

第一步:创建XMLHttpRequest对象

 var xhr = new XMLHttpRequest();                            //  标准浏览器

 var xhr = new ActiveXObject('Microsoft.XMLHTTP');          //  IE6

第二步:使用 open() 方法将参数传入

 xhr.open('get','./check.php?username='+uname+'&password='+pw,true);   // get 请求方式

 xhr.open('post','./01check.php',true);                                // post 请求方式

第三步:使用 send() 方法将请求发送值服务器

 xhr.send(null);       // get 请求方式时,此处值为 null
xhr.send(请求地址);   // post 请求方式时,此处值为 请求地址

第四步:执行回调函数

 xhr.onreadystatechange = function(){
  if(xhr.readyState == 4){ // 4表示服务器返回的数据已经可以使用了,但是这个数据不一定是正常的
    if(xhr.status == 200){ // 这里的200表示数据是正常的
  alert(xhr.responseText);
    }
  }
}
</script>

综合:

 ==================================== html 页面  ============================================
<form>
用户名:
<input type="text" name="username" id="username"><span id="info"></span>
<br> 密码:
<input type="text" name="password" id="password">
<input type="button" value="登录" id="btn">
</form> <script>
var uname = document.getElementById('username').value;
var pw = document.getElementById('password').value; // 1、创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//标准
}else{
xhr = new ActiveXObject("Microsoft");//IE6
} // 2、准备发送
xhr.open('post','post.php',true); // 3、执行发送动作
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 如 get 此步骤省略
xhr.send('username='+uname+'&password='+pw); //post请求参数在这里传递,并且不需要转码 // 4、指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ // 4表示服务器返回的数据已经可以使用了,这里的200表示数据是正常的
var data = xhr.responseText;
if(data == '1'){
info.innerHTML == '登录成功';
}
else if(data == '2'){
info.innerHTML == '用户名或密码错误';
}else{
info.innerHTML == '服务器错误';
}
}
}
</script> =========================================== post.php 页面 ========================================
<?php
$uname = $_POST['username'];
$pw = $_POST['password']; if($uname == 'admin' && $pw == '123'){
echo 1;
}else{
echo $uname;
}
?>

注:以上是个人对原型链的理解及总结,如有笔误的地方还请大家多指教!