成都校区Ajax

Posted 2021-04-15 黑马程序员成都中心

干货开始前请允许小编插播一条广告

黑马程序员成都中心最新开课通知：

成都黑马javaEE基础16期已经开班
成都黑马javaEE基础17期7月9号，毕业季招生旺季满额即开班，可提前占座

今天带大家来一起学习ajax

一、AJAX的概述
    同步和异步的区别：

•         同步
  

            在xx.jsp页面中，我们给form表单的action直接将数据提交到servlet中

<form action="${ pageContext.request.contextPath }/xxxServlet" method="post">
    。。。。
</form>
            在xxxServlet中，直接进行数据接收或者处理

String name = request.getParameter("name");
String pass = request.getParameter("pass");

•         异步
  

•             1.  在xx.jsp页面中，我们给某个元素直接绑定js事件，进行数据的交互
  

<input id="bt1" type="button" value="AJAX的GET请求"/>

•             2.  在js上，我们直接作出一些列操作过后，通过.open("GET","/day19/xxServlet?name=aaa&pass=123",true);将数据传递给xxServlet
  

function xx() {
    // 1.创建异步对象
    var xhr = createXMLHttp();
    // 2.设置状态改变的监听 回调函数.
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){ // 请求发送成功
            if(xhr.status == 200){ // 响应也成功
                // 获得响应的数据:
                var data = xhr.responseText;
                // 将数据写入到DIV中:
                document.getElementById("d1").innerhtml = data;
            }
        }
    }
    // 3.设置请求路径
    xhr.open("GET","/day19/xxServlet?name=aaa&pass=123",true);
    // 4.发送请求
    xhr.send(null);
}

•             3.  在xxServlet中，根据.open的get或者post方法，接收从js中传递的数据并处理
  

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
String name = request.getParameter("name");
String pass = request.getParameter("pass");

}
    异步的 javascript And XML
    AJAX的功能:完成页面的局部刷新,不中断用户的体验
        * XML:使用XML做为数据传递的格式: JSON:

二、API
    XMLHttpRequest对象

•         属性
  

            onreadystatechange : 指定当readyState属性改变时的事件处理句柄。只写 
            readyState : 返回当前请求的状态，只读. 
                0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 
                1 (初始化) 对象已建立，尚未调用send方法 
                2 (发送数据) send方法已调用，但是当前的状态及http头未知 
                3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 
                4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 
            responseBody  : 将回应信息正文以unsigned byte数组形式返回.只读 
            responseStream : 以Ado Stream对象的形式返回响应信息。只读 
            responseText :将响应信息作为字符串返回.只读 
                返回的是字符串或者页面都可以使用这个属性
            responseXML:将响应信息格式化为Xml Document对象并返回，只读 
            status : 返回当前请求的http状态码.只读 
                200,404等等
            statusText  : 返回当前请求的响应行状态，只读 

•         方法
  

            abort( ) ;取消当前请求 
            getAllResponseHeaders( ) ; 获取响应的所有http头 
            getResponseHeader() ; 从响应信息中获取指定的http头 
            open( ); 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码) 
                open("请求方式","路径",true);
            send ( ) ;发送请求到http服务器并接收回应 
            setRequestHeader ( ); 单独指定请求的某个http头 

•         创建XMLHttpRequest对象
  

            function createXmlHttp(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
       try{// Internet Explorer
             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
        catch (e){
          try{
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch (e){}
          }
    }

    return xmlHttp;
}

三、AJAX的入门

•     AJAX的编写的步骤:
  

        * 第一步：创建一个异步对象.
* 第二步：设置对象状态改变触发一个函数.
* 第三步：设置向后台提交的路径
* 第四步：发送请求.

•     GET方式提交请求:
  

        function ajax_get() {
    // 1.创建异步对象
    var xhr = createXMLHttp();
    // 2.设置状态改变的监听 回调函数.
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){ // 请求发送成功
            if(xhr.status == 200){ // 响应也成功
                // 获得响应的数据:
                var data = xhr.responseText;
                // 将数据写入到DIV中:
                document.getElementById("d1").innerHTML = data;
            }
        }
    }
    // 3.设置请求路径
    xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);
    // 4.发送请求
    xhr.send(null);
}

