Ajax简介_ajax术语是哪家公司-CSDN博客

本文链接：https://blog.csdn.net/qdzjo/article/details/115380811

Ajax简介

1.概念

Ajax全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）。

Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求，服务器返回部分数据，浏览器让你去利用这些数据对象页面做部分的更新，整个过程，页面无刷新，不打断用户的操作。

同步和异步的区别

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>$Title$</title>
            <script type="text/javascript">
                function checkAccount(account){
                    location.assign("checkAccount?account="+account);//同步的get请求   
    </script>  
    </head>  
    <body>  
        <%--enctype="application/x-www-form-urlencoded" 表单的默认数据提交方式--%>  
            <form>    
                账号：<input type="text" onblur="checkAccount(this.value)"><span id="msgId"></span><br/>    
                密码：<input type="text" ><br/>    
                  
            </form>  
            </body>
        </html>

同步：目前与服务器端的交互方式是同步，当客户端与服务器交互时，客户端就不能进行其他操作，只能等待服务器端的响应，会刷新页面。

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 = "check" ,urlPatterns = "/checkAccount")
public class CheckAccountServlet extends HttpServlet {
    //同步
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String account = req.getParameter("account");
        if (account.equals("admin")){
            req.setAttribute("msg","账号已存在");
        }else{
            req.setAttribute("msg","√");
        }
        req.getRequestDispatcher("index.jsp").forward(req,resp);
    }
}

异步：当客户端正在进行正常操作时，还可以同时与服务器进行交互，服务器想客户端响应信息，将信息更新到网页局部，整个过程页面不刷新。

2.异步操作

XMLHttpRequest对象：发送请求到服务器并获得返回结果。

var httpobj = new XMLHttpRequest();//1.创建XMLHttpRequest()对象，是浏览器对象

JavaScript对象XMLHttpRequest是整个Ajax技术的核心，他提供了异步发送请求的能力。

常用方法：

方法名	说明
open(method,URL,async)	建立与服务器的连接method参数指定请求的HTTP方法,典型的值是GET或POSTURL参数指定请求的地址async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

Get方式提交：
xmlhttp.open("GET","testServlet?name="+userName,true);
xmlhttp.send(null);  
Post方式提交
xmlhttp.open("POST","testServlet",true);
POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
POST方式发送数据
xmlhttp.send("name="+userName);

常用属性：

onreadystatechange：事件，指定回调函数
readystate: XMLHttpRequest的状态信息

就绪状态码	说明
0	XMLHttpRequest对象没有完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应，还没有结束
4	XMLHttpRequest对象读取响应结束

status:HTTP的状态码

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

responseText：获得相应的文本内容。

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 = "check" ,urlPatterns = "/checkAccount")
public class CheckAccountServlet extends HttpServlet {
    //异步
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String account = req.getParameter("account");//接收请求
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        if (account.equals("admin")){
            out.print("账号已存在");//3.对异步的请求进行响应，将响应内容返回给XMLHttpRequest对象
        }else{
            out.print("√");
        }

    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script type="text/javascript">
        function checkAccount(account) {
            //异步请求
            var httpobj = new XMLHttpRequest();//1.创建XMLHttpRequest()对象，是浏览器对象
            //2.打开链接，发送请求
            httpobj.open("get", "checkAccount?account=" + account, true);
            httpobj.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            httpobj.send("account=" + account + "&name=123");//发送请求
            //4.接受响应请求
            httpobj.onreadystatechange = function () {//onreadystatechange:事件，指定回调函数
                if (httpobj.readyState == 4 && httpobj.status == 200) {
                    document.getElementById("msgId").innerText = httpobj.responseText;
                }//readyState:XMLHttpRequest的状态信息;4:XMLHttpRequest对象读取响应结束

            }
        }
    </script>
</head>
<body>
<%--enctype="application/x-www-form-urlencoded" 表单的默认数据提交方式--%>
<form>
    账号：<input type="text" onblur="checkAccount(this.value)"><span id="msgId"></span><br/>
    密码：<input type="text"><br/>
</form>
</body>
</html>