Ajax的使用

Ajax简介

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面

Ajax并不是一种新的技术：

  • 使用CSS和XHTML来表示
  • 使用DOM模型来交互和动态显示
  • 使用XMLHttpRequest来和服务器进行异步通信
  • 使用javascript来绑定和调用

XMLHttpRequest

XMLHttpRequest是 AJAX 的基础，用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

Ajax使用

创建XMLHttpRequest对象

  • Firefox, Opera 8.0+, Safari：new XMLHttpRequest();
  • Internet Explorer：new ActiveXObject("Msxml2.XMLHTTP");
  • 默认版本的XMLHTTP：new ActiveXObject("Microsoft.XMLHTTP");

发送请求

发送请求

  • open(method,url,async): 规定请求的类型、URL 以及是否异步处理请求
    • method:请求的类型；GET 或 POST 
    • url:文件在服务器上的位置 
    • async:true（异步）或 false（同步）
  • send(string): 将请求发送到服务器
    • string：仅用于 POST 请求(因为GET请求参数放在url里)

接收响应并处理

注册监听(onreadystatechange事件)

请求被发送到服务器时，需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息

属性描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status

200: "OK"

404: 未找到页面

获得来自服务器的响应，需要 XMLHttpRequest 对象的 responseText 或 responseXML 属性

responseText 获得字符串形式的响应数据
responseXML 获得 XML 形式的响应数据。

get方式请求

web.xml

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 3     xmlns="http://java.sun.com/xml/ns/javaee" 
 4     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
 5     id="WebApp_ID" version="3.0">
 6   <display-name>AjaxDemo</display-name>
 7   <welcome-file-list>
 8     <welcome-file>index.jsp</welcome-file>
 9   </welcome-file-list>
10   
11  <servlet>
12      <servlet-name>testServlet</servlet-name>
13      <servlet-class>com.qf.servlet.TestServlet</servlet-class>
14  </servlet>
15  <servlet-mapping>
16      <servlet-name>testServlet</servlet-name>
17      <url-pattern>/testServlet</url-pattern>
18  </servlet-mapping>
19 </web-app>

TestServlet.java

 1 public class TestServlet extends HttpServlet {
 2 
 3     @Override
 4     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 5 
 6         resp.setCharacterEncoding("utf-8");
 7 //        resp.setHeader("Content-Type", "text/html; charset=UTF-8");
 8         System.out.println("开始处理get请求！！！");
 9         resp.getWriter().write("get请求成功！！！");
10     }
11 }

index.jsp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 </head>
 9 
10 <script type="text/javascript">
11     /* 创建XMLHttpRequest对象  */
12     function createXmlHttpRequest() {
13         var xmlHttp;
14         try { // Firefox, Opera 8.0+, Safari
15             xmlHttp = new XMLHttpRequest();
16         } catch (e) {
17             try {// Internet Explorer
18                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
19             } catch (e) {
20                 try {
21                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
22                 } catch (e) {
23 
24                 }
25             }
26         }
27 
28         return xmlHttp;
29     }
30 
31     function get() {
32         //获取XMLHttpRequest对象
33         var req = createXmlHttpRequest();
34 
35         /**
36             发送请求
37             open(method,url,async): 规定请求的类型、URL 以及是否异步处理请求
38                 1.method:请求的类型；GET 或 POST 
39                 2.url:文件在服务器上的位置 
40                 3.async:true（异步）或 false（同步）
41             send(string): 将请求发送到服务器
42                 string：仅用于 POST 请求(因为GET请求参数放在url里)
43          */
44         req.open("GET", "testServlet?name=qf", true);
45         
46         /*
47             在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时所执行的任务
48         */
49         req.onreadystatechange = function() {
50             if (req.readyState == 4 && req.status == 200) {
51                 alert(req.responseText);
52             }
53 
54         }
55         //发送请求
56         req.send();
57     }
58 </script>
59 
60 <body>
61     <h3>
62         <a href="#" onclick="get()">Ajax发送get请求</a>
63     </h3>
64 </body>
65 </html>

浏览器测试效果

post方式请求

 TestServlet.java

 1 public class TestServlet extends HttpServlet {
 2 
 3     @Override
 4     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 5 
 6         resp.setCharacterEncoding("utf-8");
 7         String name = req.getParameter("name");
 8         System.out.println("开始处理get请求！！！"+name);
 9         resp.getWriter().write("get请求成功！！！");
10     }
11     
12     @Override
13     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
14         resp.setCharacterEncoding("utf-8");
15         String name = req.getParameter("name");
16         System.out.println("开始处理post请求！！！"+name);
17         resp.getWriter().write("post请求成功！！！");
18     }
19 }

index.jsp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 </head>
 9 
10 <script type="text/javascript">
11     /* 创建XMLHttpRequest对象  */
12     function createXmlHttpRequest() {
13         var xmlHttp;
14         try { // Firefox, Opera 8.0+, Safari
15             xmlHttp = new XMLHttpRequest();
16         } catch (e) {
17             try {// Internet Explorer
18                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
19             } catch (e) {
20                 try {
21                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
22                 } catch (e) {
23 
24                 }
25             }
26         }
27 
28         return xmlHttp;
29     }
30 
31     function post() {
32         //获取XMLHttpRequest对象
33         var req = createXmlHttpRequest();
34 
35         /**
36             发送请求
37             open(method,url,async): 规定请求的类型、URL 以及是否异步处理请求
38                 1.method:请求的类型；GET 或 POST 
39                 2.url:文件在服务器上的位置 
40                 3.async:true（异步）或 false（同步）
41             send(string): 将请求发送到服务器
42                 string：仅用于 POST 请求(因为GET请求参数放在url里)
43          */
44         req.open("POST", "testServlet", true);
45         
46         /*
47             请求被发送到服务器时，需要执行一些基于响应的任务
48         */
49         
50         req.onreadystatechange = function() {
51             if (req.readyState == 4 && req.status == 200) {
52                 alert(req.responseText);
53             }
54 
55         }
56         
57         //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
58         req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
59 
60         //发送请求
61         req.send("name=qf");
62     }
63 </script>
64 
65 <body>
66     <h3>
67         <a href="#" onclick="post()">Ajax发送post请求</a>
68     </h3>
69 </body>
70 </html>

注：

如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据req.setRequestHeader("Content-type","application/x-www-form-urlencoded");

浏览器测试效果

 

posted @ 2018-12-13 15:50  *青锋*  阅读(127)  评论(0)  编辑  收藏  举报