与web服务器通信的XMLHttpRequest

来源：互联网发布：编程求一百以内的质数编辑：程序博客网时间：2024/06/06 02:54

实现网页与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.onload=function(){var oAdd = document.getElementById("add");oAdd.onclick=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,那么就成功.如果失败,那么就返回0if(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传值的总结

阅读全文

0 0