<Ajax> 入门
Ajax是什么
Ajax(Asynchronous JavaScript and XML)异步的JavaScript和XML，是一种创建交互式网页应用的网页开发技术，是几种技术的组合。
Ajax本质上是一个浏览器端的技术。
异步刷新技术，用来在当前页面响应不同的请求内容。
为什么需要Ajax
需求：有时我们需要将本次的响应结果和前面的响应结果内容在同一个页面中展示给用户。
解决：1.在后台服务器端多次响应的内容重新拼接一个jsp页面，响应。但是会造成很多响应内容重复响应，资源浪费。
2.使用Ajax技术
怎么用Ajax
向后台发送请求
传统方式，刷新页面，重新打开
<a href =" "></>
<form action= ""></form>
window.location.href=
都会改变地址
ajax 采用xmlHttpRequest 即ajax引擎对象
$.ajax()
发送请求后，该对象还未完成操作，所以不会改变浏览器地址
意味着onreadystatechange调用了4次，当为4时表示数据成功接收。
JSP页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Ajax_HelloWorld</title> <%-- 1.ajax概念 局部刷新技术，不是新技术，多种技术组合，浏览器端技术 2.ajax作用 实现当前页面显示其他请求的响应内容 3.ajax使用 ajax基本流程： //创建ajax引擎对象 //复写onreadystatechange函数 //判断ajax状态码 //判断响应状态码 //获取响应内容（响应内容的格式） //处理响应内容 //发送请求 ajax状态码 ajax状态码 readystate:0,1,2,3,4 4:表示响应内容被成功接收 status响应状态码 200:OK 404:资源未找到 500:服务器错误 ajax的异步和同步 ajax.open(method,url,async,username,password) async:设置同步还是异步执行，true异步，默认 --%> <%--此处css为什么失效？--%> <script type="text/css"> #showDiv { border: solid 1px; width: 200px; height: 100px; } </script> <script type="text/javascript"> function getData() { //1.创建ajax引擎对象 var ajax; if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else if (window.ActiveXObject) { //早期IE ajax = new ActiveXObject("Msxml2.XMLHTTP"); } //2.复写onreadystatechange函数 ajax.onreadystatechange = function () { //4.表示请求已完成，且响应数据就绪 if (ajax.readyState == 4) { //判断响应状态码 if (ajax.status == 200) { //获取响应内容 var result = ajax.responseText; //获取元素对象 var showDiv = document.getElementById("showDiv"); showDiv.innerHTML = result; } else if (ajax.status == 404) { var showDiv = document.getElementById("showDiv"); showDiv.innerHTML = "该资源不存在"; } else if (ajax.status == 500) { var showDiv = document.getElementById("showDiv"); showDiv.innerHTML = "服务器繁忙"; } }else { var showDiv = document.getElementById("showDiv"); //资源未获取到，此时显示一个等待的gif 未实现 showDiv.innerHTML = "<img src='img/1.gif' width='200px' height='100px'>"; } }; //3.发送请求,默认是异步的true //method，uri,async,username,password ajax.open("get", "/ajax"); //放置请求体 ajax.send(null); } </script> </head> <body> <h3>Hello Ajax</h3> <hr> <input type="button" value="填充" onclick="getData()"/> <div id="showDiv"></div> </body> </html>
@Controller public class AjaxController { @RequestMapping(value = "/ajax", produces = {"text/html;charset=UTF-8;", "application/json;"}) @ResponseBody public String ajax() { try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); } return "你好,Ajax"; } }
get请求
post请求
ajax.open("post", "/post"); ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //放置请求体 ajax.send("username=张三&password=123");
