Ajax工作流程

Posted zjlyyq

tags:

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

Ajax通过XMLHttpRequest对象实现异步方式在后台发送发送请求。

主要有以下四个步骤：

（1）初始化XMLHttpRequest对象。不同浏览器的差异，需要我们创建一个跨浏览器的对象，并判断XMLHttpRequest对象创建是否成功，如果不成功，则给予提示。

（2）为XMLHttpRequest对象指定一个回调函数，用于对后台返回结果进行处理。

（3）创建一个与服务器的连接，在创建时，需要指定发送请求的方式（GET/POST），以及设置是否采用异步方式发送请求。

（4）向服务器发送请求。

以下是一个用Ajax判断用户名是否正确的样例：

index.jsp文件：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function getAnswer(username) {
        if(username.value == ""){
            alert("请输入用户名");
            username.focus();
            return;
        }
        else{
            checkUsername("checkusername.jsp?username="+username.value);    //参数已整合到url地址中
        }
    }
    function checkUsername(url) {
        http_request = new XMLHttpRequest();      //初始化XMLHttpRequest对象
        http_request.onreadystatechange = function (){      //回调函数对后台返回结果进行处理
            if(http_request.readyState==4){
                if(http_request.status == 200){
                    alert(http_request.responseText);
                }
                else{
                    alert("地址有误");
                }
            }
        }
        http_request.open("POST",url,true);         //链接服务器
        http_request.send(null);                    //发送请求，这里不用带参数，前面参数已经整合进url中。
    }
</script>
</head>
<body>
<form action="" method="get" name="form1">
    用户名：
    <input type="text" name="username"><br>
    密码：
    <input type="password" name="passwd"><br>
    <input type="submit" value="提交" onclick="getAnswer(this.form.username)">
</form>
</body>
</html>
View Code

checkusername.jsp(后台处理)：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String s = new String(request.getParameter("username").getBytes("ISO-8859-1"),"utf-8");
    if(s.equals("Tom")){
        out.print("此用户已注册");
    }
    else{
        out.print("恭喜你注册成功");
    }
%>
View Code

 另一种实现方法：（post方法，但传参数）

index.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function getAnswer(username) {
        if(username.value == ""){
            alert("请输入用户名");
            username.focus();
            return;
        }
        else{
            checkUsername("checkusername.jsp",username);   
        }
    }
    function checkUsername(url,username) {
        http_request = new XMLHttpRequest();      //初始化XMLHttpRequest对象
        var param = "username="+username.value;
        //alert(username.value);
        http_request.onreadystatechange = function (){      //回调函数对后台返回结果进行处理
            if(http_request.readyState==4){
                if(http_request.status == 200){
                    alert(http_request.responseText);
                }
                else{
                    alert("地址有误");
                }
            }
        }
        http_request.open("POST",url,true);         //链接服务器
        http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");       //设置表头
        http_request.send(param);                    //发送请求，这里不用带参数，前面参数已经整合进url中。
    }
</script>
</head>
<body>
<form action="" method="get" name="form1">
    用户名：
    <input type="text" name="username"><br>
    密码：
    <input type="password" name="passwd"><br>
    <input type="submit" value="提交" onclick="getAnswer(this.form.username)">
</form>
</body>
</html>

疑问：

1.两种方法有什么不同

2.第二种方法为什么要设置表头，而且第二种写法为什么只能测试一次，第二次填个用户名测试就无反馈

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

AJAX相关JS代码片段和部分浏览器模型

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

前端面试题之手写promise

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

VSCode自定义代码片段——git命令操作一个完整流程