您的位置：首页 > 理论基础 > 计算机网络

php开发之Ajax异步网络请求

2015-04-30 10:45 381 查看

有的时候我们在网页上输入数据的时候，不用我们点击按钮触发事件。这个小的知识点非常的有用。比如在登录的时候，输入邮箱的时候自动验证的功能，或者自动刷新的功能。或者局部刷新都可以用到的哦，还是很有用的，给大家分享下：

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>test ajax</title>
<script type ="text/javascript" src ="test.js">
</script>
</head>
<body onload ="process()"> //onload 这个很重要哦，在加载body的时候就会触发这个process()函数。

Your Name:
<input type ="text" id ="myName">
<div id ="divMessage">//一个空的div方便在后面根据服务器返回的内容加载页面，另外在UIWebView与js的交互的时候，通过这个来实现根据后台数据写页面应该是很有用的。
</div>
</body>
</html>

test.js

var xmlHttp =GetXmlHttpObject();
function GetXmlHttpObject(){

var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();

}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}

//----------使用XMLHTTP对象创建异步http请求
function process(){
if (xmlHttp==null){
alert('您的浏览器不支持AJAX！');
return;
}
//在xmlHttp对象不忙时进行处理

if(xmlHttp.readyState == 4 || xmlHttp.readyState== 0){

//获取用户在表单中输入的姓名
name = encodeURIComponent(document.getElementById("myName").value);

var url ="http://localhost/PHPTEST/index.php?name=";

xmlHttp.open("GET",url+name,true);
//定义获取服务器端响应的方法
xmlHttp.onreadystatechange =handleServerResponse;
xmlHttp.send();

}else{

//如果服务器忙，1秒后重试
setTimeout('process()',2000);

}
}

//当收到服务器端的消息时自动执行
function handleServerResponse(){
//在处理结束时进入第一步

if(xmlHttp.readyState == 4){// 这个地方要多多的注意哦，我刚开始的时候就把xmlHttp.readyState，写成了xmlHttp.readystatus结果可想而知了，xmlHttp.readystatus为undefined肯定不能够跟4进行匹配了，直接跳出条件判断，什么也不错，我花了好久的时间才找到的这个问题的所在，所以咱们编程序的粗心要不得哦，害死人啊。

//状态为200时表示处理成功
if(xmlHttp.status == 200){
//获取服务器端发来的XML消息

xmlResponse =xmlHttp.responseXML;

//获取XML文档中的根对象
xmlDocumentElement = xmlResponse.documentElement;

//获取第一个文档子元素的文本消息
helloMessage = xmlDocumentElement.firstChild.data;

//使用从服务器发来的消息更新客户端显示的内容
document.getElementById("divMessage").innerHTML='<i>' + helloMessage + '</i>';

//重新开始
setTimeout('process()',2000);
}else{    //如果状态不是200表示http请求发生错误

alert("There is a problem accessing server:" + xmlHttp.statusText);
}

}
}

index.php

<?php

//我们将创建一个xml格式的输出
header('Content-type:text/xml');

// 创建xml开头
echo '<?xml version ="1.0" encoding ="UTF-8" standalone ="yes"?>';

//创建response元素
echo '<response>';

$name =$_GET['name'];
//根据客户端获取的用户名创建
$userNames = array('CRISTAIN','BOGDAN','FILIP','MIHAI','YODA');
if (in_array(strtoupper($name), $userNames)) {//这个主要就是用来判断这个名字有没有在字符串里面
echo 'hello master '.htmlentities($name).'!';
}else if (trim($name) =='') {//没有输入内容的时候就会出现这样的内容
echo "stranger,please tell your name !";
}
else {
echo htmlentities($name).' I don\'t know you!';
}

//关闭response元素
echo '</response>';

?>

其中在index.php中输出xml文档，这个感觉要特殊记忆哦，以后可能还会输出html文档的。而且我觉得在UIWebView与js的交互这一块，这个知识点应该是经常会用到的。

运行结果如下：

这个主要就是在没有输入的时候，服务器返回的内容

这个是输入的姓名不能够匹配的时候服务器返回的内容

这个是输入的内容能够匹配的时候服务器返回的内容

在这里啰嗦一下，这些都是自己的边学边整理的，算是自己的笔记哦，有愿意一块共同学习，共同交流的可以到这个博客里一块交流哦：

博客地址：http://blog.csdn.net/hanhailong18

demo下载地址：demo

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： php ajax 异步请求局部刷新自动刷新

相关文章推荐

新的分享

章节导航