JavaWeb之ajax初识

最新推荐文章于 2022-02-22 17:21:36 发布

站在风口的猪猪侠

最新推荐文章于 2022-02-22 17:21:36 发布

阅读量170

点赞数

分类专栏： web开发文章标签： ajax javaWeb

本文链接：https://blog.csdn.net/SICAUliuy/article/details/89138848

版权

web开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

Ajax概述

什么是ajax

ajax(Asynchronous JavaScript and XML)，使用JavaScript语言与服务器进行异步交互，传输数据为xml(不止xml,还可以是：json、text等)。Ajax最大的特点是：当服务器响应时，不用刷新整个浏览器页面，而是局部刷新。

ajax使用

第一步（得到XMLHttpRequest）

大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();
IE6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

代码实现：

        //创建异步对象
        function CreateXMLHttpRequest(){
            try {
                return new XMLHttpRequest();//大部分浏览器
            }catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");//针对IE6.0
                }catch (e) {

                    try {
                        return new ActiveXObject("Microsoft.XMLHTTP");//针对IE5.5及以前的版本
                    }catch (e) {
                        alert("浏览器版本未知");
                        throw e;
                    }
                }
            }
        }

第二步：打开服务器连接

调用XMLHttpRequest对象的open()方法，传递三个参数

请求方式：GET或POST
请求URL:指定服务器端的资源
请求是否异步：异步为true,否则同步

第三步：POST请求需要设置请求头，GET请求无需这一步

调用XMLHttpRequest的setRequestHeader：

httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第四步：发送请求

调用XMLHttpRequest的send()方法：POST传入参数，GET传null

第五步：注册监听，得到服务器的响应

需要在XMLHttpRequest对象上注册一个监听器：onreadystatechange

XMLHttpRequest对象共有五种状态

0状态：刚创建，还没有调用open()方法;
1状态：请求开始：调用了open()方法，但还没有调用send()方法
2状态：调用完了send()方法了；
3状态：服务器已经开始响应，但不表示响应结束了
4状态：服务器响应结束

通过XMLHttpRequest对象的readyState得到状态值

XMLHttpRequest对象的status得到服务器响应状态吗（200，404，500等）

得到服务器响应的内容

var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象了

案例1：get请求

创建AServlet.java

@WebServlet(name = "AServlet",urlPatterns = "/AServlet")
public class AServlet extends HttpServlet {

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

        //响应客户端
        response.getWriter().println("Hello Ajax!!!");

    }
}

创建jsp界面：ajax1.jap

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Ajax1</title>


    <script type="text/javascript">

        //创建异步对象
        function CreateXMLHttpRequest(){
            try {
                return new XMLHttpRequest();//大部分浏览器
            }catch (e) {
                try {
                    return new ActiveXObject("Msxml12.XMLHTTP");//针对IE6.0
                }catch (e) {

                    try {
                        return new ActiveXObject("Microsoft.XMLHTTP");//针对IE5.5及以前的版本
                    }catch (e) {
                        alert("浏览器版本未知");
                        throw e;
                    }
                }
            }
        }

        window.onload=function () {

            //获取btn对象
            var btn = document.getElementById("btn");
            btn.onclick=function () {
                /**
                 * 四步Ajax
                 * 1、得到XMLHttpRequest对象
                 * 2、打开与服务器的连接
                 * 3、发送请求
                 * 4、获取服务器返回值
                 */
                //得到XMLHttpRequest对象
                var xhr=CreateXMLHttpRequest();
                //打开与服务器的连接
                xhr.open("GET","<c:url value='/AServlet'/>",true);
                //发送请求
                xhr.send(null);
                //获取服务器返回值
                xhr.onreadystatechange=function () {
                    //双重判断：服务器已经响应结束状态为4，成功码为200
                    if(xhr.readyState==4&&xhr.status==200){
                        //获取服务器响应数据
                        var text = xhr.responseText;
                        //获取h1对象
                        var h1 = document.getElementById("h1");
                        //设置内容
                        h1.innerHTML=text;
                    }
                }
                
            }
        }
    </script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>

站在风口的猪猪侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb之ajax初识

Ajax概述什么是ajax ajax(Asynchronous JavaScript and XML)，使用JavaScript语言与服务器进行异步交互，传输数据为xml(不止xml,还可以是：json、text等)。Ajax最大的特点是：当服务器响应时，不用刷新整个浏览器页面，而是局部刷新。ajax使用第一步（得到XMLHttpRequest）大多数浏览器...
复制链接

扫一扫

专栏目录