Ajax工作流程(原生Ajax)

简介: Ajax工作流程(原生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>


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("恭喜你注册成功");
    }
%>


另一种实现方法:(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>
相关文章
|
11天前
|
前端开发
Ajax的原生写法
Ajax的原生写法
|
23天前
|
XML JSON JavaScript
JQuery基础和原生ajax
JQuery基础和原生ajax
71 3
|
2月前
|
前端开发 JavaScript
原生js发送ajax请求---ajax请求篇(一)
在原生js中我们使用的是XMLHttpRequest对象来发送ajax请求
42 0
|
3月前
|
XML 前端开发 JavaScript
原生ajax
ajax的概念:Ajax即Asynchronous Javascript And XML(异步JavaScript和XML),实际上就是前端js语言与后端交互的手段
|
4月前
|
JSON 缓存 前端开发
AJAX ------ 原生 AJAX
AJAX ------ 原生 AJAX
|
8月前
|
前端开发 安全
|
9月前
|
XML 前端开发 JavaScript
简述Ajax,以及使用原生js书写Ajax案例
简述Ajax,以及使用原生js书写Ajax案例
89 0
|
11月前
|
XML JSON JavaScript
原生AJAX实现异步请求
原生AJAX实现异步请求
89 0
|
12月前
|
XML 存储 前端开发
【Ajax入门技术】原生AJAXexpress的基本使用,进行不刷新页面获取到数据
【Ajax入门技术】原生AJAXexpress的基本使用,进行不刷新页面获取到数据
58 0
【Ajax入门技术】原生AJAXexpress的基本使用,进行不刷新页面获取到数据
|
12月前
|
缓存 前端开发
原生AJAX服务请求
原生AJAX服务请求