AJAX原理使用JS方式的简单实现

最新推荐文章于 2024-07-16 17:52:21 发布

碼頭工人

最新推荐文章于 2024-07-16 17:52:21 发布

阅读量267

点赞数

分类专栏： JavaWeb 文章标签： ajax javascript

本文链接：https://blog.csdn.net/IPROMISE_LX/article/details/105851790

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AJAX原理使用JS方式的简单实现

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）,是一种使用现有标准的新方法。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

JS简单实现方式如下:

使用到的对象有 XMLHttpRequest 对象
该对象有两个比较重要的属性:
readyState (请求状态) 和 status (相应状态)

readyState:

状态值	简介
0	表示 XMLHttpRequest 对象还没有初始化
1	表示 XMLHttpRequest 对象开始发送请求, 已经执行了 open(method,url,async) 方法并完成了相关资源的准备
2	表示 XMLHttpRequest 对象已经发送完毕,已经执行了 send() 方法来发送请求, 但是还没有收到响应
3	表示 XMLHttpRequest 对象开始读取响应信息,已经接收到 HTTP 响应的头部信息,但还没有将响应体接收完毕
4	表示 XMLHttpRequest 对象表示响应信息已全部读取完毕

status:

状态码	说明
200	服务器正常响应
400	找不到请求资源
401	请求未经授权，这个状态代码必须和 WWW-Authenticate 报头域一起使用
403	没有访问权限
404	访问资源不存在
500	服务器内部错误,可能服务器代码有问题
503	服务器当前不能出来客户端的请求，一段时间后可能恢复正常。

具体使用到的方法有:

方法	返回值
XMLHttpRequest.open(method: string,url: string,async: boolean)	void
XMLHttpRequest.setRequestHeader( name: string, value: string)	void
XMLHttpRequest.send( body?: Document \| Blob \| ArrayBufferView \| ArrayBuffer \| FormData \| URLSearchParams \| ReadableStream \| string \| null)	void

open(method,url,async):
method 为 HTML 的两种提交方式—— get / post
url 为要提交至的页面或Servlet的地址
async 为是否选择异步的方式, 在AJAX中一般都为 true
此方法用于与服务器建立连接

setRequestHeader(name, value): ——仅限post提交的方法
一般是 K/V 的形式
name 为头的名称
value 为头的值

在这里使用到的 name 为 "Content-Type"
而 value 则分为两种情况

上传文件—— "multipart/form-data"
非上传文件—— "application/x-www-form-urlencoded"

注意: 在 open() 方式中若是使用了 get 方法进行提交, 则不需要使用此方法

send( )
send() 方法也分两种情况:

get 方式提交: 方法调用为 send(null)
post 方式提交:方法调用为 send( 参数值 )

演示:
现在创建一个简单的Servlet

package Servlet;

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

public class MobileServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    	//优先设置编码格式
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=UTF-8");
        String mobile = req.getParameter("mobile");
        PrintWriter out = resp.getWriter();
        //假设数据库只有一个号码
        if ("18888888888".equals(mobile)) {
            out.write("true");
        } else {
            out.write("false");
        }
        out.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

创建一个简单的JSP文件:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript">
        function register() {
            var mobile = document.getElementById("mobile").value;
            //通过Ajax异步方式  请求服务端
            xmlHttpRequest = new XMLHttpRequest();
            //设置下xmlHttpRequest对象的回调函数
            xmlHttpRequest.onreadystatechange = callback;
            xmlHttpRequest.open("post", "MobileServlet", true);
            //post方式设置头消息
            xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttpRequest.send("mobile=" + mobile);
        }
        //定义回调函数:(接受服务器的返回值)
        function callback() {
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                //接受服务端返回的数据
                var responseText = xmlHttpRequest.responseText;
                if (responseText == "true") {
                    alert("此号码已存在.请更换!");
                } else {
                    alert("注册成功");
                }
            }
        }
    </script>
    <title>Title</title>
</head>
<body>
        手机:<input id="mobile"/>
        <input type="button" value="注册" onclick="register()"/>
</body>
</html>

输入18888888888(假设已存在的号码)结果:
在这里插入图片描述

其他号码(不存在)的结果:
在这里插入图片描述

碼頭工人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX原理使用JS方式的简单实现

AJAX原理使用JS方式的简单实现AJAXAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）,是一种使用现有标准的新方法。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。JS简单实现方式如下...
复制链接

扫一扫