Ajax入门

2024-04-12 22:24:14

概述

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

为什么使用Ajax？

在之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。其缺点是：

  • 性能会有所降低
  • 用户的操作页面会中断(整个页面被刷新了)

 

XMLHttpRequest对象

使用Ajax进行客户端与服务端的异步通讯的一个关键对象就是XMLHttpRequest ，XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 

工作原理（来自java3y-Ajax入门）：

传统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。

当使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器。

XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】。

 

XMLHttpRequest的创建

并不是所有的浏览器都支持XMLHttpRequest对象，如下：

var xmlhttp;
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{//IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

 

XMLHttpRequest对象的属性

  • onreadystatechange：请求状态改变的事件触发器，每当readyState的属性改变时，就会调用该函数。 一般用于指定回调函数。
  • readyState：存有的XMLHttpRequest的状态从0到4发生变化。
    • 0：请求未初始化 。此时XMLHttpRequest对象已被创建，但还没有调用open方法。
    • 1：请求已建立。调用了open方法，创建了http请求，但还没有调用send方法，即还没有发送请求。
    • 2：请求已发送。请求已经被发送，但还没用到达服务器。
    • 3：请求处理中。请求已发送到服务器，服务器正在处理请求并返回响应数据。
    • 4：请求已完成，并已接收全部响应数据。
  • reponseText：以文本形式返回响应。
  • responseXML：以XML格式返回响应。可以使用JavaScript的DOM API操作返回的xml内容。
  • status：将状态返回为数字（例如，“Not Found”为404，“OK”为200）
  • statusText：以字符串形式返回状态（例如，“Not Found”或“OK”）

 

XMLHttpRequest对象的方法

重要方法如下：标粗体的方法为常用方法。

  • void open(method，URL，async)：根据请求形式和utl创建HTTP请求，async指定是否异步，true为异步，false为同步。

  • void open(method，URL，async，userName，password)：userName和password是在http认证的时候会用到的。

  • setRequestHeader(label，value)：设置请求体信息。使用post方式发送请求时，需设置如下请求头：

    xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  • void send(content)：发送请求给服务器。

    • 若是发送post请求，要发送的参数信息需通过send方法发送。
    • 对于get请求，content可以不写或为null。参数的发送通过url即可。

  • abort()：取消当前请求。

  • getAllResponseHeaders()：以字符串形式返回完整的HTTP标头集。

  • getResponseHeader(headerName) ：返回指定HTTP标头的值。

 

简单示例

该示例服务器端使用servlet。

示例内容：点击按钮，发送Ajax请求，并把从服务器获取到的文本插入到当前页面。

服务器端的Servlet：

public class OneServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("OneServlet.doGet");
        //客户端使用了post方式的请求，参数数据将会被request对象解析，需要设置其字符集，避免乱码
        req.setCharacterEncoding("utf-8");
        
        String username = req.getParameter("username");
        String age = req.getParameter("age");
        System.out.println("从客户端发送来的数据：");
        System.out.println("username = " + username);
        System.out.println("age = " + age);
		
        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().write("这是通过Ajax从服务器端获取的文本数据。。。");
    }
}

OneServlet的web.xml配置：

<servlet>
  <servlet-name>one</servlet-name>
  <servlet-class>com.servlet.OneServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>one</servlet-name>
  <url-pattern>/one</url-pattern>
</servlet-mapping>

 

index.html：

  • 点击按钮时，会调用getTextByAjax函数，在该函数中发送Ajax请求。并设置回调函数为setResponseText，当请求完成时获取接收到的数据，把数据输出到<p>标签。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>

    <script>
        let xmlHttpRequest;
        function getTextByAjax() {
            //根据浏览器版本创建XMLHttpRequest对象
            if(window.XMLHttpRequest){
                xmlHttpRequest = new XMLHttpRequest();
            }else
            {
                xmlHttpRequest=nexw ActiveXObject("Microsoft.XMLHTTP");
            }

            //创建http请求
            xmlHttpRequest.open("POST", "one" ,true);

            //发送post请求，需要设置该请求头信息（使用get方式则可以省略）
            xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            //设置回调函数，当readyState改变时调用该函数
            xmlHttpRequest.onreadystatechange = setResponseText;

            //发生请求，使用的是post方式，参数信息需通过send方法发送
            xmlHttpRequest.send("username=张三&age=25");
        }

        function setResponseText() {
            //readyStatus未4表示请求已完成，且响应已就绪；status为200则表示请求完成且响应数据接收完毕
            if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
                //获取服务器端返回的文本数据
                let text = xmlHttpRequest.responseText;

                //将文本数据输出在标签中
                document.getElementById("demo").innerHTML = text;
            }
        }

    </script>
</head>
<body>
    <h1>点击按钮发生Ajax请求</h1>
    <button onclick="getTextByAjax()">button</button>
    <p id="demo" ></p>
</body>
</html>

 

运行tomcat，点击按钮，可看到从服务器发送的文本信息

Ajax入门

且服务器端接收到客户端发送的数据：

Ajax入门
上一篇：【JS】XMLHttpRequest使用笔记


下一篇：XMLHttpRequest实现Ajax &数据格式JSON