1、关于Ajax交互的步骤
1.1 获取到xmlhttprequest
1.2 设置xmlhttprequest的onreadystatechange响应事件
1.3 准备获取ajax请求 xmlhttp.open("POST", "AjaxServerlet", true);
1.4 设置消息头为表单形式,模仿表单的POSt提交xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
1.5 发送ajax请求xmlhttp.send("age=18&name=zhang"); //Ajax的POST请求,参数是通过xmlhttp.send()方法携带的
1.6 处理Ajax交互获取到的数据,具体的处理在xmlhttprequest的onreadystatechange响应事件中实现
2、Ajax与Java的Servlet通过POSt交互
2.1 html代码
- <body>
- <button id="mybtn">点击</button>
- <div id="myAjax"></div>
- </body>
- <script type="text/javascript">
- //1、获取到xmlhttprequest
- function getXmlhttp() {
- var xmlhttp;
- if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp = new XMLHttpRequest();
- } else { // code for IE6, IE5
- xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- return xmlhttp;
- }
- window.onload = function() {
- document.getElementById('mybtn').onclick = function() {
- //1、获取到xmlhttprequest 对象
- var xmlhttp = getXmlhttp();
- //2、xmlhttprequest的响应事件
- xmlhttp.onreadystatechange = function() {
- if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
- //5、操作获取到的信息
- //5.1ajax返回的数据,转换为javascript对象
- // 5.1.1 利用eval实现转换
- var ajaxResult = eval("(" + xmlhttp.responseText + ")");
- //5.1.2 利用jquery的方法,对于jQuery.parseJSON(),键值必须为双引号
- /* var ajaxResult = jQuery.parseJSON(xmlhttp.responseText); */
- alert(ajaxResult)
- //5.2获取JavaScript对象的属性
- var age = ajaxResult.age;
- var name = ajaxResult.name;
- //5.3获取到页面的DIV,并设置内容
- var mydiv = document.getElementById("myAjax");
- mydiv.innerHTML = "name:" + name + "," + "age:" + age;
- }
- }
- //3、准备获取ajax请求
- //3.1 对于get请求,带参数的方式,直接在open函数的请求地址带上参数
- xmlhttp.open("POST", "AjaxServerlet", true);
- //4、发送ajax请求
- xmlhttp.setRequestHeader("Content-type",
- "application/x-www-form-urlencoded");
- xmlhttp.send("age=18&name=zhang");
- };
- }
- </script>
- <style type="text/css">
- #myAjax {
- width: 400px;
- height: 400px;
- border: 1px dashed red;
- text-align: center; /* div中的文字水平方向居中显示 */
- line-height: 400px; /*这个和div的高度相同,div中的文字就会垂直方向居中显示 */
- font-size: 16px;
- font-weight: bold;
- }
- </style>
- public class AjaxServerlet extends HttpServlet {
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- String age = request.getParameter("age");
- String name = request.getParameter("name");
- Person person = new Person(name, age);
- String personJSON = "{\"name" + "\":\"" + name + "\"," + "\"age"
- + "\":" + age + "}";
- System.out.println(personJSON);
- response.getWriter().write(personJSON);
- }
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- doGet(request, response);
- }
- }
- <servlet>
- <servlet-name>AjaxServerlet</servlet-name>
- <servlet-class>com.ajax.com.AjaxServerlet</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>AjaxServerlet</servlet-name>
- <url-pattern>/AjaxServerlet</url-pattern>
- </servlet-mapping>
- <welcome-file-list>
- <welcome-file>index.html</welcome-file>
- </welcome-file-list>