Ajax相关

Posted 2020-09-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax相关相关的知识，希望对你有一定的参考价值。

我们先看一下js的原生ajax

直接进入代码，我们先准备好servlet,之后不会改动，所以先看一下。

package cn.curry.servlet;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;

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.util.ArrayList;
import java.util.List;

/**
 * Created by a on 2017/3/16.
 */
public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name=request.getParameter("name");
        if("admin".equals(name)){
            //打回浏览器  “已经注册”
            response.getWriter().write("Your Account Is Already Registered");
        }
        else{
            //可以注册
            response.getWriter().write("You Can Register This Account");
        }

    }

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

很简单的servlet页面，然后我们看前台jsp展示页面，我写的是发送post，请求。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript">
        function checkUser(){
            var value=document.getElementById("username").value;
            var url="RegisterServlet";
            var xhr;
            if(window.XMLHttpRequest){
                //非IE浏览器 Chrome 等
                xhr=new XMLHttpRequest();
            }else{
                //IE
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open(‘post‘,url,true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var content=xhr.responseText;
                    document.getElementById("msg").innerText=content;
                }
            }
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send("name="+value);
        }
    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>

简单改一下就可以实现发送get请求。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript">
        function checkUser(){
            var value=document.getElementById("username").value;
            var url="RegisterServlet?name="+value;
            var xhr;
            if(window.XMLHttpRequest){
                //非IE浏览器 Chrome 等
                xhr=new XMLHttpRequest();
            }else{
                //IE
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open(‘get‘,url,true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var content=xhr.responseText;
                    document.getElementById("msg").innerText=content;
                }
            }
          
            xhr.send(null);
        }
    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>

接下来看jQuery的，简单了很多。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
    <script type="text/javascript">
        function checkUser() {
            var value=document.getElementById("username").value;
            $.ajax({
                url : "RegisterServlet",
                type : "GET",
                data : "name="+value,
                dataType : "text",
                success : function(result){
                    document.getElementById("msg").innerText=result;
                },
                error:function () {
                    document.getElementById("msg").innerText=result;
                }

            });
        }

    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>

以上是关于Ajax相关的主要内容，如果未能解决你的问题，请参考以下文章

jQuery高级Ajax

ajax相关操作

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

JavaScript-Tool-lhgDialog：动画示例

Ajax 片段元标记 - Googlebot 未读取页面内容