代码主要实现jQuery的封装
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#continer{
width: 360px;
min-height: 100px;
background-color: lightblue;
position: absolute;
left: 50%;
top: 20px;
margin-left: -180px;
}
</style>
<script src="jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
ajax({
type:"get",
url:"01page.php",
data:{username:"sz",password:"123"},
dataType:'json',
async:true,
success:function(data){
var html='<div><span>用户:'+data.username+'</span><span>密码:'+data.password+'</span></div>';
$('#info').html(html);
}
})
})
})
</script>
</head>
<body>
<div id="content">
<input type="text" id="code" />
<input type="button" value="提交" id="btn" />
<div id="info"></div>
</div>
</body>
</html>
jquer.js代码
function ajax(url,metho,state,param,type){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft');
}
if(metho=='get'){
url+='?'+encodeURI(param);
}
xhr.open(metho,url,true);
var date=null;
if(metho=='post'){
var date=param;
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
xhr.send(date);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var date=xhr.responseText;
if(type=='json'){
date=JSON.parse(date);
}
state(date);
}
}
}
}
php代码
<?php
$name=$_GET['username'];
$pwd=$_GET['password'];
echo '{"username":"'.$name.'","password":"'.$pwd.'"}';
?>
以上代码既可以实现jquery的封装