function myAjax(obj){
if(obj.textType=="Jsonp"){
myAjaxAcross(obj);//跨域访问
}else{
myAjaxNormal(obj);//普通访问
}
}
function myAjaxNormal(obj){
//初始对象
var defaults={
type:"post",
url:"#",
data:{},
textType:"text",
async:true,
success:function(data){}
}
for(var key in obj)
defaults[key]=obj[key];
//获取url后缀
var params="";
for(var attr in obj.data){
params+=attr+"="+obj.data[attr]+"&";
}
if(params)
params=params.substr(0,params.length-1);
//ajax
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
if(defaults.type=="get"){
xhr.open("get",defaults.url+"?"+params,defaults.async);
xhr.send(null);
}else{
xhr.open("post",defaults.url,defaults.async);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(params);
}
if(defaults.async){
xhr.onreadystatechange=function(){
end();
}
}else{
end();
}
//获取php返回值
function end(){
if(xhr.readyState==4)
if(xhr.status==200){
var result="";//php返回值
if(defaults.textType=="json")
result=JSON.parse(xhr.responseText);
else if(defaults.textType=="xml")
result=xhr.responseXML;
else
result=xhr.responseText;
defaults.success(result);
}
}
}
function myAjaxAcross(obj){
//初始对象
var defaults={
type:"get",
url:"#",
data:{},
Jsonp:"callback",
JsonpCallback:"hihi",
success:function(data){}
};
for(var key in obj)
defaults[key]=obj[key];
//获取url后缀
var params="";
for(var attr in defaults.data)
params+=attr+"="+defaults.data[attr]+"&";
if(params)
params=params.substr(0,params.length-1);
//创建script
var script=document.createElement("script");
script.src=defaults.url+"?"+params+"&"+defaults.Jsonp+"="+defaults.JsonpCallback;
//console.log(script.src);
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=ja&cb=hihi
var head=document.querySelector('head');
head.append(script);
//回调
window[defaults.JsonpCallback]=function(data){
defaults.success(data);
//console.log(data);
}
}
//验证邮箱的php代码
<?php
$email = $_POST["e"];
if($email == 'zhangsan@qq.com') {
echo "Yes";
} else {
echo "No";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax封装</title>
<script type="text/javascript" src="myAjax2.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
var email=document.getElementById("email");
email.οnkeyup=function(){
var value=email.value;//输入内容
var emailTip=document.getElementById("emailTip");
myAjax({
type:"post",
url:"php/checkEmail.php",
data:{e:value},
textType:"text",//php传回类型
async:true,
success:function(data){
emailTip.innerText=data;
}
});
};
var key=document.getElementById("key");
key.οnkeyup=function(){
var keyWord=key.value;
myAjax({
type:"get",
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data:{wd:keyWord},
textType:"Jsonp",
Jsonp:"cb",
JsonpCallback:"hihi",
success:function(data){
//console.log(data);
var lis="";
for(var i=0;i<data.s.length;i++){
lis+="<li>"+data.s[i]+"</li>";
}
var results=document.getElementById("results");
results.innerHTML=lis;
}
});
}
}
</script>
</head>
<body>
<input type="email" name="email" id="email" placeholder="请输入验证邮箱"/> <span id="emailTip"></span>
<br />
<input type="text" id="key" placeholder="请输入搜索关键词"/>
<ul id="results"></ul>
</body>
</html>
