了解原生js的ajax

1. 什么是ajax

1.1 概念：Asynchronous JavaScript And XML 异步的JavaScript和XML

以前的数据提交方式是同步的，以前我们表单提交数据给服务器。串行操作方式，如果服务器没有响应回来，浏览器不能进行任何操作，只能等待。

AJAX使用异步的提交方式，后台进行数据的提交给服务器。

XML文件。用来接收服务器返回的数据。

1.2 同步方式与异步方式的区别

同步方式:由浏览器发送请求给服务器，它们之间是串行操作，如果服务器没有响应回来，我们不能进行下一步的操作，这期间浏览器只能等待。

异步方式:由JavaScrip
生成一个对象，这个对象XMLHttpRequest，由这个对象去发送请求给服务器，并且是后台发送的，不会影响用户操作体验。而且浏览器与服务器之间是并行操作的。

1.3 ajax使用的技术

JavaScript：后台发送请求和接收服务器的响应。

XML：因为服务器端的编程语言与浏览器端的编程语言不同，不同的语言之间进行数据交换，使用XML从服务器端返回的数据，在浏览器端再解析XML获取数据(即传输数据)。由于XML的生成和解析过于繁琐，目前很少使用，用JSON格式。

1.4 应用场景

1.检查用户名是否已经被注册

2.内容自动补全，如:百度的搜索框

3.下拉框联动 

2. 原生的ajax

2.1 AJAX的执行流程

流程说明：

  1. 用户在浏览器上操作的时候，由JS后台创建XMLHttpRequest对象

  2. 设置请求对象的回调函数(事件处理函数)，准备状态发生变化时激活的函数

  3. 后台发送请求给服务器

  4. 在服务器进行数据的处理，这里和以前的处理方式是一样的。

  5. 服务器将处理结果以XML的方式发送给浏览器

  6. 数据发送回来会激活状态改变的事件(第2步的回调函数)

  7. 在回调函数中处理页面的更新，实现局部刷新。

  8. 用户就可以看到最新的处理结果

 

2.2. XMLHttpRequest对象的事件、方法和属性

方法/事件/属性名 作用
new XMLHttpRequest() 通过构造方法创建对象
onreadystatechange 准备状态发生改变的事件
readyState 获取准备状态，有以下取值：
1：表示开始发送请求 2：表示请求结束 3：表示服务器端开始响应 4：表示服务器端的响应结束
responseText 获取服务器返回的文本
open("GET","URL",true) 打开服务器连接，
参数： 1. GET或POST 指定发送请求的方式 2. URL：访问服务器的地址 3. true/false：true表示异步，false表示同步
send() 发送请求

//服务器端代码(不查数据库)

package com.yblue.servlet;

import java.io.IOException;
import java.io.PrintWriter;

@javax.servlet.annotation.WebServlet(name = "Demo01Servlet", value = "/demo01")
public class Demo01Servlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        response.setContentType("text/plain;charset=utf-8");
        PrintWriter out = response.getWriter();
        String user = request.getParameter("user");
        System.out.println(user);
        if ("yblue".equalsIgnoreCase(user)) {
            out.print(user + "已存在");
        } else {
            out.print(user + "注册成功");
        }
    }

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

//浏览器端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
用户名:<input type="text" id="user" name="user"><span id="info"></span>
</body>
<script type="text/javascript">
    document.getElementById("user").onblur = function () {
        let value = this.value;
        alert(value);
        //1.创建XMLHttpRequest对象
        let request = new XMLHttpRequest();

        //2.设置这个对象准备状态改变事件
        request.onreadystatechange = function () {
            //判断准备状态是否等于4：表示服务器已经响应回来了
            //判断状态码是否是200，正确的响应
            if (request.readyState == 4 && request.status == 200) {
                //获取服务器返回的数据,并将数据给<span>赋值
                document.getElementById("info").innerText = request.responseText;
            }
        }

        //3.创建与服务器的连接，使用GET方法发送，数据在地址栏后传递
        let url = "demo01?user=" + value;
        request.open("get", url, true);
        //4.发送数据
        request.send();
    };
</script>
</html>

 

 

想看更多精彩内容，可以关注我的CSDN

 

我的CSDN

 

posted @ 2020-09-07 17:26  Yblue  阅读(217)  评论(0)    收藏  举报