Asynchronous JavaScript and XML
RIA的应用,Rich Internet Application,富互联网应用,使BS拥有CS的优点。
XHR,XmlHTTPRequest
ajax原生代码
var ajaxbtn=document.getElementById("ajaxbtn");
ajaxbtn.onblur=function() {
var xhr; //1、创建xhr对象。
if (window.XMLHttpRequest) { //兼容IE
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get","/users/validate?username="+username.value);
//2、打开连接,此条第三个属性为是否异步,默认为true,异步,可以不写。
xhr.send(null); //3、发送请求,或不写null,get提交的参数写在上一行login加?后面
xhr.onreadystatechange=function(){ //通过事件回调来处理服务器返回的数据
if(xhr.readyState==4&&xhr.status==200){
//4代表服务器响应完成,200带便响应状态码正确
var text=xhr.responseText;
console.log(text);
}
}
};
JQuery 的AJAX
load 载入远程 HTML 文件代码并插入至 DOM 中。
$(":button[value=load]").click(function(){
$("#content").load("index.html");
});
get 通过远程 HTTP GET 请求载入信息。
$.get("/users/validate",{username:"abc"}, function(data){
console.log(data)
});
post 通过远程 HTTP POST 请求载入信息。
$.post("/users/login1",{username:"123",password:123}, function(data){
console.log(data)
});
ajax
$.ajax({
type:"post",
url:"/users/reg",
data:{
username:$("#zhuceusername").val(),
password:$("#zhucepwd").val()
},
success:function(data){
alert("注册成功");
window.location="ajax.html"
}
});