Demo 如下:
要实现的效果是
在一个页面里,放置一个文本输入框
输入框的右方,显示用户名是否正确
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
用户名:<input type="text"name="" id="username" /><span id="inf"></span><br />
密码:<input type="password"name="" /><input type="submit" value="注册"/>
</form>
</body>
</html>
由于我是在本地服务器上测试
所以我封装了几个方便的工具可用使用:
一、打开页面自动跳转的本地服务器的地址栏(不用重复修改);
/*** 自动跳转到location/项目名/页面.html
*/
var toLocationHtmlHandler=setInterval(function(){
/*
* 1.获取当前网页地址,转换成字符串
* 2.在网址字符串中查找‘localhost’,用作判断
* 3.将网址字符串分割,历遍字符串保留最后两位重组,改成localhost/+项目名/页面.html
*/
var url=window.location;
var urlstring=url+'';
var server=urlstring.indexOf('localhost');
var addr=urlstring.split('/');
var address='http://localhost';
//length-2视路径而定,如果项目在更深的路径如location/项目分类/项目名/页面.html,则length-3,如此类推
for (var i=addr.length-2,len=addr.length;i<len;i++) {
}
if (urlstring!==address&&server<0) {
location.href=address;
}
clearInterval(toLocationHtmlHandler);
},1);
二、经典的获取对象id的函数,减少重复代码
function id(id){
return document.getElementById(id);
}
ajax函数的组成步骤
第一步:
新建一个ajax对象
functionajax(){
varoAjax =new XMLHttpRequest();
}
由于XMLHttpRequest(); ie6不兼容
所以考虑ie6的兼容写法是
function ajax(){
varoAjax;
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest();
}else{
oAjax=newActiveXObject('Microsoft.XMLHTTP');
}
returnoAjax;
}
第二步:发送请求
有两种方式
第一种GET的方式:
var xhr=ajax();
调用上面写好的ajax对象;
var url='/checkName.php?name='+id('username').value;
发送 id:username的输入框内的内容到/checkName.php路径上
xhr.open('GET',url,true);
调用open函数GET的方式会直接在地址栏上显示,安全性较低
而且传输上限被URL所限制,完整的URL最高为255个字节
open函数的true属性指的是异步传输,这种传输方式 无刷新同时处理多个请求,比较效率
open函数的false属性指的是同步传输,这种传输方式需刷新而且一次只能处理一个请求,用户体验较差
也许只有需要限制传输数据时,而且多页面的判定一步步走的流程可能会用到
xhr.send(null);
由于URL路径传输,不需要调用send函数
在本地服务器,写一个php文件,文件名为checkName.php 文件名与类型要和路径相同
接收方式为GET
<?php
header('content-type:text/html;charset=utf-8');
header("Cache-Control:no-cache");
$username=$_GET['name'];
if($username=='admin'){
echo'该用户名不合法';
}
elseif($username=='Dorothy'){
echo'该用户名已经被注册';
}
elseif($username==''){
echo'';
}
else{
echo '该用户名可用注册';
}
?>
第二种POST的方式:
var xhr=ajax();
调用上面写好的ajax对象;
var url='/checkName1.php';
发送的路径为/checkName1.php
xhr.open('POST',url,true);
调用open函数POST的方式,路径与数据分离,不会再URL上直接显示,安全性略高
而且不受URL大小的限制,数据传输上限只和服务器有关
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
设定POST请求的类型
var data='name='+id('username').value;
获取要发送的数据
xhr.send(data);
调用send发送数据
在本地服务器,写一个php文件,文件名为checkName1.php文件名与类型要和路径相同
接收方式为POST
<?php
header('content-type:text/html;charset=utf-8');
header("Cache-Control:no-cache");
$username=$_POST['name'];
if($username=='admin'){
echo'该用户名不合法';
}
elseif($username=='Dorothy'){
echo'该用户名已经被注册';
}
elseif($username==''){
echo'';
}
else{
echo '该用户名可用注册';
}
?>
第三步:服务器响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
readyState=4时请求发送完成
if(xhr.status==200) {
status=200时服务器响应完成
var datum;定义一个变量datum获取服务器返回的数据
datum=xhr.responseText;
服务器数据为html或text文件等一般文件时用responseText;
if(xhr.responseXML) {
datum=xhr.responseXML;
服务器数据为XML文件时用responseXML;
}
}
}
}
第四步:dom操作
把获得的数据进行dom操作在页面输出
id('inf').innerHTML=datum;
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
datum=xhr.responseText;
if(xhr.responseXML) {
datum=xhr.responseXML;
id('inf').innerHTML=datum;
}
}
}
}
GET方式的Demo完整版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
用户名:<input type="text"name="" id="username" /><span id="inf"></span><br />
密码:<input type="password"name="" /><input type="submit" value="注册"/>
</form>
</body>
<script type="text/javascript">
var url=window.location;
var urlstring=url+'';
var server=urlstring.indexOf('localhost');
var addr=urlstring.split('/');
var address='http://localhost';
for (var i=4,len=addr.length;i<len;i++) {
address=address+'/'+addr[i];
}
if(urlstring!==address&&server<0) {
location.href=address;
}
function id(id){
return document.getElementById(id);
}
function ajax(){
var oAjax;
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest();
}else{
oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
return oAjax;
}
id('username').οninput=function(){
var xhr=ajax();
var url='/checkName.php?name='+id('username').value;
xhr.open('GET',url,true);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
var datum;
datum=xhr.responseText;
if(xhr.responseXML) {
datum=xhr.responseXML;
}
id('inf').innerHTML=datum;
}
}
}
}
</script>
</html>
POST方式的Demo完整版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
用户名:<input type="text"name="" id="username" /><span id="inf"></span><br />
密码:<input type="password"name="" /><input type="submit" value="注册"/>
</form>
</body>
<script type="text/javascript">
var url=window.location;
var urlstring=url+'';
var server=urlstring.indexOf('localhost');
var addr=urlstring.split('/');
var address='http://localhost';
for (var i=4,len=addr.length;i<len;i++) {
address=address+'/'+addr[i];
}
if(urlstring!==address&&server<0) {
location.href=address;
}
function id(id){
return document.getElementById(id);
}
function ajax(){
var oAjax;
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest();
}else{
oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
return oAjax;
}
id('username').οninput=function(){
var xhr=ajax();
var url='/checkName1.php';
xhr.open('POST',url,true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
var data='name='+id('username').value;
xhr.send(data);
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
var datum;
datum=xhr.responseText;
if(xhr.responseXML) {
datum=xhr.responseXML;
}
id('inf').innerHTML=datum;
}
}
}
}
</script>
</html>
注意 以上Demo的PHP文和HTML件我都放在服务器的根目录下,如无响应优先检查路径是否正确
最后:把上述步骤封装成一个ajax函数
由上述可知封装 ajax 函数需要的参数有4个
发送的方式 method
发送的路径 url
发送的数据 data
请求成功时dom操作的函数 fnsuccess
function ajax(method,url,data,fnsuccess) {
第一步:新建一个ajax对象;
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=newActiveXObject('Microsoft.XMLHTTP');
}
第二步:发送的两种形式,用if区分并兼容
xhr.open(method,url,true);
if(method=='GET'&&data) {
url=url+'?'+data;
xhr.open(method,url,true);
xhr.send(null);
}else{
xhr.open(method,url,true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(data);
}
第三步:发送服务器请求和等待服务器响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
第四步:回调函数返回数据,方便dom操作在函数外进行
if(fnsuccess) {
var response=xhr.responseText;
if(xhr.responseXML) {
response=xhr.responseXML;
}
fnsuccess(response);
}
}
}
}
}
封装完成的原生ajax函数应用的Demo完整版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
用户名:<input type="text"name="" id="username" /><span id="inf"></span><br />
密码:<input type="password"name="" /><input type="submit" value="注册"/>
</form>
</body>
<script type="text/javascript">
var url=window.location;
var urlstring=url+'';
var server=urlstring.indexOf('localhost');
var addr=urlstring.split('/');
var address='http://localhost';
for (var i=4,len=addr.length;i<len;i++) {
address=address+'/'+addr[i];
}
if(urlstring!==address&&server<0) {
location.href=address;
}
function id(id){
return document.getElementById(id);
}
function ajax(method,url,data,fnsuccess) {
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=newActiveXObject('Microsoft.XMLHTTP');
}
xhr.open(method,url,true);
if(method=='GET'&&data) {
url=url+'?'+data;
xhr.open(method,url,true);
xhr.send(null);
}else{
xhr.open(method,url,true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
if(fnsuccess) {
var response=xhr.responseText;
if(xhr.responseXML) {
response=xhr.responseXML;
}
fnsuccess(response);
}
}
}
}
}
id('username').οninput=function(){
var data='name='+id('username').value.trim();
ajax('GET','/checkName.php',data,function(a){
id('inf').innerHTML=a;
});
}
</script>
</html>