五、Ajax 入门

Ajax其实 (Asynchronous Jascript And XML) ：是指异步 Javascript 以及XML, Ajax 不是一门新的技术、它也不是一门特有的语言。它是一种被 google 公司推广的一门旧的技术，新的用法。这里的旧的技术指的一套技术组合(DOM、CSS、Javascript、浏览器支持的 XMLHttpRequest 对象)

1. 原生方式开发 Ajax 步骤：

  1. 创建 XMLHttpRequest 对象，考虑到 浏览器版本的问题，比如 IE6以下的版本就不支持 XMLHttpRequest 对象，但是支持 ActivieXObject。所有在创建 Ajax 核心对象，代码应该如下:
function getXHR() {
        //定义一个 ajax 核心对象的引用
        var xhr;
        if(window.XMLHttpRequest){
            //ie6以上支持的,其他的浏览器都支持
            xhr =  new XMLHttpRequest();
        }else {
            // ie6 以下支持的
            xhr =new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
}
  1. 注册监听器监听 XMLHttpRequest 状态，使用 XMLHttpRequest 对象中的 onreadystatechange 事件
hrx.onreadystatechange = function () {
                if(hrx.readyState == 4 && hrx.status == 200) {
                    document.getElementById("showInfo").innerHTML = hrx.responseText;
                }
            }
  1. 设置 ajax 连接信息,通过调用 XMLHttpRequest 中的open 方法
hrx.open("get","ajax.do",true);
  1. 发送 ajax 请求 ，通过 调用 XMLHttpRequest 对象中的 send 方法
hrx.send();

完整代码:

<script type="text/javascript" src="getHXR.js"></script>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("sendAjax").onclick =function () {
            //1.创建 hrx
            var hrx = getXHR();
            //2.注册一个监听ajax 请求的状态
            hrx.onreadystatechange = function () {
                if(hrx.readyState == 4 && hrx.status == 200) {
                    document.getElementById("showInfo").innerHTML = hrx.responseText;
                }
            }
            //3.ajax 请求的方式以及 请求的 url地址
            hrx.open("get","ajax.do",true);
            //4.使用 核心对象 hrx 发送 ajax 请求
            hrx.send();
        }
    }
</script>

1.1 XMLHttpRequest 核心对象详解

  • XMLHttpRequest 核心对象中的属性
    readyState 属性：
    类型：返回的数据类型是 short 类型
    作用：表示XMLHttpRequest对象的当前状态
    具体含义:
    0：代表的XMLHttpRequest对象刚刚创建，但是还未初始化
    1:open方法已经被调用了
    2:send方法已经被调用了
    3:接受到了响应消息头，但是没有接受到正文
    4:接受到了响应正文，响应结束
    status 属性：
    类型：返回的数据类型 short
    作用：响应的状态码
    具体含义：200 成功响应,404 找不资源......
    statusText 属性：
    类型：返回的类型是String
    作用：对响应码的描述
    responseText属性：
    类型：返回的类型是 string
    作用：接受服务器返回的文本类型的正文数据
    responseXML属性：
    类型:返回的是docment对象(js中的文档模型)
    作用:接受服务器返回的XML类型的正文数据

  • XMLHttpRequest 核心对象中的方法

open 方法：
方法：open（String method，String url，boolean async）
作用: 建立连接
参数解析：
method：ajax 请求方式 get 、 post
url：请求资源地址 eg: ajax.do
async ： ajax 请求是是否为异步 默认true，异步

send 方法：
方法：send（String data）
作用：发送 ajax 请求正文 数据，只有 post 方式，所有如果ajax 请求是get 方式，不能在 send 方法中设置请求数据，如果是post 方式在发送 正文数据前，应该设置请求头，
setRequestHeader（String headerName,String headerValue）; 设置请求消息头。
eg:hrx.setRequestHeader（"Content-type","application/x-www-form-urlencoded"）;

  • XMLHttpRequest 核心对象中的事件 onreadystatechange
    作用：指向一个函数，用于做事件处理的，XMLHttpRequest对象的readyState的每次发生变化都会触发onreadystatechange指向的那个函数处理器。
    这个函数就是我们自己去编写

