zoukankan      html  css  js  c++  java

  • 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");

    浏览器测试效果
  • 相关阅读:
    use paramiko to connect remote server and execute command
    protect golang source code
    adjust jedi vim to python2 and python3
    install vim plugin local file offline
    add swap file if you only have 1G RAM
    datatables hyperlink in td
    django rest framework custom json format
    【JAVA基础】网络编程
    【JAVA基础】多线程
    【JAVA基础】String类的概述和使用
  • 原文地址：https://www.cnblogs.com/qf123/p/10114440.html
Copyright © 2011-2022 走看看