php原生的异步请求,原生javascript的ajax请求及后台PHP响应操作示例

本文实例讲述了原生javascript的ajax请求及后台PHP响应操作。分享给大家供大家参考，具体如下：

Document

学号:
密码:

ajax的一般步骤

1、创建对象

let xhr = new XMLHttpRequest();

2、设置请求参数

xhr.open(请求方式,请求地址，是否异步);

3、设置回调函数

xhr.onreadystatechange = function () {

// 5、接收响应

alert(xhr.responseText);

}

4、发送

xhr.send();

window.onload = function(){

$("#btnLogin").onclick = function(){

//1、创建对象

let xhr = new XMLHttpRequest();

//2、设置请求参数

xhr.open('post','loginCheckajax.php',true);

//3、设置回调函数

xhr.onreadystatechange = function(){

if(xhr.readyState==4 && xhr.status==200){

if(xhr.responseText=='1'){

//存cookie

saveCookie("username",$("#stuid").value,7);

//挑到首页

location.href="index.html" rel="external nofollow" ;

}else{

alert("登录失败！");

}

}

}

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

//4、发送

xhr.send("stuid="+$("#stuid").value+"&stupass="+$("#stupass").value);

}

}

function $(str){ //id class tagname

if(str.charAt(0) == "#"){

return document.getElementById(str.substring(1));

}else if(str.charAt(0) == "."){

return document.getElementsByClassName(str.substring(1));

}else{

return document.getElementsByTagName(str);

}

}

php文件

header("Content-type:text/html;charset=utf-8");

//一、获取用户的输入

$stuid = $_POST['stuid'];

$stupass = $_POST['stupass'];

//二、处理

//1、建立连接(搭桥)

$conn = mysql_connect('localhost','root','root');

if(!$conn){

die("连接失败");

}

//2、选择数据库(选择目的地)

mysql_select_db("mydb1809",$conn);

//3、执行SQL语句(传输数据)

$sqlstr="select * from student where stuid='$stuid' and stupass='$stupass'";

$result = mysql_query($sqlstr,$conn);//结果是个表格

//4、关闭数据库(过河拆桥)

mysql_close($conn);

//三、响应

if(mysql_num_rows($result)>0){

echo "1";

}else{

echo "0";

}

?>

// saveCookie

//保存cookie

//参数：

//键

//值

//有效期(单位是：天)

//返回值：无

function saveCookie(key,value,dayCount){

var d = new Date();

d.setDate(d.getDate()+dayCount);

document.cookie = key+'='+escape(value)+';expires='+d.toGMTString();

}

//获取cookie(根据键获取值)

//参数:

//键

//返回值：值

function getCookie(key){

var str = unescape(document.cookie);//username=jzm; userpass=1236667

//1、分割成数组(; )

var arr = str.split('; ');//['username=jzm','userpass=1236667']

//2、从数组查找key=;

for(var i in arr){

if(arr[i].indexOf(key+'=')==0){

return arr[i].split('=')[1];

}

}

return null;

}

//删除cookie

//参数：

//键

//返回值：无

function removeCookie(key){

saveCookie(key,'',-1);

}

希望本文所述对大家JavaScript程序设计有所帮助。