这篇文章写正在初涉ajax的时候,对于ajax理解还不能说太细致。
首先先知道ajax的作用。在数据交流的时候,大家可以理解为你在客户端上面,向服务器发送数据获取请求,然后服务器筛选你想要的数据并发送给你。而这个过程呢,在以往的数据交互情况下,只能完成了当前的一个请求才能进行下一个数据请求。试想一下如果当前这个请求所需要的操作时间太长的话,就会非常影响下一个请求的操作,所以,ajax就被引用出来了。
ajax其实可以看做是一个请求托管处理器。在你的客户端向服务器发送数据请求的时候,ajax就会在客户端跟服务器中间接收你的请求,并由他来替你向服务器做数据请求。当他从服务器拿到你所需要的数据的时候再返回给你的客户端。而且在这个过程当中,你的另外一个数据请求并不会被影响。也可以理解为你的数据请求由另外一个ajax来处理了,而且另个ajax并不会相互影响。下面来说一下ajax怎么运用。
ajax的运用分为四步:
- 创建ajax;
- 开启链接并向ajax发送请求;
- 获取ajax传来的信息,做处理,再返回给ajax(这里第三步由后台操作);
- 接收ajax返回的数据并进行处理。
布局:
<form action="checkName.php" method="post">
用户名:
<input type="text" id="username" />
<input type="button" name="btn" id="btn" value="验证" />
<span id="inf"></span>
<br />
密码:
<input type="password" />
<br />
<input type="submit" value="注册"/>
</form>
第一步:创建ajax
function $(id){
return document.getElementById(id);
}
function getXHR(){
//1号线:创建ajax对象
var oAjax;
if(window.XMLHttpRequest){
//IE7+, Firefox, Chrome, Opera, Safari
oAjax=new XMLHttpRequest();
}else{
oAjax=new ActiveXObject("Microsoft.XMLHTTP")
}
return oAjax;
}
第二步:开启链接并向ajax发送请求
正看代码之前要知道两个知识点:1.数据请求方式分为两种:get和post。2.get和post的区别。get和post两种请求方式其实都可以用,但是两个请求方式肯定有不一样的地方,主要在两个地方。
- 就拿注册登录来说,get方法在注册的时候,提交上去的时候IE地址栏里显示表示你提交时候所带的值,也就是能看见你的信息,而post方法不会。
- get方法传输数据的大小限制在了255个字节以内,而post方法没限制。
所以,get方法相比post方法来说,没那么安全而且传输数据受很大限制。
$('username').οnkeyup=function(){
var xhr = getXHR();
//2号线:发送请求
//!!!!!!!!!!!!!!!!!!!!!!!!这是get方式!!!!!!!!!!!!!!!!
//open(get,url,true)
//第一个参数:数据传输方式get post
//第二个参数:处理文件 xx.php xx.txt,要数据:直接写路径就行,提交数据:在地址哪里写数据(get方式)
//第三个参数:同步方式还是异步方式,默认是异步true
var url = '/checkName.php?name=' + $('username').value;//checkName.php是3号线所在文件
xhr.open('GET',url,true);
xhr.send(null);//send() 如果是get方式,写null或者空
//!!!!!!!!!!!!!!!!!!!!!!!!post方式!!!!!!!!!!!!!!!!!!!!!!!
// var url='/checkName2.php';
// var data='name='+$('username').value;
// console.log(url+data);
// xhr.open('POST',url,true);
// xhr.send(data);//如果是post,参数就直接写要传输的内容
//4号线:接受3号线的数据并进行处理
xhr.onreadystatechange = function(){
alert('现在的状态是' + xhr.readyState);
if (xhr.readyState == 4) {
if (xhr.status == 200) {
$('inf').innerHTML = xhr.responseText;
}
}
}
}
第三步:获取ajax传来的信息,做处理,再返回给ajax(这里第三步由后台操作)
<?php
//3号线:获取ajax传来的信息,做处理,在返回给ajax:后台做,或者后台协助
$username = $_GET['name'];
// $userName=$_POST['name'];
if($userName=='admin'){ //把内容拿到,进行判断,输出信息返回给ajax
echo '该用户名不能使用';
}else{
echo '该用户名能使用';
}
?>
最后的第四步在第二步的代码里面。
最后在提醒一下注意点:
- 注意第二步第三步第四步里面是有get和post方法的分开代码的!
- ajax的应用需要结合服务器例如:WampServer使用
- ajax操作的四个步骤里面,1/2/4都是前端人员操作的,3号线是后台人员操作的,所以3号线的代码需要另外建一个php文件来写入