原生Ajax的实现
一、查阅开发文档
首先需要了解后台接口,需要提交哪些参数,返回哪些数据。这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Ajax与后台接口交互。
二、编写JavaScript(ajax)
- post方法
var xmlhttp;
if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//上面的http请求对象的生成做了一个浏览器兼容性处理
var adminName = document.getElementById('adminName').value;//获取html表单中adminName输入域对象的值,既账号
var psw = document.getElementById('psw').value;//获取html表单中pwd输入域对象的值,既密码
xmlhttp.onreadystatechange=function(){
//当接受到响应时回调该方法
if (xmlhttp.readyState==4 && (xmlhttp.status==200||xmlhttp.status==0))
{
var tip = document.getElementById('tip');//获取html的tip节点,主要用于输出登录结果
var text = xmlhttp.responseText;//使用接口返回内容,响应内容
var resultJson = eval("("+text+")");//把响应内容对象转成javascript对象
var result = resultJson.result;//获取json中的result键对应的值
var code = resultJson.code;//获取json中的code键对应的值
if (result=="fail") {//登录失败
if(code==101){
tip.innerHTML = "密码错误!"
}else if(code==102){
tip.innerHTML = "用户不存在!"
}
}else //登录成功 if(result=="success"&&code==100){
window.location.href="center.html";//跳转到centent.html页面
}
}
}
xmlhttp.open("POST","control1/login",true);//以POST方式请求该接口
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加Content-type
xmlhttp.send("adminName="+adminName+"&psw="+psw);//发送请求参数间用&分割
上面的代码中主要实现请求后台登录接口,若登录成功就跳转到用户中心,若登录失败,根据返回的code提示用户登录失败的原因。
- get方法
var btn=document.getElementById("btn");
btn.=function(){
//1.创建ajax对象(此处兼容性的创建)
var xhr=null;
try{
xhr=new XMLHttpRequest();
}catch(e){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.调用open方法----注:xhr.open("方法","路径?数据","是否异步")
xhr.open("get","links/2.get.php?username="+encodeURI('陆小曼')+"&age=18&timp="+new Date().getTime(),true);
//3.发送数据
xhr.send();
//4.请求状态改变事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
document.write(xhr.responseText)
}else{
alert("错误"+xhr.status)
}
}
}
}
Jquery 实现Ajax
//提交登录信息
btn.on('click',function(e){
e.preventDefault();
var username=$('.login_box #Account').val()
var password=$('.login_box #Password').val()
var param = {'username':username,'password':password;
// console.log("Request param = "+JSON.stringify(param));
$.ajax({
type:"post",
url:'control1/login',
dataType: 'json',
data: JSON.stringify(param),
}).done(function(result){
// console.log("++++" + JSON.stringify(result));
if (result=="fail") {//登录失败
if(code==101){
tip.innerHTML = "密码错误!"
}else if(code==102){
tip.innerHTML = "用户不存在!"
}
}else //登录成功 if(result=="success"&&code==100){
window.location.href="center.html";//跳转到centent.html页面
}
}).fail(function(){
console.log('fail');
});
});
$ajax
中的内容我们理解,是从指定的URL中返回一些值,这些值以json格式返回。$ajax()
如果执行成功,则执行.done()
方法,function(e)中的参数e为返回的结果,如果$ajax()
执行发生错误,则执行.fail()
,.done()
不执行
关于Ajax的相关函数请查阅 JQuery中Ajax官方文档