Ajax常用属性和方法:
属性:
readyState: 0(开始创建ajax对象)1(调用open方法)2(调用send方法)3(正在返回数据)4(返回数据结束)
responseText/responseXML: 接受服务器返回信息
onreadystatechange: ajax状态readyState发生变化,触发该事件运行
status:200/404····
方法:
open(请求方式,请求地址,同步异步标志):创建一个新的http请求
send():发送http请求
setRequestHeader():设置HTTP头协议信息
get和post请求注意事项:
(1)get在url中直接传递数据,post在send方法中传递
(2)传递中文信息时get需要对中文进行编码而post不需要
(3)进行post方式请求时候,也可以传递get参数信息,在服务器端可以使用$_GET接受
同步和异步区别:
同步就是阻塞式,一个IO请求完成之前不能进行下一个,异步则是非阻塞式的,体现形式是在open(请求方式,地址,true异步/false同步)
缓存处理:
(1)在请求地址后加随机数字,保证每次请求都是新的
(2)在服务器端给php程序设置header信息,禁止浏览器缓存当前页面
实战代码:
(1)test.html
<input type="text" id="username" class="input-block-level" placeholder="旧用户名(必须填写)" name="old_username" onblur="checkname()"><!-- 在失去焦点函数中进行ajax请求 --> <span id="usernamespan" style="color: #811501;">对不起用户名已存在!</span> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("#usernamespan").hide(); }); function checkname() { var obj = new XMLHttpRequest();//创建ajax对象 obj.onreadystatechange = function() {//当ajax对象状态发生变化时触发以下事件 if(obj.readyState == 4 && obj.status == 200) { if(obj.responseText == '1') $("#usernamespan").show();//如果返回值为1的时候span显示 } } var name = $("#username").val(); obj.open("get", './ajax.php?username=' + name);//默认为异步请求 obj.send(null); } </script>
(2)ajax.php
<?php $a = array("tom", "jerry", "marry");//这里没有做与数据库交互,其实做一下也很简单,根据上一篇博客db.php可以很快做出来 $name = $_GET['username'];//获取get请求内容 if(in_array($name, $a)) { echo '1'; }else{ echo "0"; }
效果如下: