Ajax如何使用的小demo

2016-12-07 20:33:33来源:CSDN作者:moguzhale人点击

第七城市
大家都知道Ajax是js里面很重要的一部分,前台的局部动态刷新页面离不开它。很多人对它是既熟悉,又陌生,熟悉是因为经常听到这个名字,陌生是因为很多人,特别是像我这样的初学者可能没有实际接触过Ajax。所以,前几天我在网上找了一些资料,看了一些有关Ajax的信息,在这里简单的整理一下。
Ajax是异步的javascript和xml的缩写,异步的意思就是说我管我的,你管你的,你那里还在加载是不会影响我这边加载,而同步则是指我要是想加载的话,必须等到你那边加载好了以后才行。在说Ajax之前,我们有必要来了解一些其他的知识。
HTTP是一种无状态协议,就是指它每次请求传送结束以后都会清空,下一次还想传送的话就要重新建立连接,一个完整的http请求过程分为7个步骤
1.建立TCP连接
2.web浏览器向web服务器发送请求命令
3.web浏览器发送请求头
4.web服务器应答
5.web服务器发送应答头
6.web服务器向浏览器发送数据
7.关闭TCP连接


而一个http请求又可以分为4部分
1.http请求的方法或动作:get或者post
2.请求的url
3.请求头,包含一些客户端环境的信息
4.请求提,即请求的正文,表单信息等


而这里的get使用url来传递参数,一般2000个字符以内,post一般用于修改服务器上的资源,对所发送的信息数量没有要求
一个http响应一般由三部分组成:
1.一个由数字和文字组成的状态码,用来显示是成功还是失败
2.响应头
3.响应体
而http的状态码由3位数字组成
1XX 表示信息类
2XX成功 列如 200
3XX重定向,表示请求没有成功,客户端必须采取措施了
4XX客户端错误 404 not found
5XX服务端错误


我们要使用Ajax要依赖于XMLHttpRequest(XHR);
var request;
if(window.XMLHttpRequest){
var request=new XMLHttpRequest//实例化
}else{
request=new ActiveXObject("Microsoft.XMLHTTP")//IE5、IE6
}
而XMLHttpRequest发送请求:
open(method,url,async)
send(string)
例如:request.open("GET","get.php",true);
   request.send();
例如:requeat.open("POST","post.php",true)
  request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  request.send("name=张三&age=23");


XMLHttpRequest取得响应
responseText:获得字符串形式的响应数据
requestXML获得XML形式的响应数据
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader()获取所有的响应报头
getResponseHeader()查询响应中的某个字段的值
对服务器的响应做一个监听:
var request=new XMLHttpRequest()
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
if(requeat.readyState===4&&request.status===200){
// some code   request.responseText
}
}
我们在浏览器端发送一个请求到服务端,那么我们的数据就是从后端来的,所以我们要想实现一个完整的AJax请求,还得建立一个后端的文件,这里我们使用php作为我们后端的语言。对于大部分的小白而言,配置一个php的环境不是件容易的事情,所以在这里,我们使用XAMPP这个集成环境。下载安装好以后我们只需要打开它里面的Apache即可,因为我们就是模拟一下,所以不用数据库来操作数据。下面我们放一个例子:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
<style>
h3,input,label,button,p{
margin: 0;
padding: 0;
}
input{
margin-bottom: 10px;
}




</style>
</head>
<body>
<h3>查询员工信息</h3>
<label>请输入员工编号</label>
<input type="text" id="num1" />
<button id="btn1">查询</button>
<p id="p1">测试1</p>




<h3>新建员工信息</h3>
<label>员工姓名</label>
<input type="text" id="sname" /><br>
<label>员工编号</label>
<input type="text" id="snumber" /><br>
<label>员工性别</label>
<select name="" id="ssex">
<option value="men">男</option>
<option value="women">女</option>
</select><br>
<label>员工职位</label>
<input type="text" id="sjob" />
<button id="btn2">查询</button>
<p id="p2">测试2</p>








<script>
document.getElementById("btn1").onclick=function(){
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("GET","12021.php?number="+document.getElementById("num1").value,true);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById("p1").innerHTML=request.responseText;
}else{
alert("发生错误"+request.status);
}
}
}
}




document.getElementById("btn2").onclick=function(){
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
var data;
data="name="+document.getElementById("sname").value+"&number="+document.getElementById("snumber").value+"&sex="+document.getElementById("ssex").value+"&job="+document.getElementById("sjob").value;
request.open("POST","12021.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById("p2").innerHTML=request.responseText;
}else{
alert("发生错误"+request.status);
}
}
}
}


</script>
</body>
</html>

php代码;
<?php
header("Content-Type:text/plain;charset=utf-8");
$staff=array(
array("name"=>"张三","number"=>"101","sex"=>"男","job"=>"总经理"),
array("name"=>"李四","number"=>"102","sex"=>"女","job"=>"秘书"),
array("name"=>"王五","number"=>"103","sex"=>"男","job"=>"文员")
);
if($_SERVER["REQUEST_METHOD"]=="GET"){
search();
}elseif($_SERVER["REQUEST_METHOD"]=="POST"){
create();
}
//搜索员工
function search(){
if(!isset($_GET["number"])||empty($_GET["number"])){
echo "参数错误";
return;
}
global $staff;//php在函数里面用全局变量要加global
$number=$_GET["number"];
$result="没有找到员工";
foreach($staff as $value){
if($number==$value["number"]){
$result="找到员工,员工编号:".$value["number"].",员工姓名:".$value["name"].",员工性别:".$value["sex"].",员工职位:".$value["job"];
break;
}
}
echo $result;
}
//创建员工
function create(){
if(!isset($_POST["name"])||empty($_POST["name"])
||!isset($_POST["number"])||empty($_POST["number"])
||!isset($_POST["sex"])||empty($_POST["sex"])
||!isset($_POST["job"])||empty($_POST["job"])
){
echo "参数不全,员工信息填写错误";
return;
}
echo "员工:".$_POST["name"]." 信息保存成功";
}
?>
  这里上面的html和php结合起来,就是一个简单的Ajax的小demo。值得注意的是,这里我是 用dw在xampp下建站的,如果出现中文字体乱码则修改浏览器的字符编码一致即可。之前在测试的时候,总是会有跨域错误的提示,莫名其妙的,后面去网上搜了一大堆才知道,我直接双击html文件打开的网页是一个类似于file:///E:/xampp12/htdocs/AjaxDemo/12021.html 这样的路径,我们要将其改成Localhost/AjaxDemo/12021.html即可。
当然这个小demo有可以更加优化的地方,就是使用json字符串的形式,这个我们下次再来说好了。
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台