您的位置：首页 > 编程语言 > PHP开发

PHP和ajax详解

2016-05-24 20:46 585 查看
优点：减轻服务器的负担,按需取数据,最大程度的减少冗余请求
局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
基于xml标准化,并被广泛支持,不需安装插件等
进一步促进页面和数据的分离
缺点：AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
AJAX只是局部刷新,所以页面的后退按钮是没有用的.
对流媒体还有移动设备的支持不是太好等
实例化ajax

//实例化对象
var xmlhttp=null;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=ActiveXObject("Mircrosoft.XMLHTTP");    //浏览器是否支持 XMLHttpRequest 对象
}

//向服务器发送请求

xmlhttp.open("请求的类型get或post","文件在的服务器上位置","true异步或false同步");
xmlhttp.send();//将请求发送到 服务器上

setRequestHeader("头名称","规定头的值");

//服务器响应
responseText(); //获取字符串形式的响应数序
responseXML(); //获取XML形式的响应数据

onreadystatechange事件
//当请求发送到服务器的时候，我们需要执行

XMLHttpRequest的三个重要属性
onreadystatechange 存储函数，每当readyState属性改变时，就会调用该函数
readystate  XMLHttpRequest的状态
0为请求未初始化
1服务器连接已建立
2 请求已接收
3 请求处理中
4 请求已完成,且响应已就绪

status 200 “OK”  404 未找到页面

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

　
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<form  entype="multipart/form-data" name="aax">
<table border="0" width="300">
<tr>
<td>名称</td>
<td><input type="text" name=name /></td>
</tr>
<tr>
<td>类型</td>
<td>
<select name="s">
<option value="1">服装</option>
<option value="2">视频</option>
<option value="3">汽车</option>
</select>
</td>
</tr>
<tr>
<td align="right">单价：</td>
<td><input type="text" name="price"/></td>
</tr>
<tr>
<td align="right">库存：</td>
<td><input type="text" name="total"/></td>
</tr>
<tr>
<td align="right">图片：</td>
<td><input type="file" name="pic"/></td>
</tr>
<tr>
<td align="right" valign="top">描述：</td>
<td><textarea rows="5" cols="20" name="note"></textarea></td>
</tr>
<tr><td colspan="2" align="center">
<input type="submit" onclick="ajax();"  value="添加"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table></form>
<script>

function ajax()
{
var f=document.aax;
var name=f.name.value;
var typeid=f.s.value;
var pic=f.pic.value;
var price=f.price.value;
var note=f.note.value;var xmlhttp=null;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}else{xmlhttp=ActiveXObject("Microsoft.XMLHTTP");
}
var lian="name="+name+"&typeid="+typeid+"&pic="+pic+"&price="+price+"¬e="+note;
$xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.open("get","addcas.php",true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById("sed").innerHTML=$xmlhttp.responeseText;
}
};}
</script>
</body>
</html>
　　
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航