简介
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法,用于创建更好更快以及交互性更强的web应用程序的技术。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
增加B/S的体验性
b/s:未来的主流,丙并且会爆发式的增长
产品链:H5+网页+客户端+手机端(Android+iOS)+小程序
使用ajax:注册时,输入用户名检测用户是否已经存在。登陆时,提示用户密码错误。删除数据行时,将id发到后台,后台在数据库中删除,数据库删除成功后,在页面dom中将数据行也删除
简单实现
<div>
<p>输入要加载的地址:<span id="currentTime"></span></p>
<p>
<input type="text" id="url" value="http://baidu.com"></input>
<input type="button" value="提交" onclick="">
</p>
</div>
<iframe style="width:100% ;height=100px" id="iframePosition">
</iframe>
<script>
window.onload = function(){
var mydate= new Date();
document.getElementById("currentTime").innerText = mydate.getTime();
}
function loadPage(){
var targetURL=document.getElementById("url").value;
document.getElementById("iframePosition").src = targetURL;
}
</script>
Ajax的核心是XMLHttpRequest对象(XHR)。XHR向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据
jQuery ajax本质就是XMLHttpRequest,对其进行封装调用
基础语法
基础方法
- jQuery.get(…)
- jQuery.post(…)
- jQuery.ajax(…)
一个简单的向后端发送数据的ajax代码(get方式):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax</title>
<script src="jquery.js"/>
</head>
<body>
<div>
<p>用户名:</p>
<input type="text" id="txtName" onblur="a1()">
</div>
<script>
function a1(){
$.ajax({
url:"",//待载入页面的url地址
data:{"name":$("txtName").val()},//data:待发送的key/value参数
success:function(data){
console.log(data);
}
});
}
// 默认情况下,Ajax 请求使用 GET 方法。
// 如果要使用 POST 方法,可以设定 type 参数值。
// 这个选项也会影响 data 选项中的内容如何发送到服务器。
</script>
</body>
</html>
一个简单的向后端发送数据的ajax代码(post方式):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax</title>
<script src="jquery.js"/>
</head>
<body>
<div>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
</tbody>
</div>
<script>
$(function(){
$("#btn").click(function(){
$.post("目的url",function(data){
console.log(data);
var html = "";
for(var i=0;i<data.length;i++){
//这里假定后端传来的数据是list类型
html += "<tr>" +
"<td>"+data[i].name+"<td>"+
"<td>"+data[i].age+"<td>"+
"<td>"+data[i].sex+"<td>"+
"<tr>"
}
$("#content").html(html);
})
})
})
</script>
</body>
</html>
对登陆用户的验证:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax</title>
<script src="jquery.js"/>
<script>
function a1(){
$.post({
url:"",
data:{"name":$("#name").val()},
success:function (data){
if(data.toString=="ok"){
$("#userinfo").css("color","green");
}else{
$("#userinfo").css("color","red");
}
$("#userinfo").html(data);
}
})
}
function a2(){
$.post({
url:"",
data:{"pwd":$("#pwd").val()},
success:function (data){
if(data.toString=="ok"){
$("#pwdinfo").css("color","green");
}else{
$("#pwdinfo").css("color","red");
}
$("#pwdinfo").html(data);
}
})
}
</script>
</head>
<body>
<div>
<p>用户名
<input type="text" id="name" onblur="a1()">
<span id="userinfo"></span>
</p>
<p>密码
<input type="text" id="pwd" onblur="a2()">
<span id="userinfo"></span>
</p>
</div>
</body>
</html>
总结
三部曲:
- 编写对应的controller,返回字符串或者json数据
- 编写ajax请求:
- url :controller请求
- data:键值对
- success:回调函数
- 给ajax绑定事件,点击(click),失去焦点(onblur),键盘弹起(keyup)