json

Ajax

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的 网页开发技术。
ajax 是一种浏览器异步发起请求。局部更新页面的技术。

javaScript 原生 Ajax 请求

原生的 Ajax 请求，
1、我们首先要创建 XMLHttpRequest 对象
2、调用 open 方法设置请求参数
3、调用 send 方法发送请求
4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
创建一个 html 页面，发起请求。代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="pragma" content="no-cache" />
  5.         <meta http-equiv="cache-control" content="no-cache" />
  6.         <meta http-equiv="Expires" content="0" />
  7.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8.         <title>Insert title here</title>
  9.         <script type="text/javascript">
  10.             function ajaxRequest() {
  11. //                 1、我们首先要创建XMLHttpRequest 
  12.                 xmlhttpprequest = new XMLHttpRequest();
  13. //                 2、调用open方法设置请求参数
  14.                 xmlhttpprequest.open("GET","http://localhost:8080/Cookie_session/ajaxServlet?action=javaScriptAjax",true);
  16. //                 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作.
  17.                 xmlhttpprequest.onreadystatechange = function (){
  18.                     if (xmlhttpprequest.readyState == 4&&xmlhttpprequest.status == 200){
  19.                         jsonObj = JSON.parse(xmlhttpprequest.responseText);
  21.                         //把响应的数据显示在页面上
  22.                         document.getElementById("div01").innerHTML = "编号" + jsonObj.id+"，姓名"+jsonObj.name;
  23.                         // document.getElementById("div01").innerHTML = xmlhttpprequest.responseText;
  24.                     }
  26.                 }
  27. //                 3、调用send方法发送请求
  28.                 xmlhttpprequest.send();
  30.             }
  31.         </script>
  32.     </head>
  33.     <body>    
  34.         <button onclick="ajaxRequest()">ajax request</button>
  35.         <div id="div01">
  36.         </div>
  37.     </body>
  38. </html>

创建一个 AjaxServlet 程序接收请求

  1. package servlet;
  3. import com.google.gson.Gson;
  4. import pojo.Person;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. import java.io.IOException;
  11. public class AjaxServlet extends BaseServlet{
  13.     protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  14.         System.out.println("请求过来了");
  16.         Person person = new Person(1,"肖战");
  18.         //转为json格式的字符串
  19.         Gson gson = new Gson();
  20.         String personJsonString = gson.toJson(person);
  22.         resp.getWriter().write(personJsonString);
  23.     }
  24. }

xmlhttpprequest.open(“GET”,”http://localhost:8080/Cookie_session/ajaxServlet?action=javaScriptAjax",true);
该处为true时，表示是异步请求，为false时，表示为同步请求
同步请求：就是要等前面的执行结束之后再执行，只有一个线程
异步请求：同时进行，多线程进行，不用等待，推荐使用