与web服务器通信的XMLHttpRequest

怼烎@ 2022-06-12 06:59 193阅读 0赞

实现网页与web服务器直接对话的关键是XMLHttpRequest。XMLHttpRequest非常适合从服务器上获取数据，下面是一些地方主要的用途

1.保存在服务器上面的数据

2.通过服务器完成复杂的计算

3.从其他服务器获取数据（这里主要是通过XMLHttpRequest请求，让自己的服务器从其他服务器上获取数据）

主要采用php作为后台语言编写,test.php的代码如下：

<?php
    	$num1 = $_GET['num1'];
    	$num2 = $_GET['num2'];
    	$num = $num1 + $num2;
    	echo $num;
    ?>

这个代码有些简单，就不多做介绍，没有学过php的这一块就不要管了，比较想要测试自己还要去搭建服务器什么的。下面我们来看一下js脚本的主要代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<div>
    		<input id="num1" type="text">
    		<input id="num2" type="text">
    		<button id="add">求和</button>
    	</div>
    	<div><output id="result"></output></div>
    	<script type="text/javascript">
    		var req;
    		window.οnlοad=function(){
    			var oAdd = document.getElementById("add");
    			oAdd.οnclick=function(){
    				req = new XMLHttpRequest();
    				var oNum1 = document.getElementById("num1");
    				var oNum2 = document.getElementById("num2");
    				var dataToSend = "?num1="+oNum1.value+"&num2="+oNum2.value;
    				// 提交方式,请求目标,表示浏览器是否是异步传输
    				// 同步传输就是等到服务器响应以后再执行,这样可能导致网页崩溃
    				req.open("GET","server.php"+dataToSend,true);
    				req.onreadystatechange=handleServerResponse;
    				req.send();
    				document.getElementById("result").innerHTML = "the request has been send";
    			}
    			function handleServerResponse(){
    				// readyState
    				// 1表示请求已经完毕
    				// 2请求已经发送
    				// 3已经收到部分响应
    				// 4请求响应完成
    				// status
    				// 401表示不允许被访问
    				// 404没有找到
    				// 302已经移动
    				// 503服务器繁忙
    				if((req.readyState == 4)&&(req.status==200)){
    					var result = req.responseText;
    					document.getElementById("result").innerHTML ="the answer is:" + result;
    				}
    			}
    		}
    	</script>
    </body>
    </html>

上面只是一个简单的加法操作，只是说明用法，但是却并不实用。毕竟没有哪位为了计算一个简单的加法运算，放在服务器上去。

下面是通过post的方式传值，通过实现登录功能测试，前端js代码如下：

var req = new XMLHttpRequest()
    var data
    // 其中这里的username和password就是获取的用户填写的内容
    data = "username"+this.username+"&password"+this.password
    // 我们提交到server.php这个页面进行处理
    req.open("POST","server.php",true)
    req.onreadystatechange = function(){
    	if((req.readyState == 4)&&(req.status==200)){
    		var result = req.responseText
    		// 如果是1,那么就成功.如果失败,那么就返回0
    		if(result == 1){
    			// 成功需要什么操作这里在这里写
    		}else{
    			alert('失败')
    		}
    	}	
    }
    // 这里主要是一些请求协议
    req.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    req.send(data)

服务器的代码如下：

<?php
    	$username = $_POST['username'];
    	$password = $_POST['password'];
    	if($username == 'admin' && $password == '123456'){
    		// 如果是1,那么就代表成功
    		echo 1;
    	}else{
    		echo 0;
    	}

关于服务器的处理，显得比较简单，因为这里的重点是对于ajax传值的总结