AJAX原理及JS方式实现

最新推荐文章于 2022-07-27 21:14:45 发布

不生气不生气要开心要开心

最新推荐文章于 2022-07-27 21:14:45 发布

阅读量142

点赞数

分类专栏： Java JSP

本文链接：https://blog.csdn.net/weixin_44098569/article/details/90115892

版权

Java 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JSP

3 篇文章 0 订阅

订阅专栏

AJAX:异步JS 和 xml

异步刷新：如果网页中某一个地方需要修改，异步刷新可以使：只刷新该需要修改的区域

实现

js：XMLHttpRequest对象

XMLHttpRequest对象的方法：

open(方法名（提交方式get|post），服务器地址，true): 与服务端建立连接
- send();
  - List item
  - get:send(null)
  - post:send(参数值)
setRequestHeader(header,value):
- get:不需要设置此方法
- post：需要设置：
  - a.如果请求元素中包含了文件上传
    - setRequestHeader(“Content-Type”,“multipart/from-data”)
  - b.不包含文件上传
    - setRequestHeader( )
XMLHttpRequest对象的属性：
readyState：请求状态 只有状态位4代表请求完毕
status：响应状态只有是200代表正常响应
onreadystatechange：回调函数
responseText：响应格式位String
responseXml：响应格式位XML

案例

开发环境：jsp+servlet+javascript

package com.hyzd.servlet;

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("/MobileServlet")
public class MobileServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html; charset=UTF-8");
        String mobile = request.getParameter("mobile");
        //假设此时 数据库中只有一个号码 18574400000

        PrintWriter out = response.getWriter();
        if("18574400000".equals(mobile)) {
            out.write("true");//servlet以输出流的方式将信息返回给客户端
        }else {
            out.write("false");
        }
        out.close();
    }
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript">
    function register() {
      var mobile = document.getElementById("mobile").value;
      //通过ajax异步方式请求服务端

      if (window.XMLHttpRequest)
      {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmLHttpRequest=new XMLHttpRequest();
      }
      else
      {
        // IE6, IE5 浏览器执行代码
        xmLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
      }

      //设置xmLHttpRequest对象的回调函数
      xmLHttpRequest.onreadystatechange = callBack ;

      xmLHttpRequest.open("post","MobileServlet",true);
      //设置post方式的头信息
      xmLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //发送数据
      xmLHttpRequest.send("mobile="+mobile);

    }

    function registerGet() {
      var mobile = document.getElementById("mobile").value;
      //通过ajax异步方式请求服务端

      if (window.XMLHttpRequest)
      {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmLHttpRequest=new XMLHttpRequest();
      }
      else
      {
        // IE6, IE5 浏览器执行代码
        xmLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
      }
      //设置xmLHttpRequest对象的回调函数
      xmLHttpRequest.onreadystatechange = callBack ;

      xmLHttpRequest.open("get","MobileServlet?mobile="+mobile,true);
      //设置post方式的头信息,get不需要
      //xmLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //发送数据
      xmLHttpRequest.send(null);

    }

    //定义回调函数(接收服务端的返回值)
    function callBack(){
      if(xmLHttpRequest.readyState == 4 && xmLHttpRequest.status==200){
          //接受服务端返回的数据
          var data = xmLHttpRequest.responseText;
          if (data == "true"){
              alert("此号码已存在")
          }else {
              alert("注册成功！")
          }
      }
    }
  </script>
  <title>Insert title here</title>
</head>
<body>
手机：<input id="mobile"/><br/>
<button type="button"  onclick="registerGet()">注册</button>
</body>
</html>

不生气不生气要开心要开心

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX原理及JS方式实现

AJAX:异步JS 和 xml异步刷新：如果网页中某一个地方需要修改，异步刷新可以使：只刷新该需要修改的区域实现js：XMLHttpRequest对象## XMLHttpRequest对象的方法： open(方法名（提交方式get|post），服务器地址，true): 与服务端建立连接send(); get:send(null) post:send(参数值)setReques...
复制链接

扫一扫