黑马程序员技术交流社区

标题: 【广州校区】+【原创】+javaWeb之AJAX [打印本页]
作者: 忽忽糊糊虎虎    时间: 2017-12-27 17:22
标题: 【广州校区】+【原创】+javaWeb之AJAX
本帖最后由 忽忽糊糊虎虎 于 2017-12-27 17:25 编辑

什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。


AJAX 工作原理



AJAX实现
（1）创建 XMLHttpRequest 对象
        所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
<script>
function loadXMLDoc()
{
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
        }
        else
        {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
        xmlhttp.send();
}
</script>

（2）AJAX - 向服务器发送请求请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法        描述
open(method,url,async)        规定请求的类型、URL 以及是否异步处理请求。
•        method：请求的类型；GET 或 POST
•        url：文件在服务器上的位置
•        async：true（异步）或 false（同步）
send(string)        将请求发送到服务器。
•        string：仅用于 POST 请求

（3）AJAX - 服务器 响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性        描述
responseText        获得字符串形式的响应数据。
responseXML        获得 XML 形式的响应数据。

________________________________________
responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应；
responseXML 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性；

（4）AJAX - onreadystatechange 事件
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性        描述
onreadystatechange        存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState        存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
•        0: 请求未初始化
•        1: 服务器连接已建立
•        2: 请求已接收
•        3: 请求处理中
•        4: 请求已完成，且响应已就绪
status        200: "OK"
404: 未找到页面

注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

（5）ajax案例

        编写servlet，doGet()方法获得数据，并发送响应数据
public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
        //1 获得数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //2 处理
        System.out.println(username + " : " + password);
        //3 响应数据
        response.getWriter().print("get success");
}

在demo01.jsp提供按钮，点击发送get请求。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>js实现ajax(了解)</title>
    <script type="text/javascript">
   
            //同步提交请求
            function commit(){
                    location.href="${pageContext.request.contextPath}/hello?name=admin&pwd=123456";
            }
            
            //异步提交请求
            function sendGet(){
                    
                    //1.获取ajax引擎对象
                    var xmlHttp = new XMLHttpRequest();
                    //2.设置回调函数,作用ajax请求服务器过程中不同状态变化的时候都会调用这个函数
                    xmlHttp.onreadystatechange = function(){
                            //获取服务器响应数据并处理显示
                            //xmlHttp.readyState,ajax引擎对象请求服务器过程中不同的状态值
                            //xmlHttp.readyState，0~4
/*                             •        0: 请求未初始化
                                •        1: 服务器连接已建立
                                •        2: 请求已接收
                                •        3: 请求处理中
                                •        4: 请求已完成，且响应已就绪 */
                                //获取服务器响应的数据进行处理并显示
                                if(xmlHttp.readyState==4){
                                        //200,http状态码，浏览器与服务器通信正常
                                        if(xmlHttp.status==200){
                                                //通信正常，并且接收到服务器的正常响应数据
                                                //获取服务器响应数据
                                                var content = xmlHttp.responseText;//服务器响应的文本字符串
                                                alert(content);
                                        }
                                }
                    };
                    //3.设置请求方法与提交服务器地址
                    //xmlHttp.open(method, url);
                    //method,设置请求方法（get或post）
                    //url，设置服务器地址
                    xmlHttp.open("get", "${pageContext.request.contextPath}/hello?name=admin&pwd=123456");
                    //4.ajax引擎对象发送异步请求
                    xmlHttp.send();
                    
            }
            
   
    </script>
  </head>
  
  <body>
   <input type="button" value="同步提交get请求"><br/><br/>
   <input type="button" value="js异步提交get请求"><br/><br/>
  </body>
</html>
（本案例只提供了get提交，post提交同理可得）；

作者: java愤怒小鸟    时间: 2017-12-28 16:48
666
作者: pk_梦醒    时间: 2017-12-28 18:16
666 学习了
作者: 帅气de路人甲    时间: 2017-12-29 09:48
已学习，谢谢
作者: ericxu1116    时间: 2017-12-29 21:15
不错，不错！！！！
作者: 一Pi小小小黑马    时间: 2018-1-11 21:28
顶



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2