初识Ajax

最新推荐文章于 2024-03-23 16:15:48 发布

零怀念

最新推荐文章于 2024-03-23 16:15:48 发布

阅读量243

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/linghuainian/article/details/82714122

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

概念

Ajax的全称为Asychronous JavaScript XML，它的主要作用是局部刷新。什么是局部刷新呢？比如现在有一个登录页面，我们以前的做法通常是创建一个表单，有用户名和密码还有提交按钮，在用户点提交按钮之前，页面无法通过后台验证当前填写的用户名或者密码是否正确。而Ajax就是帮我们完成在不用提交表单的情况下，将用户名或者密码传递给后台，让后台帮我们检验并返回结果。

XMLHttpRequest

要想使用Ajax，首先需要创建XMLHttpRequest对象，它可以与服务器交互，使得web页面可以只更新页面的局部，而不用刷新整个页面。接下来是如何利用XMLHttpRequest发起Ajax的步骤：

1.创建对象

构造方法：new XMLHttpRequest()

考虑到浏览器的兼容性问题：如果是IE浏览器，需要用new ActiveXObject("Microsoft.XMLHttp")方式创建。

2.初始化请求——open()

xhrReq.open(method, url)

参数说明：

method：要使用的HTTP方法，比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。

url：一个DOMString表示要向其发送请求的URL。

3.设置HTTP请求头——setRequestHeader()

XMLHttpRequest.setRequestHeader() 是设置HTTP请求头部的方法。此方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。如果HTTP请求方式为GET，那么可以不用设置请求头，如果HTTP请求方式为POST，且发送主体有参数最好设置请求头：

xhrReq.setRequestHeader("content-type","application/x-www-form-urlencoded");

4.发送请求——send()

MLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。如果请求方法是POST，请求主体可以设置参数或者文本内容,也可以设置为null。

5.事件监听——onreadystatechange

当一个HTTP请求发送给服务器，服务器响应并返回相应的数据之后，页面会有相应的处理函数。只要 XMLHttpRequest对象的readyState属性发生变化，就会调用相应的处理函数。

readyState有以下几种值：

6. 服务器响应的数据

response:XMLHttpRequest.response 属性返回响应的正文。它可以是 ArrayBuffer, Blob, Document, JavaScript对象或一个 DOMString 类型，具体取决于 XMLHttpRequest.responseType 属性的值。

responseText:XMLHttpRequest.responseText 属性返回一个DOMString，它包含对文本的请求的响应，如果请求不成功或尚未发送，则返回null。

responseXML:XMLHttpRequest.responseXML 属性是一个只读值，它返回一个包含请求检索的HTML或XML的Document，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。

代码

示例1：演示一下上面的步骤

html页面：


<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8" content="text/html" >

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <script>
        var xmlHttpRequest=null;
        $(function () {
            $("#sub").click(function () {
                var value=$("#name").val();
                //创建对象
                createXMLHttpRequest();
                //每当readyState属性值改变时，都会调用fun函数
                xmlHttpRequest.onreadystatechange=fun;
                alert("1")
                //初始化请求
                xmlHttpRequest.open("post","testServlet?param="+value);
                alert("2")
                //发送请求
                xmlHttpRequest.send(null)
            })

        })

        //创建XMLHttpRequest对象，并考虑浏览器兼容性
        function createXMLHttpRequest() {
            if(window.XMLHttpRequest){//如果是非IE浏览器
                xmlHttpRequest=new XMLHttpRequest();
            }else {//如果是IE浏览器
                 xmlHttpRequest=new ActiveXObject("Microsoft.XMLHttp");
            }
            return xmlHttpRequest;
        }
        function fun() {
            //status是HTTP状态码
            alert("status:"+xmlHttpRequest.status+"  readyState:"+xmlHttpRequest.readyState+" 相应数据:"
                +xmlHttpRequest.responseText);
        }
    </script>