2.使用 Jquery 封装好的Ajax

Jquery 对原生的 Ajax 请求 进行三类封装:
第一类简单的封装:$.ajax(); 要讲
第二类进一步封装:$.get() 、$.post(); 要讲
第三类再再进一步封装:$.getJson 、$.getScript

2.1.$.ajax()

    //请求数据的格式： 1.key/value 数据格式
    //          2.json 数据格式
    var json = {"name":"John","location":"Boston"};
    $(function() {
        $("#sendAjax").click(function() {
            //1.发送ajax 请求
            $.ajax({type : "post",
                //请求资源地址
                url : "ajax.do",
                //请求携带的请求数据
                data : json,
                //readyState =4 state = 200 处理成功后的事件
                success : function(msg) {
                    //$("#showInfo").text(msg);
                    //console.info(msg);
                    alert(msg.name);
                    alert(msg.location);
                }
            });
        });
    });

2.2.$.get()

<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<script type="text/javascript">
    var json = {"name":"John","location":"Boston"};
    // get请求方式的ajax
    $(function () {
        $("#sendAjax").click(function () {
            $.get("ajax.do",json,function (msg){
                alert(msg);             
            });
        });
    });
</script>

2.3.$.post()

<script type="text/javascript">
    var json = {"name":"John","location":"Boston"};
    // post请求方式的ajax
    $(function () {
        $("#sendAjax").click(function () {
            $.post("ajax.do",json,function (msg){
                var str = msg.name + msg.location;
                $("#showInfo").text(str);
            });
        });
    });
</script>

3. JSON 入门

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。

JSON 建构于两种结构：

  • “名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。
  • 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式：

  • 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

  • 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。


图片.png

数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

图片.png

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

图片.png

JSON 工具

市面有很多的 JSON 转化工具，转化(JAVA 对象转换成 Json 格式的字符串，叫序列化；Json 格式的 字符串 转换成 Java 对象，叫反序列化)，
有 jackjson 工具、gson工具、fastjson工具(alibaba 温绍开发的)、json-lib 工具.......

  • jackjson 工具
    先导包：
    jackson-annotations-2.8.10.jar
    jackson-core-2.8.10.jar
    jackson-databind-2.8.10.jar
    序列化：ObjectMapper mapper = new ObjectMapper();
    JAVABEAN:String json = mapper.writeValueAsString(u);
    List、set:String json = mapper.writeValueAsString(users);
    Map:String json = mapper.writeValueAsString(map);
    反序列化：
    javabean:mapper.readValue(json, UserModel.class);
    map:mapper.readValue(json, UserModel.class);
    list、set:mapper.readValue(json, new TypeReference<List<UserModel>>() {});
  • fastjson 工具
    先导包: fastjson-1.2.31.jar
    序列化： JSON.toJSONString（javabean对象或者list set....），该方法在转化日期的时候，使用的是 时间戳类型进行转化。
    JSON.toJSONStringWithDateFormat(u, "yyyy-MM-dd"); 该日期格式的序列化方法
    JAVABEAN: {"age":18,"birth":1514182514315,"flag":true,"name":"test","password":"pass1111"}
    List、set:[{"age":18,"birth":1514182663609,"flag":true,"name":"test","password":"pass1111"},{"age":18,"birth":1514182663609,"flag":true,"name":"test","password":"pass1111"}]
    Map:
    {
    "k1": {
    "age": 18,
    "birth": 1514182824812,
    "flag": true,
    "name": "test",
    "password": "pass1111"
    },
    "k2": {
    "age": 18,
    "birth": 1514182824812,
    "flag": true,
    "name": "test",
    "password": "pass1111"
    }
    }
    注意：map 就是一个 javabean
    反序列化：JSON.parseObject(json, UserModel.class)
    JAVEAN:JSON.parseObject(json, UserModel.class)
    LIST、SET：JSON.parseArray(json, UserModel.class);
    MAP:JSON.parseObject(json, UserModel.class)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,406评论 5赞 475
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,976评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,302评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,366评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,372评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,457评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,872评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,521评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,717评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,523评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,590评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,299评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,859评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,883评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,127评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,760评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,290评论 2赞 342

推荐阅读更多精彩内容