Ajax原生的五个基本步骤及jq中的ajax
Ajax原生的五个基本步骤及jq中的ajax
Ajax(异步javascript 和xml),一种创建交互式网页应用的网页开发技术,其核心是JS的XmlHttpRequest对象。该对象可以使用JS向服务器提出请求并作出相应而不阻塞用户,进行局部刷新
它通过异步模式,提升了用户体验,最大的特点是可以实现动态不刷新来存取数据
在原生Ajax中,它可分为五个步骤:
1.创建AJAX引擎对象–所有操作都是通过引擎对象(XMLHttpRequest)
2. 绑定监听–监听服务器是否已经返回对应数据(回调函数)
3. 绑定地址,及配置其他参数——open()
open(method: string, url: string): void;
open(method: string, url: string, async: boolean, username?: string | null, password?: string | null): void;
例子: xmlHttp.open(“POST”,“ajaxServlet”,true )
4。发送请求(send)
5.接受相应返回数据,这个是写在第三个步骤回调函数里面的
function ajax() {
//1创建AJAX引擎对象--所有操作都是通过引擎对象
var xmlHttp=new XMLHttpRequest();
//2绑定监听--监听服务器是否已经返回对应数据(回调函数)
xmlHttp.onreadystatechange=function () {
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5接受相应数据
var res=xmlHttp.responseText;
document.getElementById("span1").innerHTML=res;
}
}
//3绑定地址,及配置其他参数
xmlHttp.open("POST","ajaxServlet",true )
//4发送请求
xmlHttp.send();
}
在jq中的写法有三种,get,post和ajax,我只记了第三种,通用
function ajax() {
var id=document.getElementById("id").value;
$.ajax({
url:"anli1",
async:true, //是否异步,默认true
type:"post",
data:{"id":id,"password":123},
success:function (data) { //数据 成功接受时的操作
if(data=="n"){
document.getElementById("tip").style.display="block";
}
else {
document.getElementById("tip").style.display="none";
}
},
error:function () { //数据未能成功接受时的操作
alert("出错了。。。");
},
})
}
后台需要返回一个对应类型的字符串或者json类型的字符串数据,可以使用Goole的json JAR包来转换