AJAX使用步骤及入门案例

最新推荐文章于 2021-09-12 22:30:20 发布

Select星，却没有你

最新推荐文章于 2021-09-12 22:30:20 发布

阅读量156

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/qq_39260138/article/details/107252856

版权

AJAX入门

使用AJAX步骤

获取AJAX引擎：XMLHttpRequest对象（IE或其他浏览器自带AJAX引擎）[获取代码：W3CSchool-XML/JavaScript - XMLHTTPRequest]
设置一个回调函数：处理服务器响应的数据。通过XMLHttpRequest对象的onreadystatechange方法进行设置。
设置请求方式GET / POST以及请求的url：通过XMLHttpRequest对象的Open方法设置。URL即Servlet访问的url。
真正向服务器发送请求：XMLHttpRequest对象的Send方法
回调函数中获取服务器的响应数据：通过XMLHttpRequest对象的ResponseText方法获取。

XMLHttpRequest对象

获取XMLHttpRequest对象

对于大部分的浏览器来说，可以通过 new XMLHttpRequest()；直接获取。对IE5/6 通过ActiveObject("Microsoft.XMLHTTP")来获取。
XMLHttpRequest常用属性
1. onreadystatechange 他是用于绑定回调函数，当服务器响应数据回来后，我们可以在指定的回调函数中进行数据处理。
2. readyState：显示HTTP的请求状态。（共 0~4 五种状态）
3. status：返回HTTP的状态代码。200/404/500····
4. ResponseText/ResponseXML：获取相应数据。
XMLHttpRequest常用方法
1. open：参数1HTTP请求方式GET/POST，参数2URL路径，参数3true/false代表是否异步
2. send：真正向服务器发送请求。如果请求方式是get，使用send（null）即可。因为GET请求方式没有HTTP请求体。只有POST请求方式时才有请求体，所以send的参数只是在post请求时使用，例如：XMLHttpRequest.send(“username=xxx&password=xxx”);
3. SetRequestHeader：如果请求方式是POST，那么我们在使用时，必须设置一个请求头，就需要XMLHttpRequest.SetRequestHeader(“cont ent-type”,“默认”);一般情况如下：

AJAX入门案例

案例一验证用户名是否可用

案例分析：文本框录入信息，当点击提交按钮时，向服务器发送请求，检查是否可用（可用/被占用）。
第一步：创建一个页面，含用户名录入文本框

第二步：完成浏览器向服务器发送ajax请求操作

得到文本框中录入信息
使用ajax完成向服务器发送请求操作（前提：把获取XHR对象的方法封装在一个js文件中，用Script块引用）

2.1 获取XMLHTTPRequest对象

2.2 设置回调函数

2.3 open设置请求路径与方式

2.4 发送请求

2.5 根据服务器响应状况来处理响应数据

Servlet

HTML部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var xmlhttp;
        function check() {
            // 获得用户输入的信息
            var usernameValue = document.getElementById("username").value;
           // alert(usernameValue);
            xmlhttp == null;
            //第一步获取XMLHttpRequest对象
            if (window.XMLHttpRequest)
            {// code for IE7, Firefox, Opera, etc.
                xmlhttp=new XMLHttpRequest();
            }
            else if (window.ActiveXObject)
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //设置回调函数
            xmlhttp.onreadystatechange =  function(){
                //处理数据
                if (xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                        var Msg = xmlhttp.responseText;
                        document.getElementById("ResponseMsg").innerHTML = Msg;
                    }
                }
            };
            //设置open
            var url = "http://localhost:8080/userServlet";
            xmlhttp.open("POST",url,true);
            //第四步,真实发送数据给Servlet
            xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xmlhttp.send("username=" +usernameValue);
        }

    </script>
</head>
<body>

用户名： <input type="text" id="username" >
<span id="ResponseMsg"></span>
<br>
<input type="button" value="提交" onclick="check()">
</body>
</html>

Servlet部分代码

package com.itcast.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;

/**
 * @author LYJ
 * @createDate 2020-07-10-11:40
 */
@WebServlet(name = "userServlet", urlPatterns = "/userServlet")
public class userServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("收到请求。");
        String Msg = "";
        String username = request.getParameter("username");
        //判断username
        if("lyj".equals(username)){
            //用户名存在
            Msg="<font color = 'red'>用户名存在<font>";
        }else {
            Msg="<font color = 'green'>用户名可用<font>";
        }
        response.setCharacterEncoding("utf-8");
        response.getWriter().write(Msg);
    }

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

后续还打算补一个AJAX与Jquery结合的案例（2020.7.13上传的《AJAX与Jquery整合》中）。不然感觉一步步安逸的写，有点没意思。整点！@#￥%……&*（）（滑稽···）
在入门的时候，花了一上午，找错。千万要熟悉AJAX的使用步骤。设置回调函数一定写在open之前，即使再真正执行时，callback是最后一个执行的。最后也是重新写了一遍，以前的错，也没太纠结。也有可能是tomcat配置的错误。毕竟用的IDEA =。=