•     POST方式提交请求:
  

        function ajax_post(){
    // 创建异步对象:
    var xhr = createXMLHttp();
    // 设置监听:
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                document.getElementById("d1").innerHTML = xhr.responseText;
            }
        }
    }
    
    // 打开路径:
    xhr.open("POST","/day15/ServletDemo1",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 发送请求:
    xhr.send("name=张三&pass=123");
}
四、JQuery实现异步请求
方法：
        Jq的对象.load(路径,参数,回调函数);
            load(url, [data], [callback])
                url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。
        $.ajax();
        $.get(路径,参数,回调函数,数据类型);
        $.post(路径,参数,回调函数,数据类型);
        serialize(); -- JQ的AJAX传递参数的时候需要使用的方法.
五、AJAX响应数据格式：

•     文本
  

•     一段HTML的数据
  

•     XML文件
  

        【使用工具生成XML的文件】
            通常使用xStream工具. 将集合,数组,对象转成XML.
                简介：

另外，Xstream是一种OXMapping 技术，是用来处理XML文件序列化的框架,在将javaBean序列化，或将XML文件反序列化的时候，不需要其它辅助类和映射文件，使得XML序列化不再繁琐。
                核心jar包：
    xpp3_min-1.1.4c.jar
    xstream-1.4.4.jar
                核心对象：
XStream xStream = new XStream();
                主要方法：
                    //将list集合转成xml
        String xmlStr = xStream.toXML(list);
            结果：
              <com.itheima.domain.City>
                <cid>12</cid>
                <cname>贵阳市</cname>
                <pid>2</pid>
              </com.itheima.domain.City>
              <com.itheima.domain.City>
                <cid>13</cid>
                <cname>六盘水市</cname>
                <pid>2</pid>
              </com.itheima.domain.City>
                    // 修改标签名:将City.class的全路径改为city.
        xStream.alias("city", City.class);
            结果：
                <city>
                    <cid>13</cid>
                    <cname>六盘水市</cname>
                    <pid>2</pid>
                 </city>
                 <city>
                    <cid>14</cid>
                    <cname>遵义市</cname>
                    <pid>2</pid>
                 </city>
                    // 将类中属性作为 标签的属性：
            xStream.useAttributeFor(City.class, "cid");
            xStream.useAttributeFor(City.class,"cname");
            xStream.useAttributeFor(City.class,"pid");

             结果：
                 <city cid="13" cname="六盘水市" pid="2" />
                 <city cid="14" cname="遵义市" pid="2" />

•     JSON格式
  

        定义
            JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
        JSON的数据格式的介绍:
            JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：
            一个值：
                {“id”:1,”name”:aaa}
            多个值：
                [{“id”:1,”name”:aaa},{“id”:2,”name”:bbb}]
        JSON的生成工具
            JSONLIB 转换JSON数据:
                * JSONArray    :将数组或List集合转成JSON.
                * JSONObject:将对象或Map集合转成JSON.
        JSON 语法规则
            在 JS 语言中，一切都是对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：

*对象表示为键值对
*数据由逗号分隔
*花括号保存对象
*方括号保存数组
        JSON 与 JS 对象的关系
            JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
            var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
            var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串
        JSON 和 JS 对象互转
            要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
    var json = JSON.stringify({a: 'Hello', b: 'World'}); 
    //结果是 '{"a": "Hello", "b": "World"}'
            要实现从 JSON 转换为对象，使用 JSON.parse() 方法：
    var obj = JSON.parse('{"a": "Hello", "b": "World"}'); 
    //结果是 {a: 'Hello', b: 'World'}