Ajax：异步js和xml

最新推荐文章于 2024-05-10 10:33:01 发布

heyguiji

最新推荐文章于 2024-05-10 10:33:01 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/heyguiji/article/details/93795358

版权

异步刷新：如果网页中某一个地方需要修改，之刷新需要修改的地方，而页面其他地方保持不变

实现：

js：

XMLHttpRequest对象

XMLHttpRequest对象的方法：

open(方法名（提交方式）,服务器地址,ture)；--------------------与服务器建立连接

send():

get方式：send(null);

post方式：send(参数值);

setRequestHeader(header,value);

get方式：不需要设置此方法

post方式：需要设置：

1.如果请求元素包含了文件上传：

setRequestHeader(“Content-Type”,“multipart/form-data”);

setRequestHeader(“Content-Type”,application/x-www-form-urlencoded");

XMLHttpRequest对象的属性：

readystate：请求状态：只有状态为4代表请求完毕
在这里插入图片描述
status：响应状态：只有200代表响应正常

在这里插入图片描述

回调函数：

例如下图：本来是应该执行完b去执行c，但是a是b的回调函数，所以执行完b之后会去执行a。
在这里插入图片描述
onreadystatechange:回调函数

responseText:响应格式为Text

responseXML:响应格式为XML

例子：

判断号码是否存在：

MobileServlet：

package 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(name = "MobileServlet",urlPatterns="/MobileServlet")
public class MobileServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String mobile = request.getParameter("mobile");
        PrintWriter out = response.getWriter();
        if("123456789".equals(mobile)){
            out.write("true");
        }else {
            out.write("false");
        }
    }

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

mobiletest.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 60993
  Date: 2019/5/25
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
    //post方式
    function reg() {
            var mobile = document.getElementById("mobile").value;
            xmlHttpRequest = new XMLHttpRequest();
            xmlHttpRequest.open("post","MobileServlet",true);
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlHttpRequest.send("mobile="+mobile);
            xmlHttpRequest.onreadystatechange=callback;
        }
        //get方式
        function regGet() {
            var mobile = document.getElementById("mobile").value;
            xmlHttpRequest = new XMLHttpRequest();
            xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);
          //  xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlHttpRequest.send(null);
            xmlHttpRequest.onreadystatechange=callback;
        }
        function callback() {

            if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
                var data = xmlHttpRequest.responseText;
                if(data=="true"){
                    alert("号码已存在");
                }else {
                    alert("注册成功");
                }
            }
        }
    </script>
</head>
<body>
    手机号：<input type="text" id="mobile"><br>
    <input type="button" value="注册" onclick="reg()">
</body>
</html>

原生JS实现ajax总结：

1.首先new一个XMLHttpRequest对象：

xmlHttpRequest = new XMLHttpRequest();

2.建立连接：

xmlHttpRequest.open("post","MobileServlet",true);

3.如果是post方式设置setRequestHeader：

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

4.发送参数：

xmlHttpRequest.send("mobile="+mobile);

5.调用回调函数

jquery实现ajax：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
<script src="js/jquery-2.1.0.js">
</script>
</head>
<body>
手机号：<input type="text" id="mobile"><br>
<input type="button" value="注册" id="a">
<script>
    $("#a").click(function(){
        var $mobile = $("#mobile").val();
        $.get(
            "MobileServlet",
            "mobile="+$mobile,
            function (result) {
                if(result=="true"){
                    alert("号码已存在");
                }else {
                    alert("注册成功");
                }
            });
    });
</script>
</body>
</html>