Ajax
2019-04-15 本文已影响0人
AAnna珠
1.Ajax全称：“Asynchronous JavaScript and XML”，
异步javaScript和XML。
在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。（可以实现页面部分更新）
异步：（无需等到dom操作完成）
同步：同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让Web 页面出现假死状态（必须页面加载完成才执行）
2.jQuery 采用了三层封装：最底层的封装方法为：.get()和
.getScript()和$.getJSON()方法。
3.load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
4.get() 和 post() 方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>
3.JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
- JSON 语法是 JavaScript 对象表示语法的子集。
数据在名称/值对中
数据由逗号分隔
大括号保存对象
中括号保存数组
- 你可以使用点号（.）来访问对象的值：
也可以使用中括号（[]）来访问对象的值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>你也可以使用中括号（[]）来访问 JOSN 对象的值：</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
4.get方法组合效果展示：
4.1.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title></title>
</head>
<style>
</style>
<script type="text/javascript">
$(function(){
$("#a").blur(function(){
$.get(
"http://localhost:8090/TestWeb03/ajax01",
{name:$("#a").val(),password:"123"},
function(data){
$("#nameMsg").text(data);
}
);
})
});
</script>
<body>
姓名：<input type="text" id="a"><span id="nameMsg"></span><br>
密码：<input type="text" id="b"><br>
</body>
</html>
4.2.servlet
package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ajax01
*/
@WebServlet("/ajax01")
public class ajax01 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ajax01() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String s= request.getParameter("name");
if("zhangsan".equals(s)){
response.getWriter().append("error");
}else{
response.getWriter().append("success");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
