ajax简单运用

这篇文章写正在初涉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>
第一步：创建ajaxfunction $(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').onkeyup=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文件来写入