</head>
<body>

    姓名：<input type="text" name="name" id="name">
    <input type="button" id="sub" value="提交">

</body>
</html>

后台的一个Servlet充当服务器：

package test;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns= "/testServlet")
public class TestServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        String param=request.getParameter("param");
        PrintWriter out=response.getWriter();
        out.write("hello:"+param);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

运行结果：

点击提交按钮后依次出现6次弹窗：

（1）

（2）因为open()方法调用是在alert("1")之后的，所以先执行alert("1")，然后执行open()，执行open()后readyState属性值变为1，触发fun函数，弹出窗口。

（3）

（4）send()方法被调用，请求已发送，readyState属性值变为2，触发fun回调函数。

（5）readyState为3，响应部分数据。

（6）readyState为4，返回全部数据。

示例2：利用Ajax局部验证登录表单的用户名和密码

登录页面：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/9/15
  Time: 10:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <%
        String path=request.getSession().getServletContext().getContextPath();
    %>
    <script>
        var xmlHttpRequest=null;
        $(function () {
            //用post方式请求验证用户名
            $("#name").blur(function () {
                var name=$(this).val();
                createXmlHttpRequest();
                xmlHttpRequest.open("post","<%=path%>/loginServlet");
                xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlHttpRequest.send("name="+name)
                xmlHttpRequest.onreadystatechange=function () {
                    if(xmlHttpRequest.status==200&&xmlHttpRequest.readyState==4){
                        if(xmlHttpRequest.responseText=="true"){
                            $("#nameMsg").html("用户名正确")
                        }else {
                            $("#nameMsg").html("用户名错误")
                        }
                    }

                }

            });
            //用get方式请求验证密码
            $("#pwd").blur(function () {
                var value=$(this).val();
                console.log(value)
                createXmlHttpRequest();
                xmlHttpRequest.open("get","<%=path%>/loginServlet?password="+value);
                xmlHttpRequest.send(null)
                xmlHttpRequest.onreadystatechange=function () {
                    if(xmlHttpRequest.status==200&&xmlHttpRequest.readyState==4){
                        if(xmlHttpRequest.response=="true"){
                            $("#pwdMsg").html("密码正确")
                        }else {
                            $("#pwdMsg").html("密码错误")
                        }
                    }

                }
            })

        });
        function createXmlHttpRequest() {
            if(window.XMLHttpRequest){
                xmlHttpRequest=new XMLHttpRequest();
            }else {
                xmlHttpRequest=new ActiveXObject("Microsoft.XMLHttp");
            }
        }
    </script>
</head>

<body>
<form id="loginForm" action="<%=path%>/loginServlet">
    用户名：<input type="text" name="name" id="name">
    <span id="nameMsg" name="nameMsg"></span><br/>
    密码：<input type="password" name="pwd" id="pwd">
    <span id="pwdMsg" name="pwdMsg"></span>
    <input type="submit" id="sub" value="提交">
</form>
</body>
</html>

LoginServlet作为服务器：

package test;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(urlPatterns = "/loginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        String name=request.getParameter("name");
        String password=request.getParameter("password");
        if (name!=null){
            System.out.println(name);
            if (name.equals("admin")){
                response.getWriter().write("true");
            }else {
                response.getWriter().write("false");
            }
        }
        if (password!=null){
            if (password.equals("123456")){
                response.getWriter().write("true");
            }else {
                response.getWriter().write("false");
            }

        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

运行界面：

零怀念

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Ajax

概念Ajax的全称为Asychronous JavaScript XML，它的主要作用是局部刷新。什么是局部刷新呢？比如现在有一个登录页面，我们以前的做法通常是创建一个表单，有用户名和密码还有提交按钮，在用户点提交按钮之前，页面无法通过后台验证当前填写的用户名或者密码是否正确。而Ajax就是帮我们完成在不用提交表单的情况下，将用户名或者密码传递给后台，让后台帮我们检验并返回结果。 XM...
复制链接

扫一扫