AJAX
定义：
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
日常中比较常见的就是我们在注册网站时，实时显示你填写的用户名是否可用，这里用到的就是AJAX
readyState代码：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
Status代码：200 ok
在readyState代码为4，Status代码为200时，才可以根据响应进行操作。
JS原生代码实现：
异步访问代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function check(){ var xmlhttp = new XMLHttpRequest();//获取一个XMLHttpRequest对象，用来发送请求 var text = document.getElementById("text").value; var result = document.getElementById("result"); xmlhttp.onreadystatechange=function(){//在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。 if(xmlhttp.readyState==4 && xmlhttp.status==200){//响应就绪 result.innerHTML=xmlhttp.responseText;//显示响应内容 } } xmlhttp.open("GET","ajax?text="+text,true);//GET方式，请求地址，异步请求，可以连续发送请求而不必等待响应 xmlhttp.send();//发送请求 } </script> <title>Insert title here</title> </head> <body> <span id="result"></span> <input type="text" name="message" id="text" onKeyUp="check()"> </body> </html>
注意：POST方式请求需要设置请求头：
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name="+name);//请求参数
Servlet：
public class AJAXServlet extends HttpServlet { @Override public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String text = request.getParameter("text"); response.setContentType("text/html;charset=utf-8"); try { Thread.sleep(5000);//线程等待，用来观察同步、异步访问的区别 } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } if(text.equals("123")) { response.getWriter().print("你输入的是123"); }else { response.getWriter().print("你输入的不是123"); } } @Override public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
同步与异步访问的区别：
异步访问可以不必等待服务端响应完成，连续发送请求，而同步访问则必须等待服务端响应完成才能发送下次请求，在上例代码中，Servlet的线程等待5秒，当同步访问时，输入框输内容，check()函数执行，但是此时没法继续输入内容，因为函数在等待服务端响应，5秒后响应完成，才能继续输入。
JSON：
JavaScript 对象表示法（JavaScript Object Notation） 是一种存储数据的方式。
<script> var obj = {"name":"god","hp":616}; document.write("这是一个JSON对象: "+obj); </script>
JSON对象由 名称/值对组成 名称和值之间用冒号:隔开
名称必须用双引号" 包含起来
值可以是任意javascript数据类型，字符串，布尔，数字 ，数组甚至是对象
不同的名称/值对之间用 逗号 , 隔开
JSON数组：
<script> var heros= [ {"name":"盖伦","hp":616}, {"name":"提莫","hp":313}, {"name":"死哥","hp":432}, {"name":"火女","hp":389} ] document.write("JSON数组大小"+heros.length); </script>
多类型值混合
var multiple = {"name":"zero","address":{"Country":"china","Provence":"ShanDong"}};
jQuery AJAX：
利用jQuery可以大幅简化ajax代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="jquery-3.3.1.min.js"></script> <script> $(function(){ $("#name").keyup(function(){ var page = ""; var value = $(this).val();//输入框内容 $.ajax({ url: page,//提交地址 type: get,//提交方式，不写默认get async: true,//异步请求 false为同步 不写默认true
contentType: "application/x-www-form-urlencoded",//post请求时需要设置请求头 data:{"name":value},//json格式提交数据
dataType:"html",//返回值类型，可以是xml/html/script/json/text/jsonp success: function(result){//请求成功回调函数，成功响应执行的代码 result就是response的内容 $("#checkResult").html(result); }
error:function(){//请求失败时的回调函数
alert("请求失败");
} }); }); }); $(function(){//get方式提交请求，post语法相同 $("#name").keyup(function(){ var page = ""; var value = $(this).val(); $get( page, {"name":value}, function(result){ $("#checkResult").html(result); } ); }); });
//load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。 $(function(){//load实现ajax $("#name").keyup(function(){ var value = $(this).val(); var page = "/study/checkName.jsp?name="+value; $("#checkResult").load(page); }); }); </script> <title>无标题文档</title> </head> <body> <div id="checkResult"></div> 输入账号 :<input id="name" type="text"> </body> </html>
当要提交的内容很多时，用一个个的变量去接收非常繁琐，这里就要用到序列化serialize：
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="jquery-3.3.1.min.js"></script> <script> $(function(){ $("input").keyup(function(){ var data = $("#form").serialize();//序列化表单内所有提交数据 var url = "http://how2j.cn/study/checkName.jsp"; var link = url+"?"+data; $("a").html(link);//实时显示请求URL $("a").attr("href",link);//改变链接值 $.get( page, data, function(result){ $("#checkResult").html(result); } ); }); }); </script> <title>无标题文档</title> </head> <body> <div id="checkResult"></div> <div id="data"></div> <a href="http://how2j.cn/study/checkName.jsp">http://how2j.cn/study/checkName.jsp</a> <form id="form"> 输入账号 :<input id="name" type="text" name="name"> <br> 输入年龄 :<input id="age" type="text" name="age"> <br> 输入手机号码 :<input id="mobile" type="text" name="mobile"> <br> </form> </body> </html>
