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>

第一步：创建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').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文件来写入

猜你喜欢