一 AJAX简介
AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML)。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
二 AJAX应用
1运用XHTML+CSS来表达资讯。
2运用JavaScript操作DOM(Document Object Model)来执行动态效果；
3运用XML和XSLT操作自资料。
4运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；
5注意：AJAX与Flash、Sliverlight和Java Apple等RIA技术是有区分的。
image.png
二 通过实例讲述AJAX。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
form {
width: 380px;
text-align: center;
}
input {
width:210px;
height: 40px;
padding: 0px 10px;
outline: none;
border: 1px solid #cccccc;
margin-bottom: 10px;
}
#btn-submit {
width:60px;
height: 40px;
font-size: 18px;
background: green;
color: #ffffff;
}
</style>
</head>
<body>
<form action="/toLogin" id="loginForm" method="post">
<label for="username">用户名：</label><input type="text" id="username" name="username">
<label for="password">密码：</label><input type="password" id="password" name="password">
<input type="button" id="btn-submit" value="提交">
</form>
</body>
<script>
//获取提交按钮对象
var btnSubmit = document.getElementById('btn-submit');
//提交按钮对象监听点击事件
btnSubmit.onclick = checkForm;
function checkForm(){
//验证用户名是否为空
var username = document.getElementById('username').value;
if(username == ''){
alert("用户名不能为空");
return;
}
//验证密码是否为空
var password = document.getElementById("password").value;
if(password == ''){
alert("密码不能为空");
return;
}
//向服务器提交的数据
var data = 'username='+username+"&password="+password;
//提交数据的地址
var url = "/toLogin";
//调用ajax函数
ajax(url,'post',data);
}
//url:提交数据的地址；method:提交方式；data:提交数据
function ajax(url,method,data){
// XMLHttpRequest 对象;所有现代浏览器均支持 XMLHttpRequest 对象
//（IE5 和 IE6 使用 ActiveXObject）。
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}else{// code for IE6, I E5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
// readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){//请求成功并成功获取数据
//xmlhttp.responseText代表服务器端返回的数据
console.log(xmlhttp.responseText);
alert(xmlhttp.responseText);
}
}
// open(method,url,async)
// 规定请求的类型、URL 以及是否异步处理请求。
xmlhttp.open(method,url,true);
// send(string)
// 将请求发送到服务器。
xmlhttp.send(data);
}
</script>
</html>
网友评论