花了很长时间终于弄懂了ajax的一些简单原理,能够简单的使用了,书上的太繁杂,网上查了一才明白过来,现在整理一下,以后万一用得着。
原理就不多说了,网上和书上一大堆。直接上代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax第一个应用</title>
</head>
<body>
//创建一下提交的表单
<form id="frm">
请输入物品i d:<input type="text" id="id" /><br /><br />
请输入物品名称:<input type="text" id="goods" /><br /><br />
请输入物品类别:<input type="text" id="sort" /><br /><br />
请输入物品单价:<input type="text" id="price" /><br /><br />
请输入物品数量:<input type="text" id="amount" /><br /><br />
</form>
<button value="提交" οnclick="init()">提交</button>
</body>
<script>
function init(){
var id=document.getElementById("id").value;
var goods=document.getElementById("goods").value;
var sort=document.getElementById("sort").value;
var price=document.getElementById("id").value;
var amount=document.getElementById("amount").value;
var ajax =new XMLHttpRequest();
var prt= "id="+id+"&goods="+goods+"&sort="+sort+"&price="+price+"&amount="+amount;
ajax.open("POST","ajax.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(prt);
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
var read=ajax.responseText;
alert(read);
}
}
}
</script>
</html>
解释一下,表单部分就不多说了,懂点html的都能看懂吧,主要是script部分,先根据id获取到表单的各个值,
然后创建xmlhttprequest对象,注意,这里我只是简单的创建了适合我浏览器的对象,不同的或许有差异,(我的是谷歌浏览器),
创建完成之后我们就可以打开连接的了,用ajax.open()方法就可以建立连接,以post方式传输数据,目标是ajax.php(代码在下面),注意,后一个一定是true。
ajax.setRequestHeader方法用于设置传输的头部信息。
ajax.send()方法用来传送数据出去的,到这里,数据就已经发送出去了,剩下的就只有接收数据了。
怎么接收呢,看下去
用ajax.onreadystatechange方法,后面跟着的是回调函数,也就是用来接收服务器送来的数据和作出反应的函数,我这里是一个伪函数。
ajax.readyState用来判断ajax的执行状态,有5种状态,01234,如果等于4的话就是一切正常,服务器作出反映了。
最后服务器吧数据存储到ajax.responsrText属性里。直接引用就好了。
接下来上ajax.php的代码
<?php
header("Content-Type","application/x-www-form-urlencoded");
$id=$_POST['id'];
$goods=$_POST['goods'];
$sort=$_POST['sort'];
$price=$_POST['price'];
$amount=$_POST['amount'];
echo $id;
echo $goods;
?>
代码很简单,以什么方法发送的就以什么方式接收就好,返回数据的时候用echo输出语句就好了。
到这里就结束了,顺便带上这两今天的心情,爱上一个女孩,经常一起聊天很久,很爱她,她也承认喜欢我,但是现实却让我们很尴尬,因为她是我的初中同学,身边好多熟悉的朋友,这不是重点,我前女友是她闺蜜,我们担心如果我们在一起了别人会怎么说她,,,她一定会和闺蜜尴尬的,因为这她很苦恼,我觉得自己很蠢,没有能帮她解决问题,但是看到她因为这些烦恼的时候我好心疼。我很爱她。