2019年8月11暑假集训

最新推荐文章于 2022-10-17 14:36:25 发布

笔描相思

最新推荐文章于 2022-10-17 14:36:25 发布

阅读量125

点赞数 1

分类专栏：学习

本文链接：https://blog.csdn.net/qq_44788119/article/details/99340194

版权

学习专栏收录该内容

95 篇文章 0 订阅

订阅专栏

Ajax学习；
（1）什么是Ajax
异步刷新技术，用来在当前页面内响应不同的请求内容
（2）为什么需要Ajax
需求：
有的时候我们需要将本次的响应结果和前面响应结果内容在同一个页面中展现给用户。
解决：
1，在后台服务端将多次响应内容重新拼接成一个jsp页面，响应
但是这样会造成很多响应内容被重复的响应，资源浪费
2，使用Ajax技术
（3）使用Ajax
Ajax访问原理
Ajax的基本使用流程
Ajax的状态码
Ajax的异步和同步
Ajax的请求
Ajax的响应数据类型
Ajax的封装

（4）， Ajax案例

<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2019/8/12
  Time: 15:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>你好</title>
    <script type="text/javascript">
        function getDate()
        {
            //创建Ajax引擎对象
            var ajax;
            if (window.XMLHttpRequest )
            {
                ajax=new XMLHttpRequest();
            }else if (window.ActiveXObject)
            {
                ajax=new ActiveXObject("Msxm12.XMLHTTP");
            }
            //复习onreadystaement函数

            ajax.onreadystatechange =function ()
            {
                var result=ajax.responseText;
                //获取元素对象
                var showdiv=document.getElementById("showdiv");
                //获取元素内容
                showdiv.innerHTML=result;

            }
             //发送请求
            ajax .open("get","index.jsp");
            ajax.send(null);


        }
    </script>
    <style type="text/css">
        #showdiv{
            border:solid 1px;
            width: 200px;
            height:100px;
        }
    </style>
</head>
<body>
    <h3>欢迎登录403峡谷</h3>
<hr>
    <input type="button" value="测试" onclick="getDate()"/>
<div id="showdiv" ></div>
</body>
</html>

（5），基本流程
//创建ajax引擎对象
//复写onreadystatemment函数
//判断ajax状态码
//判断响应状态码
//获取响应内容（响应内容的格式）
//处理响应内容（js操作文档结构）
//发送请求
ajax的状态码：
readyState：0，1，2，3，4

（4）：表示响应的内容被成功接收
响应状态码：
status
200：表示一切Ok
404: 资源未找到
500：内部服务器错误